La optimización de la entrega CSS es uno de los puntos que mayor impacto tiene en el rendimiento de una página web, ya que el CSS es uno de los elementos que bloquean la carga de la página en el navegador.
Es uno de los puntos que más penaliza en la herramienta de PageSpeed Insights. El motivo es que el navegador no empezará a mostrar contenido mientras se realiza el proload de la página y el parseo de las hojas de estilos.
La optimización CSS tiene especial relevancia en aplicaciones móviles.
Combinar las hojas de estilo CSS
Para reducir el número de peticiones que realiza el navegador podemos combinar todas las hojas de estilo en una.
De este modo, se produce un ahorro tanto en recursos cómo en el número de conexiones de red.
Si tenemos un sistema de desarrollo y entrega continúa, continuos delivery, podemos automatizar este paso con un script o unos comandos de consola:
$ tmp=$(mktemp --suffix .css)
$ cat static/css/bootstrap.min.css static/css/style.default.css > $tmp
Minificar CSS
El siguiente paso para reducir el tamaño del CSS combinado es minificarlo. Minificando el tamaño del fichero reduciremos los tiempos que el navegador necesita para descargar la hoja de estilo o el conjunto de ellas.
Al script anterior, le añadimos la minificación a través de la herramienta minify.
ddd
$ wget https://bin.equinox.io/c/dhgbqpS8Bvy/minify-stable-linux-amd64.tgz
$ ./minify $tmp > public/css/combined.css
Este proceso no sólo elimina los caracteres innecesarios, sino que hace sustituciones en la hora de estilos de forma segura, reduciendo aún más su tamaño.
La reducción de tamaño media esta oscila entre el 10 y el 20%.
Tenemos a nuestra disposición distintos minificadores que utilizan técnicas más o menos agresivas con resultados muy distintos.
Comprimir CSS
Sobre el fichero combinado añadimos compresión gzip para reducir aún más el tamaño de la hoja minificada.
La compresión gzip nos aporta una reducción adicional que puede alcanzar el 5%.
$ gzip -f -k9 public /css/combined.css
CSS Inline en el Head
El artículo de ayuda de PageSpeed Insights recomienda añadir el contenido de nuestras hojas de estilo inline dentro de la cabecera head.
Se puede utilizar esta técnica de dos modos diferentes:
1. Añadir inline en el head pequeños fragmentos de estilos css, es la técnica que se puede ver en el artículo de PageSpeed Insights.
2. La segunda técnica es apropiada para hojas de estilo de mayor tamaño, se denomina Inline critical-path CSS,o bien, critical css.
Consiste en extraer los estilos imprescindibles para cargarlos inline en el head. El resto de estilos los cargaremos de forma diferida en el body de la página.
En nuestro ejemplo el html con el que estamos trabajando tiene esta apariencia:
<head>
<link rel="stylesheet" href="/blog/css/combined.css">
</head>
y tras aplicar esta técnica el resultado que esperamos obtener es:
<head>
<style>
/* css inline imprescindibles para la primera carga*/
</style>
<link rel="preload" href="/css/combined.css" as="style" onload="this.rel='stylesheet'">
</head>
El código resultante utiliza la key preload para crear un link a un recurso externo, también denominado preload link.
Esta directiva nos permite realizar un fetch al recurso o inicializar la descarga, pero no bloquea el parseador por lo que el navegador puede continuar con la carga de la página.
Es similar a la utilización de async o defer en la carga de javascripts.
En el script de ejemplo, podemos automatizar esta tarea con la herramienta de consola o cli con nombre
Critical, del siguiente modo:
# Instalar critical a través de npm
$ npm install --global critical
# Procesar html, añadiendo css inline critical-path
$ cat public/index.html | critical --base ./public --inline > index.critical.html
Ahora podríamos minificar el código html generado con minify como hicimos con el código css.
La dificultad de esta técnica esta en su aplicación, especialmente si utilizamos generadores dinámicos de contenido.
Evitar el uso de @import
Utilizar la importación de CSS a través de la key @import dentro de una hoja de estilo, provoca la carga secuencial de cada recurso.
En terminos de rendimiento significa el aumento del tiempo necesario de carga de la página.
Evita el uso de @import. Utiliza como alternativa la carga a través de link
Para superar este punto, hay que sustituir todos los import por etiquetas link.
<link rel="stylesheet" href="/css/combined.css">
Evitar el uso de la etiqueta style en el body
Al igual que las hojas CSS, insertar estilos utilizando la etiqueta style produce el bloqueo de la presentación. Es mejor insertar los estilos dentro del head y emplear las técnicas anteriores.
¿Te ha gustado? Mándame ánimos con un comentario. ¡Gracias!
Mabel.
