¿Cómo optimizar el css para que tus páginas web se carguen más rápidamente?

CSS significa en inglés “Cascading Style Sheets” – Hojas de estilos en cascada. Es un lenguaje para el diseño gráfico que encuentras en casi todas las páginas web. Es muy importante para el área del diseño, pero puede causar que tus páginas web se carguen lentamente.

Hay muchas razones porque una página web se carga lentamente. Una de estas razones pueden ser los estilos css:

  • Archivos css que contienen demasiadas reglas de css y/o reglas que tu página realmente no necesita, o al menos no necesita para mostrarse bien.
  • Demasiado archivos css.

Demasiadas reglas de css

Aquí Google habla de estilos críticos: los estilos que realmente necesitas para mostrar una el contenido principal de una página bien.

Pero muchos archivos css contienen reglas que no son críticas y que por ejemplo solo necesitas después de haber hecho clic en un botón.

Además, muchos archivos contienen reglas de css duplicadas. Por ejemplo, que todo el texto dentro de un p tiene un tamaño de 16px y el texto dentro de p class x también tiene este tamaño.

Muchas veces encuentras también reglas que se disuelven entre ellas. Por ejemplo primero aparece que in class tiene un margin de 10px, luego viene otra regla para la misma class donde se dice que el margin es de 15px.

Si tus archivos de css contienen estilos que tu página no necesita o que no son críticas para mostrar la página correctamente te aparece este mensaje en Page Speed Insights:

Pospón la carga de archivos css
Quita las reglas que no se usen de las hojas de estilo para reducir el número de bytes innecesarios que consume la actividad de red.

Demasiados archivos de css

Puede ser que tu mismo creaste varios archivos css, por ejemplo un archivo de estilos para todas las reglas para desktop y otro para móvil.

En el caso de plataformas como Wordpress muchos plugins vienen con sus propios archivos de css.

En Google Page Speed Insight aparece en este caso:

Elimina los recursos que bloqueen el renderizado.

Hay recursos que bloquean el primer renderizado de la página. Te recomendamos que muestres los elementos JS/CSS críticos insertados y pospongas todos los JS/styles que no sean críticos.

Lo mejor sería disminuir el número de archivos de css que se cargan.

¿Cómo saber cuáles archivos y/o reglas de css no necesitas?

Archivos de estilos css que no necesitas

Una primera idea puedes tener a través de Page Speed Insights bajo de “Pospón la carga de archivos CSS”.  Lo mismo puedes hacer cuando abres una página web en Chrome. Puedes abrir las herramientas del desarrollador (en Windows presionar F12) e ir a Audits.

Pospon la carga de archivos css.

Google Page Speed Insights muestra tus archivos css contienen muchas reglas que tus páginas no necesitan para mostrarse correctamente.

Google te muestra el peso de los archivos css (y javascript) y cuál es potencial ahora de peso si optimizas o borras estos archivos.

Si por ejemplo un archivo pesa 27kb y Google te muestra que puedes ahora 27kb optimizándolo puede significar que realmente no necesitas este archivo . Cómo prueba puedes desactivarlo para ver si la página se carga bien sin este archivo. (puedes por ejemplo quitar el código dentro del head del archivo html que llama el archivo css).

Reglas de css que no necesitas

Cómo puedes ver en Page Speed Insights que también hay archivos de estilos donde se utilizar algunas reglas de css, pero no todas. Por ejemplo del archivo en la imagen con un peso de 119kb se utiliza solo 4kb (puedes ahorrar 115kb optimizándolo).

Archivos contienen reglas de css que no necesitas

Page Speed Insights: el peso de los archivos y el peso que puedes ahorrar muestran que los archivos contienen reglas de css que no necesitas.

En las herramientas del desarrollador puedes hacer clic a lado derecho en los 3 puntos (“Customize and Control Dev Tools”). Luego vas a “More Tools” – “Coverage”. Acá haces clic en “Click the reload button to reload and start capturing coverage”.

Te va a aparecer otra vez una lista de archivos css (y js) con la información sobre su tamaño y cuánto de este tamaño no se utiliza. Puedes hacer clic en uno de los archivos y te aparece el contenido:

  • En verde está marcado el css que se utiliza.
  • En rojo están los estilos que no se utiliza.

En rojo también están marcadas comentarios dentro del archivo. Estos comentarios sirven para entender mejor el archivo. Pero al mismo tiempo ocupan espacio.
/* Control nav styles (e.g. 1,2,3…) */

Así sabes cuál css no necesitas y que puedes borrar.

