Reduce el contenido CSS que no se use en WordPress

Si alguna vez has hecho una prueba de rendimiento de tu web utilizando herramientas como Google PageSpeed Insights o GTmetrix, es posible que hayas visto una advertencia que dice «Reduce el contenido CSS que no se use».

Este aviso puede ser confuso, especialmente si no estás familiarizado con cómo funciona el CSS o por qué afecta al rendimiento de tu sitio. En esta entrada del blog, te explicaré qué es el CSS sin usar, qué significa la advertencia y cómo puedes solucionarlo para mejorar la velocidad y eficiencia de tu sitio WordPress.

¿Qué es el «CSS no utilizado»?

CSS (Hojas de Estilo en Cascada o «Cascading Style Sheets» en inglés) es el código utilizado para dar estilo a tu sitio web. Controla todo, desde las fuentes y colores hasta los diseños y animaciones. Sin embargo, no todo el CSS que se carga en tu web se utiliza realmente en cada página. El CSS sin usar se refiere a las partes de tu código CSS que se cargan pero nunca se aplican a los elementos de una página específica.

Veamos un ejemplo muy simple y cómo reacciona PageSpeed Insights. Creamos una página básica con elementos <h1> y <p>, y le damos estilo con este código CSS:

h1 {
    color: white;
    background-color: blue;
}

Al chequear la página, el aviso no aparece porque todo el CSS está siendo usado.

Sin embargo, vamos a añadir al menos 10 KB de CSS sin usar, ya que ese es el mínimo que necesitamos para que PageSpeed Insights empiece a quejarse.

h1 {
    color: white;
    background-color: blue;
}
.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
...

Dado que no hay ningún elemento container ni otros estilos del CSS adicional aplicados a la página, ahora sí que aparece la advertencia.

Con el tiempo, a medida que la web crece y los plugins o temas añaden más y más CSS, la cantidad de CSS sin usar se acumula y ralentiza tu sitio.

¿Por qué el CSS sin usar es malo para el rendimiento?

Cuando tu web carga más CSS del necesario, puede afectar al rendimiento de dos maneras principales:

Aumento del tiempo de carga: El CSS no usado añade bytes extra a la página, lo que incrementa el tiempo que el navegador necesita para descargar y procesar los archivos.
Recursos que bloquean el renderizado: El CSS es un recurso que bloquea el renderizado, lo que significa que el navegador debe descargarlo y procesarlo antes de mostrar la página al usuario. Para construir el árbol de renderizado (similar al árbol DOM pero con estilos incluidos), el navegador analiza todo el DOM para determinar qué reglas CSS se aplican a cada elemento. Cuanto más CSS sin usar haya, más tiempo desperdiciará el navegador comprobando reglas innecesarias.

¿Por qué mi web WordPress tiene CSS que no se usa?

Vale, ahora entendemos qué es el CSS no utilizado y por qué es malo para el rendimiento. Pero, ¿por qué pasa esto en WordPress? Principalmente porque muchos temas y plugins cargan sus estilos de manera global, incluso cuando no son necesarios en una página específica. Las principales razones son:

Temas: Muchos temas incluyen un único archivo CSS grande que contiene el estilo de todos los elementos posibles, aunque no se usen en todas las páginas.
Plugins: Los plugins suelen cargar sus estilos en todo el sitio también, aunque solo sean necesarios en páginas específicas (por ejemplo, Contact Form 7 carga su CSS en todas las páginas, aunque solo haya un formulario en una de ellas).
WordPress: El propio WordPress carga estilos del editor de bloques (Gutenberg) aunque no uses ciertos bloques.
Bibliotecas de terceros: Si tu tema o plugins usan frameworks como Bootstrap o FontAwesome, estos cargan todos sus estilos, aunque solo se utilice una pequeña parte.
Maquetadores de páginas: Plugins como Elementor o WPBakery suelen cargar CSS de manera global para todos los elementos posibles, lo que genera estilos sin usar.

Entonces, ¿por qué lo hacen así los programadores? ¿Por qué no cargar solo el CSS necesario en cada página como dios manda? La respuesta depende de a quien le preguntes, pero se reduce a complejidad, compatibilidad y facilidad de implementación.

