Mejorando la "sensación" de velocidad: selectores CSS eficientes

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.