Google Chrome herramientas del desarrollador.

Google Chrome herramientas del desarrollador.

Reglas de css que tu página no utiliza.

Reglas de css que tu página no utiliza.

Ojo, antes de de borrar reglas de css deberías hacer una copia de seguridad. Además, puede ser que una página revisada no utiliza ciertas estilos que otras páginas sí utilizan. Por ejemplo reglas para formularios (“forms”) encuentras en páginas de contacto o en landing pages. Pero la mayoría de las páginas “normales” generalmente no contienen “forms”.

En sitios pequeños se puede revisar todas las páginas manualmente. En sitios grandes esto es imposible. En este caso se puede revisar tipos de páginas. Estos pueden ser por ejemplo páginas de productos, páginas de categorías, etc.

También existen otras herramientas en Internet para encontrar estilos que no es necesario, por ejemplo UnusedCSS: https://unused-css.com/.

Herramienta UnusedCSS.

Herramienta UnusedCSS.

Tienes que registrarte sin costo para revisar un sitio con un máximo de 100 páginas. Pero si quieres descargar los archivos css optimizados, entonces sin las reglas css que no se necesita, tienes que pagar.

Cómo combinar archivos de estilos

Si tienes por ejemplo 3 archivos de estilos  -por ejemplo “main”, “movil” y “tabla”- puedes combinarlos en un solo archivo. Al css no les importa si todo está en un archivo o en 3 archivos separados.

La única razón porque muchos sitios contienen varios archivos de estilos es porque al diseñador/programador lo hace más fácil trabajar con varios archivos que con un solo archivo.

Lo único que debes tomar en cuenta es que varios archivos de estilos pueden contener reglas de css que se disuelven. Por ejemplo en un archivo se dice que un elemento tiene un “font-size:15px” y otro archivo dice que el mismo elemento tiene “font-size:20px”. La segunda regla “font-size:20px” sobreescribe la primera regla (15px). Entonces es importante mantener el orden de los estilos si vas a crear un nuevo archivo para combinar el css.

Si trabajas con una plataforma como WordPress es difícil combinar los archivos de los estilos. Esto porque diferente plugins vienen con sus propios archivos de estilos y también la mayoría de los themes vienen con varios archivos css. En este caso puedes utilizar plugins como Automptimize.

¿Cómo optimizar un archivo css: espacios en blancos y comentarios?

Archivos de css contienen casi siempre muchos espacios en blancos y a veces también comentarios. Como hemos visto Chrome muestra comentarios dentro del css como “contenido innecesario”.

Además, es posible comprimir reglas css. Por ejemplo en vez de escribir “padding-top: 1px; padding.right: 2px; padding-bottom: 3px; padding-left: 4px;” puedes escribir: “padding: 1px 2px 3px 4px;”.

Herramienta para optimizar las reglas del css.

CSS Optimizer: Herramienta para optimizar las reglas del css.

Obviamente sería mejor borrar primero el css innecesario antes de optimizar un archivo css. Especialmente porque después de optimizar un archivo css es más difícil leerlo por la falta de espacios en blanco y saltos de línea.

Algunas herramientas online para optimizar el css:

Si utilizas WordPress puedes instalar distintos plugins para optimizar tus archivos de css. Algunos plugins de Cache ofrecen esta posibilidad, también plugins como Autooptimize.

Inline css crítico

Para que una página web se pueda cargar más rápidamente, Google recomienda poner el css crítico directamente en el head de una página web. Este css en el head se llama css inline.

CSS inline.

Reglas de css en el head de una página web (versión AMP).

Google propone algunas herramientas para poner el css crítico inline en el head de una página: https://developers.google.com/web/tools/lighthouse/audits/unused-css#inlining

En Githup también encuentras una lista de herramientas:
https://github.com/addyosmani/critical-path-css-tools

También existen herramientas online para crear el css crítico:

En el caso de WordPress también existen plugins como Autooptimize que puedes utilizar para poner el css en el head. El problema es que los plugins no saben cuál css es el css crítico. Entonces ponen todo el css en el head.

En el caso de Autooptimize tú puedes poner solo el css crítico directamente en el head. Pero debes saber cuál es.

Resumen

Existen varias formas de optimizar el css de un sitio web. Lo más importante sería disminuir el número de los archivos css, optimizar los archivos css y si es posible borrar las reglas que no necesitas.

Poner las reglas críticas de css en el head de una página web es más difícil. Es porque debes saber cuáles son estas reglas críticas. Existen herramientas que te ayudan con esto. Pero hay que probar si todo funciona bien.