Cargar un solo archivo CSS en todo el sitio es más fácil de gestionar que encolar estilos dinámicamente según el contenido de cada página. Esto reduce el riesgo de que falten estilos y se rompan los diseños.
Si bien el CSS no utilizado aumenta el peso de la página, múltiples archivos CSS pueden aumentar las solicitudes HTTP, lo que puede empeorar el rendimiento. Muchos desarrolladores prefieren cargar un solo archivo más grande y dejar que la caché y las CDNs optimicen la eficiencia.
Los plugins a menudo no saben de antemano dónde se usarán sus funciones. En lugar de implementar una lógica compleja para detectar su uso, simplemente encolan el CSS en todas partes para evitar que falten estilos.
Los temas y, especialmente, los maquetadores de páginas necesitan flexibilidad. Dado que los usuarios pueden añadir elementos en cualquier lugar, los desarrolladores incluyen estilos globales para asegurarse de que todo funcione sin configuraciones adicionales. Esta es una de las razones por las que los maquetadores ralentizan tu sitio.
Y, en algunos casos, hay quien simplemente no le importa o no sabe que el CSS sin usar afecta al rendimiento.

Cómo reducir el contenido CSS que no se use en WordPress

El proceso para eliminar el contenido CSS que no se use es, afortunadamente, más fácil que en otras plataformas. Esa es la ventaja de la popularidad 🙂

Reemplazar plugins o temas

La forma más sencilla de eliminar el contenido CSS no utilizado en WordPress es simplemente deshacerse de los componentes que lo generan. La mayoría de las veces no podrás eliminarlos, pero siempre vale la pena buscar alternativas de plugins y temas con mejor rendimiento. Por ejemplo, mira este caso:

3 de las 4 causas del problema están relacionadas con el tema Enfold, que es conocido por ser extremadamente pesado. ¿La solución? Reemplazarlo con un mejor tema. En este caso en particular, el cuarto archivo es block-library/style.css, que pertenece a WordPress y no hay mucho que puedas hacer al respecto, a menos que decidas no usar Gutenberg. Si es así, puedes desactivar Gutenberg completamente.

Si quieres ver una lista de todos tus archivos CSS y descubrir cuáles contienen más CSS sin usar, puedes simplemente abrir las herramientas para desarrolladores de tu navegador. Abre la pestaña «Coverage» y escribe ‘css’ en el filtro, como se muestra en esta imagen:

No uses maquetadores de páginas

Sabemos que los maquetadores de páginas son malos para el rendimiento, da igual cuántas opciones de caché y optimización incluyan (no necesitarían esas opciones si funcionaran bien desde el principio…). Eso incluye Elementor, Divi, WPBakery, Beaver Builder y otros. Una de las principales razones es que los maquetadores visuales suelen incluir grandes bibliotecas CSS que incluyan una amplia variedad de elementos de diseño y funcionalidades. Este enfoque asegura que los usuarios tengan acceso a muchas opciones de estilo sin necesidad de programar algo personalizado. Sin embargo, también significa que muchas reglas CSS permanecen sin usarse en páginas específicas, lo que lleva a grandes hojas de estilo y al famoso mensaje «Reduce el CSS no utilizado».

Aquí tienes una guía muy útil sobre cómo reemplazar tu maquetador de páginas, pero si no puedes hacerlo, puedes intentar jugar con sus ajustes de «CSS dinámico», «Optimización de CSS» o similar, para asegurarte de que solo se carguen los estilos necesarios en la portada (o al menos eso es lo que afirman…). Por ejemplo, Divi tiene una opción llamada «CSS Dinámico»:

Desactivar CSS o incluso plugins enteros donde no se usen

En un mundo ideal, los plugins cargarían sus archivos CSS solo en las páginas donde deben estar activos. Sin embargo, a menudo encontramos plugins que, ya sea por pereza, conveniencia o simplemente mala programación, cargan todos sus recursos en cada página.

