Optimizar archivos CSS

Los archivos CSS de una web se encargan de la parte estética, definen el color, el tamaño de las tipografías, el ancho de la página, etc.

Estos archivos no suelen pesar demasiado, pero el problema es que una web estándar no solo se carga 1 archivo CSS sino entre unos 30 a 70 archivos CSS y estos pueden llegar a pesar en total de 100 a 400 KB.

Cada plugin que tienes instalado agrega sus propios archivos CSS, los plugins más modesto solo cargarán 1 o 2 archivos, pero los plugins grandes cargarán un número mayor. Y además de los plugins hay que sumar el CSS del tema.

Sin una correcta optimización de los archivos CSS la carga de la web se ralentizará por cada archivo que extra que tenga que cargar, ya que es una «pausa» que el navegador debe hacer para pedirle el archivo al servidor:

optimizar archivos CSS con WP Rocket

En esta lección de WP Rocket te explico paso a paso cómo optimizarlos correctamente para pasar de cargar CSS como en la imagen anterior a cargar 0 archivos CSS.

Sí, sí. 0 archivos CSS y si no me crees te muestro el ejemplo de mi propia web analizada con la misma herramienta online GTMetrix:

optimizar archivos CSS con WP Rocket

Cómo optimizar archivos CSS con WP Rocket

Lo primero será dirigirnos a WP Rocket > Optimizar archivos y veremos que tenemos 3 opciones:

  • Minificar archivos CSS
  • Combinar archivos CSS
  • Optimizar la entrega del CSS

Vamos a ver qué hace cada una de estas opciones y cuáles debemos activar, ya que no es tan simple como activarlas todas y darle a guardar.

Este contenido es visible solo para alumnos del curso de Optimización WordPress de Anaislab.

Para ver el contenido del curso, trucos y snippets para mejorar la velocidad de tu WordPress  o únete

Una vez hayamos terminado de configurar el apartado de optimización de archivos CSS guardaremos los cambios y borraremos la caché.
Después comprobamos en una pestaña de incógnito que todo funciona correctamente.

Si por algún motivo tienes algún error con remove unused CSS o no se aplica correctamente revisa y aplica las siguientes recomendaciones:

  • Revisa que la web tiene acceso público.
    No funcionará en webs en mantenimiento, bloqueadas mediante htaccess y similares
  • Revisa que la siguiente IP está permitida en la lista de servidor, firewall o complemento de seguridad 135.125.83.227
  • Revisa que el Cron esté activo y pueda ejecutarse
    Si no sabes qué es el Cron o como optimizarlo te enseño cómo
  • Si estás usando Wordfence sigue las siguientes instrucciones