Gravatar de Armonth

Mejorando la “sensación” de velocidad: selectores CSS eficientes

Publicado el Tuesday 27 de April del 2010 @ 13:36 por Armonth.

  • 7
  • 1

  • Comentar

Tienes una página con un diseño óptimo. Nada de código basura en el (x)HTML o el CSS. Haces pocas peticiones HTTP, envías todo el contenido JS/HTML/CSS comprimido. En apenas un par de segundos has enviado toda tu web lo cual es una velocidad más que buena ¿puedes mejorar más la velocidad? Pues sí.

Cuando todo lo relacionado a la descarga en sí de una web es inmejorable y incluye que la velocidad/latencia tanto del cliente como del servidor es “perfecta” entonces ya sólo queda un paso que se puede mejorar: el renderizado de la web. Técnicamente no mejoras la velocidad de descarga pero sí la “sensación” de que carga rápido.

Si el cliente usa un navegador que es una patata a la hora de renderizar sitios poco podrás hacer, pero cuánto menos código tenga que gestionar mejor. Y cuánto más simple sea, también. No es lo mismo una web que se baja en 2 segundos y tarda medio más en renderizarse (aparecer en el navegador) que una que se baja en lo mismo y aparece en menos de 100ms. Es hora de usar selectores CSS eficientes.

Hay ciertas pautas de selectores que se consideran ineficientes y por tanto hay que evitar:

  • Selectores universales (body * {}).
  • Selectores descendientes (ul li a {}).
  • Selectores con “hijos” (ul > li > a).
  • Usar :hover fuera de elementos de enlace (input:hover) sobretodo en IE7/IE8 ralentiza.
  • Redundancia: body ul li es redundante porque todos los elementos son descendientes de body.

Más fácil que usar selectores CSS eficientes es analizar cuales son actualmente ineficientes. Para ello sólo hay que seguir los siguientes pasos:

  1. Usar Firefox + Firebug + PageSpeed.
  2. Irse al apartado “PageSpeed”.
  3. Analizar la página.
  4. Desplegar el apartado “Use efficient CSS selectors”.
  5. Corregir los selectores que aparezcan como ineficientes / muy ineficientes.
  6. Repetir pasos 3 y 4 hasta que no aparezcan reglas ineficientes.

Muchas veces lo más fácil para evitar el uso (abuso) de selectores descendientes y otros es usar una clase. Por ejemplo ante el siguiente código:

<div id="menu">
  <h2>Menú</h2>
    <ul>
      <li><a href="enlace">Enlace</a></li>
    </ul>
</div>

Se pueden ver algunos ejemplos que se aplican al elemento <a> de forma más o menos ineficiente por ejemplo:

#menu ul li a {}

Cuando se podría quedar fácilmente en:

#menu a {}

¿Tenemos el mismo código pero con dos menús y queremos uno de cada color? Veamos:

<div id="menu">
  <h2>Menú</h2>
    <ul id="menu1">
      <li><a href="enlace">Enlace</a></li>
    </ul>
  <h2>Menú 2</h2>
    <ul id="menu2">
      <li><a href="enlace">Enlace</a></li>
    </ul>
</div>

Malos ejemplos:

#menu ul#menu1 li a {}
ul#menu1 li a {}
#menu1 li a {}

#menu ul#menu2 li a {}
ul#menu2 li a {}
#menu2 li a {}

Buen ejemplo:

#menu1 a {}
#menu2 a {}

Conclusión

Corregir CSS eficientes sin tener que modificar código HTML casi siempre es muy sencillo… y también lo es hacer selectores CSS ineficientes. La mejor cura es ir revisando y corrigiendo. Hace dos días SigT mostraba que tenia 4 reglas muy ineficientes, 14 ineficientes y un uso potencialmente ineficiente con el uso de :hover. Lo cual parece mucho pero comparado con otros sitios es muy poco.

Veinte minutos después había despachado todas y la velocidad de render ha mejorado lo suficiente como para poder apreciarlo a simple vista. Vale la pena.

7 Comentarios

  1. dayer:

    Hola Armonth. ¡Estupenda idea! Voy a ponerla en práctica yo también.
    No obstante hay algo que no entiendo. En tu segundo ejemplo usas menu1 y menu2 de identificadores en el código HTML, pero en la solución CSS que propones te refieres a él como si menu1 fuera una clase —.menu1— en puesto de un id —#menu1.
    No sé si habrá sido descuido o que yo estoy empanado, jeje.

    Un saludo!

    Wednesday, 28 de April/2010 @ 16:21

  2. Armonth:

    Error de bulto. Corregido dayer ;P

    Wednesday, 28 de April/2010 @ 18:40

  3. Lidia:

    Me gustaría saber si hay alguna forma de analizar todas las páginas dependientes, puede que me salga que un estilo no se está usando en la home, pero que si se esté usando en la sección contacto. ¿cómo podría hacerlo?

    Sunday, 9 de May/2010 @ 13:50

  4. Barredo:

    @ Lidia – Para lo que comentas yo suelo usar una extension de firefox: Dust Me Selectors

    Wednesday, 19 de May/2010 @ 18:07

  5. Gerardo:

    Hola,
    Es muy interesante la idea de mejorar la velocidad de renderizado, buen artículo.
    Una nota: el elemento HTML no es descendiente de BODY.

    Wednesday, 23 de June/2010 @ 14:18

  6. Armonth:

    Ya Gerardo pero hablando de “contenido” todo el contenido de la página está en el BODY, fuera de él sólo quedan metadatos…

    Monday, 28 de June/2010 @ 12:32

  7. quizzer:

    muy buena info muchas gracias, es mucha info ya, minizar http request, optimizar mucho codigo tanto php para que no parsee tanto el server como html para no cargar cosas que no tienen sentido, optimizar imagenes, minificar los css y los javascript, color javascript en el foot en lo posible para que no bloqueen la web mientras se descargan, wow miles de cosas. Saludos pero si muy buena info :D es muy bueno optimizar css

    Tuesday, 10 de August/2010 @ 10:55

Comentarios cerrados