Por ejemplo, WooCommerce carga archivos CSS y JS en cada página, incluso si WooCommerce no está involucrado en absoluto, probablemente por conveniencia, ya que es un plugin enorme que necesita acomodar las necesidades de muchos clientes y casos. Otro ejemplo bien conocido es Contact Form 7: incluso en páginas sin ningún formulario, el plugin se ejecuta en segundo plano y algunos archivos CSS se cargan.

Para solucionar esto, recomiendo usar el Script Manager de Perfmatters. Es una herramienta extremadamente útil que te permite controlar exactamente qué archivos CSS y JS se cargan en cada página. Además, incluye una función especial llamada MU Mode, que te permite desactivar completamente plugins enteros en páginas específicas, como si no existieran.

Te recomiendo que consultes la documentación oficial sobre cómo usar el Script Manager para aprender cómo usuarlo.

Reemplazar el iFrame de YouTube con una miniatura de vista previa

¿Tienes un video de YouTube? No copies y pegues simplemente la URL de YouTube en tu editor y dejes que todo el reproductor de YouTube se cargue justo después de que la página se cargue. Si lo haces, sucederá esto:

La solución es reemplazar el iFrame con una miniatura estática de vista previa y cargar el reproductor solo después de que el usuario haga clic en él. Perfmatters, FlyingPress y WP Rocket te permiten hacer esto en un solo clic. Por ejemplo, en Perfmatters, solo necesitas:

Ir a Ajustes > Perfmatters > Lazy Loading
Activar la opción iFrames and Videos
Activar también la opción YouTube Preview Thumbnails.

Pero si necesitas o quieres una opción gratis, echa un vistazo a WP YouTube Lyte del increíble Frank Goossens.

Plugins de caché u optimización

Todos mis plugins favoritos de caché/optimización, con la excepción de Autoptimize, incluyen una función para reducir el CSS que no se usa: WP Rocket, LiteSpeed Cache, FlyingPress y Perfmatters.

Ten en cuenta que, aunque reducir el CSS que no se usa es algo que le va muy bien a la web, debes hacerlo con cuidado. Las herramientas automatizadas suelen eliminar estilos que son utilizados por JavaScript o elementos dinámicos de la web, como menús que aparecen al pasar el cursor o mensajes de error en formularios, lo que a su vez provoca fallos en el diseño o la funcionalidad. Para evitar esto, haz muchas pruebas y chequea bien la web después de eliminar el CSS no utilizado.

WP Rocket

Antes de nada, WP Rocket no es un plugin gratuito, así que tenlo en cuenta.

En WP Rocket, lo único que tienes que hacer es ir a Ajustes > WP Rocket > Optimizar archivos y activar la opción Optimizar la entrega del CSS. Una vez activada, aparecerán ajustes adicionales, donde solo necesitas seleccionar la opción Remove Unused CSS.

Con esto debería ser suficiente. Ahora tendrás que esperar unos minutos porque WP Rocket tratará de visitar la versión no almacenada en caché de tus páginas para escanear el CSS, cuando sea que sus servidores decidan hacerlo. Puedes seguir revisando el código fuente de tus páginas y, en algún momento, deberías ver la etiqueta <style id="wpr-usedcss">, lo que significa que el CSS sin usar ha sido eliminado.

Si notas que faltan algunos estilos o que algo se ve mal, es posible que debas añadir nombres de archivos CSS, ID o clases que no deben eliminarse en el cuadro de CSS safelist.

Para leer más sobre cómo solucionar problemas con la eliminación de CSS no utilizado, te recomiendo consultar la documentación oficial: Troubleshoot Used CSS generation issues

LiteSpeed Cache

En LiteSpeed Cache, la opción que necesitas buscar se llama Generar UCSS y se encuentra en LiteSpeed Cache > Optimización de página > Ajustes de CSS.

Desafortunadamente, tiene dos inconvenientes:

