Cómo optimizar el CSS en WordPress para mejorar el WPO y el SEO
Los archivos CSS pueden ser un verdadero quebradero de cabeza si no los optimizas correctamente, afectando negativamente tanto el rendimiento de tu web como su posicionamiento orgánico. Para evitar que esto te ocurra, en esta guía te voy a explicar cómo optimizar el CSS de tu página, qué herramientas puedes utilizar (gratis y de pago) y cómo aplicar las mejores prácticas sin necesidad de ser un experto.
Por qué optimizar el CSS de una web
Optimizar el CSS nos permite mejorar el rendimiento de nuestra página web y la experiencia de usuario, pues reducimos el tiempo de carga y, por ende, su posicionamiento en Google al ser uno de sus factores de posicionamiento.
A continuación, te explico por qué es fundamental optimizar el CSS, abordando varios puntos clave:
- Ahorramos peticiones: al cargar solo los archivos CSS necesarios evitamos hacer llamadas a recursos innecesarios que ralentizan la web.
- Reducimos el peso de la web: al minificar y/o eliminar el CSS no utilizado disminuimos el tamaño de los archivos, mejorando la velocidad de descarga y procesamiento.
- WordPress consumirá menos recursos e irá más rápido: con un CSS optimizado, el servidor y WordPress necesitan procesar menos datos, lo que mejora la rapidez y eficiencia del sitio.
- Evitamos caída del servidor e incluso errores 500: al reducir la carga sobre el servidor, disminuimos el riesgo de errores técnicos y sobrecargas que podrían afectar la disponibilidad del sitio.
Aspectos básicos sobre los archivos CSS
Antes de adentrarnos en este maravilloso mundo llamado WPO (Web Performance Optimization), vamos a ver una serie de aspectos básicos que debes comprender para entender esta guía.
CSS crítico
El CSS crítico se refiere al conjunto mínimo de CSS necesario para renderizar la parte visible de una página web (lo que se ve en la pantalla sin hacer scroll, conocido como "above the fold") lo más rápido posible.
Cuando habilitamos esta función, se crea un archivo con el CSS critico y otro no crítico, del cual aplazamos su entrega para mejorar los tiempos de carga web.
CSS inline
El CSS inline es una forma de aplicar estilos directamente a un elemento HTML usando el atributo style dentro de la etiqueta del elemento. Esto significa que los estilos se escriben directamente en el código HTML en lugar de estar en un archivo CSS externo o en un bloque <style> en el <head> del documento.
<p style="color: red; font-size: 16px;">Este es un párrafo con CSS inline.</p>En mi opinión, todo lo que se puede cargar inline, mejor.
Cómo analizar el CSS
Para poder optimizar los archivos CSS, primero tenemos que identificarlos. Y para ello existen varias herramientas que nos permiten visualizarlo fácilmente. Aquí te dejo 3 herramientas gratis con las que encontrarlos fácilmente.
Ver el código CSS con el inspector
Con el inspector de navegador podemos ver filtrado el CSS perfectamente. Para ello, tienes que activar la inspección (puedes abrirlo haciendo clic en el botón secundario o directamente con la tecla F12) y seleccionando la pestaña de Red o Network. Para que se vea correctamente, te aconsejo seleccionar la opción de Disable caché.
Analizar el código CSS con PageSpeed
A través de la propia herramienta de WPO de Google podemos ver aquellos mensajes problemáticos que nos esté causando el CSS.
De todos ellos, el mensaje más clásico es el de Reduce el CSS que no se use. Y por suerte, su solución es bastante sencilla, pues plugins como perfmatters o WP Rocket nos lo permiten implementar a golpe de clic (lo vemos más adelante).
Ver el CSS con Perfmatters
Una cosa que me encanta de este plugin WordPress es que podemos ir con el bisturí analizando URL por URL los recursos cargadas para optimizarlos según nos interese. Dentro de esta funcionalidad, podemos analizar el CSS tal y como te muestro abajo.
Gracias a esta funcionalidad podemos eliminar la carga de CSS en una URL o grupo de URLs que le hayamos especificado por Regex.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Optimizar la entrega de CSS
Vista ya la "teoría" vamos a empezar a optimizar el CSS, ¿y qué es eso de optimizar?
Optimizar la entrega de los archivos CSS consiste en gestionar cómo y cuándo se carga el CSS para que los elementos esenciales de la página se rendericen rápidamente, sin que el CSS bloquee la visualización del contenido visible.
Las 5 principales acciones para optimizar la entrega de CSS:
- Minificación del CSS: eliminar espacios, comentarios y caracteres innecesarios en los archivos CSS para reducir su tamaño y hacer que se descarguen más rápidamente.
- Combinar archivos CSS: al combinar múltiples archivos CSS en uno solo, reducimos la cantidad de solicitudes HTTP que el navegador necesita hacer. No obstante, como veremos más adelante, esto no lo recomiendo.
- Activar el CSS Crítico: como hemos visto, el CSS crítico es aquel necesario para renderizar la parte visible de la página (above-the-fold). El resto del CSS se puede cargar de manera diferida, es decir, después de que la página ya haya comenzado a mostrarse.
- Carga Asíncrona o Diferida: cargar los archivos CSS no críticos de manera asíncrona o diferida, lo que permite que el navegador continúe cargando otros recursos importantes sin esperar a que el CSS termine de descargarse.
- Eliminación de CSS no utilizado: retirar los estilos que no se utilizan en la página actual para evitar que se carguen y ocupen recursos innecesarios.
Vamos a ver cada uno de estos puntos en más detalle para comprender cuando sí y cuando no deberíamos aplicarlos.
Minificar CSS
Minificar archivos CSS consiste en eliminar todos los elementos innecesarios en el código, como espacios en blanco, saltos de línea, comentarios y caracteres redundantes. El objetivo es reducir el tamaño del archivo para que se cargue más rápido en el navegador.
La idea es la misma que aplicamos cuando optimizamos el JavaScript.
Ejemplo de CSS sin optimizar:
body {
margin:0;
padding:0
}Código CSS minificado:
body{margin:0;padding:0}
Cuando minificamos un archivo CSS, lo hacemos más compacto y optimizado, lo que tiene un impacto directo en el rendimiento de tu web. A menor tamaño de archivo, menos tiempo tarda el navegador en descargar y procesar el CSS, lo que mejora la velocidad de carga. Esto es especialmente útil si tu página contiene mucho CSS, ya que la diferencia en los tiempos de carga puede ser significativa.
Cómo ver los archivos minificados
Con la herramienta del inspector que antes te he comentado, podemos comprobar si tus archivos ya han sido minificados. Esto lo confirmarás al ver que los archivos tienen la extensión .min.css.
Combinar CSS
Combinar el CSS es peligroso ya que puedes crear un archivo muy grande que nos cargue código que no usemos. Esto tenía su sentido antes de usar la tecnología HTTP/2, para evitar hacer muchas llamadas, pero ahora, gracias a este nuevo sistema con el que cargan las webs, descargamos múltiples archivos simultáneamente a través de una sola conexión, por lo que ya no es necesario.
Eliminar el CSS sin usar
En lugar de combinar o minificar los archivos de estilos, te aconsejo simplemente eliminar aquellos que no se usan. De esta forma, evitamos cargar estilos que no son necesarios, reducimos el tamaño de los archivos a descargar y tardamos menos en la carga de la web.
Como hemos visto anteriormente, al seleccionar la opción de eliminar el CSS sin usar, se crea un archivo con la parte crítica y otro que se cargará posteriormente o no se cargará, en caso de no ser necesario.
Mejores plugins para CSS
Aunque existen muchos plugins para optimizar el CSS, aquí te dejo los 3 que yo uso, con sus puntos fuertes y flojos.
- Perfmatters: Es una herramienta de pago que permite eliminar el CSS sin usar sin necesidad de conectarse a servicios externos, lo que simplifica el proceso y no genera costes adicionales.
- WP Rocket: También es de pago y para eliminar el CSS sin usar, se conecta a servicios externos. Esto requiere que el cron nativo del hosting esté activo y que la página no tarde más de 15 segundos en cargar. Si usas esta opción, ten presente que los cortafuegos de algunos plugins o del propio hosting podrían interferir en este proceso.
- LiteSpeed: Esta opción es gratuita y elimina el CSS sin usar conectándose con servicios externos mediante una API. Al igual que con WP Rocket, es necesario tener cuidado con los cortafuegos del hosting y de los plugins para evitar bloqueos.
De los 3, yo actualmente uso principalmente Permatters y WP Rocket, por lo que a continuación te explico cómo los configuro.
Optimizar CSS con Perfmatters
Desde Perfmatters > Assets > CSS, podemos eliminar el CSS sin usar y aplazar la entrega del no crítico con la opción Delay (o incluso eliminarlo con la opción de Remove si da problemas). Así mismo, aplico el CSS inline, tal y como comenté al principio.
En el caso de que esta funcionalidad nos de problema o se rompa, tenemos la opción de excluir ciertos archivos en la sección de Excluded Sytlesheets o Exclude Selectors. Para ello, tenemos que inspeccionar el elemento conflictivo, sacar la clase css e incluirla en la sección indicada.
Desde Exclude Selectors podemos indicar las clases o IDs a excluir, así como indicar en Excluded Sytlesheets la ruta del archivo css directamente.
Optimizar CSS con WP Rocket
Al igual que con Perfmatters, también podemos optimizar la entrega del CSS con WP Rocket. Para ello, debemos seleccionar la opción de Optimizar la entrega del CSS y seleccionar la opción de Remove Unused CSS, para que no se cargue, o seleccionar la opción de Load CSS Asynchronously, para que su carga sea asíncrina.
Optimizar CSS con Elementor
Para terminar y en caso de que uses Elementor, te comento que en su configuración existe una opción que es cargar CSS mejorado que solo carga lo necesario. En lugar de cargar todo el CSS de Elementor en cada página, esta opción mejora el proceso al cargar solo los estilos necesarios para los elementos que se están utilizando en una página específica.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!