Antes de su explicación detallada, se muestra a continuación la lista de estrategias útiles para mejorar el rendimiento de la parte de CSS de las páginas web:
- Utilizar sprites CSS para reducir el número de imágenes de adorno a una única imagen.
- No utilizar expresiones (
expression()) en las hojas de estilos. El navegador Internet Explorer revalúa continuamente el valor de las expresiones y puede penalizar el rendimiento de la página. - No utilizar los filtros de Internet Explorer, ya que algunos filtros como
AlphaImageLoaderbloquean la carga de la página hasta que no se descarga la imagen utilizada por el filtro. - Enlazar hojas de estilos externas en vez de incluir los estilos en la propia página.
- Enlazar las hojas de estilos mediante
<link>en vez de@import(en Internet Explorer las reglas@importtienen el mismo efecto que enlazar los archivos CSS al final de la página). - Reducir el número de archivos CSS de la página.
- Combinar si es posible todos los archivos CSS individuales en un único archivo CSS.
- Reducir el tamaño de las hojas de estilos comprimiendo los archivos con las herramientas disponibles (CSS Tidy, YUI Compressor).
- Comprimir los archivos CSS en el servidor web antes de enviarlos al usuario.
Según los estudios realizados por Yahoo! y publicados en el artículo Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests, del tiempo total que el usuario espera hasta que la página solicitada se carga completamente, el 20% del tiempo corresponde a la parte del servidor (normalmente generar la página HTML de forma dinámica utilizado información de una base de datos) y el 80% restante corresponde a la parte del cliente (normalmente descargar hojas de estilos CSS, archivos JavaScript e imágenes).
De esta forma, es mucho más fácil mejorar el tiempo de respuesta de la página mejorando el rendimiento de la parte del cliente. Como uno de los principales elementos de la parte del cliente está formado por las hojas de estilos CSS, a continuación se indican algunas de las técnicas para mejorar su rendimiento.
En primer lugar, en los estudios realizados por Yahoo! se demuestra que aproximadamente el 20% de las páginas vistas de un sitio web no disponen de sus elementos guardados en la cache del navegador del usuario. Esto supone que en el 20% de las páginas vistas, los navegadores de los usuarios se descargan todos sus elementos: imágenes, archivos JavaScript y hojas de estilos CSS.
La conclusión de lo anterior es que resulta mucho mejor reducir el número de archivos diferentes y no reducir el tamaño de cada archivo individual. El objetivo es reducir el número de peticiones HTTP que la página realiza al servidor para descargar todos los contenidos.
Los navegadores limitan el número de peticiones HTTP simultáneas que se pueden realizar a un mismo servidor. Aunque el número máximo de peticiones varía de un navegador a otro, el límite se encuentra entre 2 y 8. Por tanto, si el límite del navegador son 2 peticiones HTTP simultáneas, cuando el navegador realice 2 peticiones, la descarga de la página se bloquea hasta que alguna de las peticiones concluya.
Como demuestran los estudios realizados por Yahoo!, la descarga de las páginas web se realiza a saltos, descargando cada vez 2, 4 o 6 elementos de la página. Por este motivo es fundamental reducir el número de elementos de la página, entre ellos el número de hojas de estilos CSS, para reducir el número de peticiones HTTP necesarias.
La recomendación de reducir el número de hojas de estilos CSS entra en conflicto con la recomendación de modularizar el diseño CSS del sitio web separando de forma lógica todos sus estilos en varios archivos individuales.
La solución consiste en combinar todos los archivos CSS individuales en un único archivo CSS. Aunque la hoja de estilos resultante tiene un tamaño muy grande, el número de peticiones HTTP requeridas para la parte de CSS se reduce al mínimo posible.
El siguiente paso consiste en reducir el tamaño de esa única hoja de estilos grande. Como los archivos CSS normales incluyen muchos espacios en blanco, nuevas líneas, comentarios y propiedades no optimizadas, es muy sencillo reducir su tamaño de forma considerable eliminando todos los elementos sobrantes.
Yahoo! ha desarrollado una herramienta llamada YUI compressor que permite reducir de forma segura el tamaño de los archivos JavaScript y CSS. Su uso no es muy cómodo para los diseñadores web, ya que requiere el uso de Java y la línea de comandos.
Otra herramienta similar a la anterior es CSSTidy, que permite reducir el tamaño de los archivos CSS eliminando los elementos sobrantes (comentarios, espacios en blanco, nuevas líneas) y optimizando las reglas CSS (sustituir propiedades individuales por propiedades shorthand, utilizar la notación abreviada de números y colores, etc.) CSS Tidy es una herramienta gratuita disponible para todos los sitemas operativos, se puede utilizar mediante la línea de comandos y también se puede integrar con el lenguaje de programación PHP.
Además de las herramientas descargables, existen aplicaciones online que permiten reducir fácilmente el tamaño del código CSS indicado. Una de las aplicaciones más conocidas es Clean CSS, que utiliza internamente CSS Tidy.