Para usar la opción de Generar UCSS, debes tener una suscripción activa en QUIC.cloud, el servicio de CDN de LiteSpeed, que también ofrece funciones de optimización como la eliminación de CSS que no se usa. El problema es que el plan gratuito tiene un número limitado de solicitudes de optimización, por lo que es posible que necesites actualizar a un plan de pago.
La opción de Generar UCSS requiere activar también Combinar CSS, lo cual puede ser contraproducente en cuanto a rendimiento. Hoy en día, la mayoría de los sitios usan HTTP/2 o HTTP/3, que permiten cargar varios archivos pequeños en paralelo, haciendo innecesaria la combinación de archivos. Además, mantener los archivos separados permite almacenarlos en la caché del navegador, de modo que una actualización de un archivo no invalide todo el CSS combinado.

Debido a estos inconvenientes, no recomiendo usar LiteSpeed Cache para reducir el contenido CSS que no se use. Sin embargo, si aún así quieres utilizar la opción, puedes activarla y esperar unos minutos para que QUIC.cloud procese la página y LiteSpeed Cache inyecte el CSS utilizado.

Puedes identificar el CSS utilizado en el código fuente buscando la etiqueta <style id="litespeed-ucss">.

Si algunos estilos desaparecen o la página se ve mal, puedes ajustar la configuración:

Añadiendo archivos CSS en la caja «Excluir archivo del CSS sin uso e incrustar».
Añadiendo ID o clases en la caja «Lista blanca del selector de CSS sin uso».

Estas opciones se encuentran en LiteSpeed Cache > Optimización de página > Retoques – CSS.

Para más detalles sobre problemas con «Generar UCSS», consulta la documentación oficial: CSS/JS Issues

FlyingPress

Para reducir el CSS que no se usa con FlyingPress, instálalo en tu WordPress, ve al menú de FlyingPress, entra en la sección CSS y activa la opción «Remove Unused CSS». ¡Así de fácil!

Quizá te preguntes qué opción elegir en «Load Unused CSS» cuando tal opción aparezca. Primero, es importante entender cómo funciona el plugin: en la primera carga de la página después de vaciar la caché, FlyingPress procesa la página antes de entregarla al navegador. Recolecta todo el CSS utilizado y lo inyecta en línea en el código fuente con la etiqueta <style class='flying-press-used-css'>. A diferencia de WP Rocket o LiteSpeed Cache, FlyingPress te da control sobre qué sucede con el CSS no utilizado que extrae. Tienes tres opciones:

Asynchronously – Carga el CSS sin usar en segundo plano sin bloquear la renderización de la página. Es similar a diferir o aplicar async al JavaScript (aunque estas técnicas son diferentes, el objetivo es el mismo: prevenir el bloqueo del renderizado). Mientras que la opción acelera los tiempos de carga, tiene dos inconvenientes:
- Se sigue descargando la misma cantidad de CSS, solo que en segundo plano.
- Puede aumentar el CLS (Cumulative Layout Shift) debido a los ajustes en los estilos que el navegador haga cuando el resto del CSS se cargue más tarde.
On user interaction – Esta opción va un paso más allá cargando el CSS sin usar solo cuando el usuario interactúe con la página (clic, toque, movimiento del ratón). Sin embargo, tiene los mismos inconvenientes que la opción Asynchronously: el CSS completo se sigue cargando y pueden ocurrir problemas de CLS.
Remove – Esta es la opción más agresiva. FlyingPress te avisa de que no la uses si encuentras problemas, pero es la recomendada para el mejor rendimiento, ya que solo se carga el CSS realmente utilizado. Sin embargo, en la mayoría de los casos, necesitarás ajustar la configuración con las opciones Exclude Stylesheets o Include Selectors para evitar la eliminación de CSS importante.

Para más detalles sobre cómo solucionar problemas con la opción Remove Unused CSS en FlyingPress, consulta la documentación oficial: Remove Unused CSS.

Además, mencionar que FlyingPress tampoco es un plugin gratuito.

Perfmatters

El proceso en Perfmatters es similar al de FlyingPress. Tras instalar el plugin, ve a Ajustes > Perfmatters > CSS y activa la opción «Remove Unused CSS».

La forma en que Perfmatters genera el CSS utilizado es similar a FlyingPress: en la primera carga de la página después de vaciar la caché, Perfmatters procesa la página antes de entregarla al navegador. Recolecta todo el CSS utilizado y lo inyecta en línea en el código fuente usando la etiqueta <style id="perfmatters-used-css">.

