Webmaster Libre

Con CSS3 trayéndonos grandes mejoras y muchas cosas bonitas que hacer con las hojas de estilo, puede suceder que sobrecarguemos nuestros CSS y, casi sin darnos cuenta, hagamos que nuestros sitios carguen más lento.

A la hora de optimizar la carga, sobre todo de sitios o aplicaciones grandes, solemos mirar primero a otros sospechosos habituales: imágenes, vídeos, javascript… Pero, a pesar de que confío que todos minimicemos en mayor o menor medida nuestros ficheros CSS existen más factores que pueden afectar a los tiempos de carga de un sitio web.

En Perfection Kills hacen un repaso al rendimiento de las hojas de estilo, aprovechando las herramientas que nos ofrecen los navegadores Opera y Chrome (WebKit). El artículo es largo y realmente interesante, no deberías dejarlo pasar pero, por si no tienes mucho tiempo aquí te dejo traducidas las conclusiones:

• Reduce el número de selectores, incluso los destinados a IE (por ejemplo: .ie7 .foo .bar {})
• Evita los selectores universales (‘*’), incluso los selectores de atributo inespecíficos ([type="url"]).
• El zoom de la página afecta al rendimiento (ej. Opera)
• En algunos navegadores el tamaño de la ventana afecta al rendimiento (ej. Chrome)
• Los refrescos de página pueden afectar negativamente al rendimiento de las hojas de estilo en algunos navegadores (ej. Opera).
• “border-radius” y “transform” son dos de las propiedades más “caras” (al menos en WebKit y Opera)

Como siempre, lo mejor es utilizar las herramientas de las que disponemos para comprobar caso por caso la eficiencia de nuestras hojas de estilo, en ocasiones no utilizar selectores universales o utilizar menos selectores puede suponernos un inconveniente y, dependiendo de como hayamos estructurado el resto de los estilos, algo que podemos dejar pasar.

¿Has notado algún otro agujero de rendimiento al generar tus estilos?

Tags: CSS, rendimiento