Perfmatters también permite almacenar el CSS utilizado en un archivo externo en lugar de incrustarlo en el HTML. Esto se controla con el ajuste «Used CSS Method«, lo cual recomendamos porque mientras incrustar el CSS puede mejorar los resultados de PageSpeed Insights, puede jugar en nuestra contra por dos razones:

Aumenta el tamaño del HTML (a veces sin notarse, pero a veces más de lo que uno querría).
No se puede cachear en el navegador del usuario como un archivo .css normal.

Al usar un archivo externo, los visitantes que vuelven podrán cargar el CSS cacheado en vez de descargarlo de nuevo desde el servidor, lo que mejorará los tiempos de carga y las Core Web Vitals.

Respecto a la opción «Stylesheet Behaviour», Perfmatters ofrece tres modos para gestionar el CSS no utilizado, que son equivalentes a los que tiene FlyingPress:

Delay – Carga el CSS sin usar solo cuando el usuario interactúa con la página (p. ej. un toque, movimiento del ratón o presionar una tecla). Mientras que la opción acelera los tiempos de carga, tiene dos inconvenientes:
- Se sigue descargando la misma cantidad de CSS, solo que con retraso.
- Puede aumentar el CLS (Cumulative Layout Shift) debido a los ajustes en los estilos que el navegador haga cuando el resto del CSS se cargue más tarde.
Async – Carga el CSS sin utilizar en segundo plano sin bloquear el renderizado. Se parece a retrasar o aplicar carga async al JavaScript (aunque estas técnicas son diferentes, el objetivo es el mismo: prevenir el bloqueo del renderizado). Los mismos problemas que con «Delay» puede aparecer: el CSS completo se sigue cargando y pueden ocurrir problemas de CLS.
Remove – Esta es la opción más agresiva. FlyingPress te avisa de que no la uses si encuentras problemas, pero es la recomendada para el mejor rendimiento, ya que solo se carga el CSS realmente utilizado. Sin embargo, en la mayoría de los casos, necesitarás ajustar la configuración con las opciones «Exclude Stylesheets» o «Excluded Selectors» para evitar la eliminación de CSS importante.

Para más información sobre cómo solucionar problemas con «Remove Unused CSS» en Perfmatters, consulta la documentación oficial: Troubleshooting unused CSS.

Por último, mencionar también que Perfmatters tampoco es un plugin gratuito.

Implementación manual

Si prefieres tener más el control de la situación, puedes reducir el contenido CSS que no se use manualmente. Herramientas como PurgeCSS, UnCSS o UnusedCSS pueden analizar tus archivos HTML y eliminar las reglas CSS que no se utilizan en tus páginas. Sin embargo, este método requiere un conocimiento más profundo de CSS y de la estructura de tu sitio.

Aquí tienes un ejemplo básico de cómo podrías usar UnCSS para eliminar el contenido CSS que no se use en la página de inicio de tu WordPress:

Abre las herramientas para desarrolladores en tu navegador y ve a la pestaña «Elements«. Copia el DOM (la estructura HTML renderizada que ves en la pestaña Elements). ¿Por qué no usar el código fuente que ves al pulsar Ctrl+U? Porque el DOM refleja el HTML después de las modificaciones de JavaScript, incluyendo elementos, clases o IDs añadidos dinámicamente y que podrían estar en uso. Si usas el código fuente, podrías eliminar accidentalmente CSS necesario.
Pega el DOM copiado en la caja «Your HTML» de la herramienta UnCSS.
Copia todo tu CSS (tanto estilos en línea como archivos .css cargados) y pégalo en la caja «Your CSS».
Haz clic en «UNCSS MY STYLES» para procesar el CSS.
Añade el CSS utilizado solo en tu página de inicio.
Elimina todos los archivos .css y estilos en línea de la página previamente cargados.

Como puedes ver, esta opción requiere mucho tiempos y es arriesgada, ya que podrías eliminar estilos esenciales del contenido dinámico. Por eso, siempre es preferible optar por una solución más automática con alguno de los plugins recomendados.