Soluciona 'Remove Unused CSS' en Lighthouse

Última revisión por Arjen Karel en febrero de 2026

¿Qué es el CSS no utilizado?

El CSS no utilizado consiste en declaraciones CSS que no se utilizan en ninguna parte de una página web. Es bastante normal que parte del CSS no se utilice. Por ejemplo, porque algunas declaraciones CSS están escritas para otro dispositivo, como escritorio o móvil. A veces porque un elemento que se describe en la hoja de estilos (como un botón) no se utiliza en esta página en específico. El CSS no utilizado ocurre a menudo cuando usas un framework como Bootstrap, donde hay muchos más elementos descritos por defecto en el CSS de los que jamás usarás. O cuando has rediseñado tu página pero te olvidaste de eliminar los elementos CSS antiguos.

¿Por qué el CSS no utilizado es malo para la velocidad de la página?

El CSS ralentiza la carga de la página. Cuando se carga una página, el navegador primero obtiene el HTML de esta página. Este HTML se convierte en Nodos DOM. Después de eso, el navegador obtiene todas las hojas de estilo. Los estilos encontrados en estos archivos CSS también se convierten a otro formato, a saber, el CSSOM. El DOM y el CSSOM se combinan en un árbol de renderizado (render tree). Solo cuando se ha construido este árbol de renderizado, un navegador comienza a pintar el primer contenido.

Debido a este mecanismo, los archivos CSS siempre bloquearán el renderizado de tu página web. Cuando un archivo CSS es más grande de lo que debería ser, se tarda más en descargar este archivo y eso causa el primer retraso. Cuando un archivo CSS contiene CSS no utilizado, se tarda más en construir el árbol de renderizado.

La página mediana envía 79 KB de CSS en dispositivos móviles, pero según el Web Almanac 2024, 52 KB de eso no se utilizan en la página actual. Eso es un 66% de CSS desperdiciado. En el percentil 90, el CSS no utilizado alcanza los 212 KB. Y el 85% de todas las páginas fallan en la auditoría de recursos que bloquean el renderizado (render-blocking resources), siendo el CSS la causa principal.

El CSS no utilizado retrasa directamente el First Contentful Paint (FCP) y el Largest Contentful Paint (LCP) porque el navegador no pintará ningún píxel hasta que se descargue y analice todo el CSS. En páginas con mucho CSS, también afecta al INP porque las hojas de estilo más grandes aumentan el costo de los recálculos de estilo durante las interacciones del usuario.

Cómo encontrar CSS no utilizado manualmente

En Google Chrome puedes ver el CSS no utilizado en la vista general de Code Coverage. Code Coverage es parte de Chrome DevTools. DevTools es una serie de herramientas integradas que están disponibles en todos los navegadores Chrome.

Primero abre DevTools con el atajo Ctrl-Shift-J. Luego escribe Ctrl-Shift-P para abrir la Paleta de Comandos. Ahora escribe 'coverage'. Selecciona coverage y recarga la página. Ahora verás una vista general de los archivos CSS y JavaScript que son cargados y utilizados por la página. Además, puedes ver qué tan grandes son los archivos y cuánto del código se está utilizando realmente. Haz clic en un archivo CSS para ver qué reglas CSS se utilizan (verde) y qué reglas CSS no se utilizan (rojo) en la página actual.

Cómo resolver la advertencia 'remove unused CSS'

Hay varias formas de resolver el mensaje 'remove unused CSS' en Lighthouse. Si, por alguna razón, no es posible solucionar la advertencia, podrías optimizar la entrega de CSS para asegurar que el CSS no utilizado tenga menos impacto en el tiempo de carga de tu página. A continuación, discutiré brevemente las opciones que tienes para solucionar el CSS no utilizado.

1. Eliminar el CSS no utilizado manualmente

La forma más lógica y mejor, pero también la más laboriosa, es, por supuesto, eliminar manualmente el CSS no utilizado. Los pasos son simples:

1. Haz una copia de seguridad de tus archivos CSS originales. Podrías eliminar demasiado CSS.
2. Abre la pestaña Code Coverage en Google Chrome y revisa por cada archivo CSS qué declaraciones no necesitas.
3. Abre el archivo CSS en el servidor (o localmente) y comprueba cada declaración CSS no utilizada. Determina si se puede eliminar. Pero ten cuidado: una declaración CSS no utilizada en una página podría ser necesaria en otra. ¡Tienes que juzgarlo tú mismo!
4. Comprueba en cada declaración CSS si no está duplicada en el CSS. El CSS duplicado también se marcará como no utilizado.
5. Comprueba cada regla CSS en busca de métodos abreviados (shorthand). ¿Es posible acortar el CSS? ¡Entonces acórtalo!

2. Dividir el CSS en varios archivos

¡Hay una forma sencilla de reducir rápidamente el número de reglas CSS! Solo carga los estilos que necesitas para tu dispositivo. Tu página es visitada a menudo en dispositivos móviles. En realidad, no necesitas descargar los estilos de desktop (escritorio) e print (impresión) para este dispositivo móvil. No descargar estos estilos ahorra tiempo y, por lo tanto, acorta la cadena de solicitudes críticas en Lighthouse.

Para lograr esto, utiliza el atributo media. El atributo media asegura que una hoja de estilos solo se utilice si el atributo media coincide con el medio que estás utilizando actualmente.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

También puedes usar el truco del atributo media para cargar CSS no crítico sin bloquear el renderizado:

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Esto carga el CSS sin bloquear el renderizado al marcarlo como media="print", y luego cambia a media="all" una vez cargado.

3. Utilizar una herramienta de limpieza automática de CSS

Hay una serie de herramientas inteligentes que pueden limpiar automáticamente tus archivos CSS y eliminar cualquier referencia CSS no utilizada. Aunque las herramientas funcionan sorprendentemente bien, no son impecables. A veces estas herramientas eliminan demasiadas declaraciones CSS. Así que úsalas con cuidado y siempre comprueba tu CSS tú mismo. La mejor herramienta de limpieza de CSS es PurgeCSS. PurgeCSS se ejecuta en Node.js y se integra con Webpack, PostCSS y Vite. Utiliza extractores de contenido para escanear tus archivos HTML, JavaScript y plantillas en busca de nombres de clases, y luego elimina cualquier selector CSS que no se encuentre. También puedes probar PurifyCSS online para un análisis rápido.

4. Critical CSS

El Critical CSS es una colección de reglas CSS que se necesitan en el viewport (la parte visible) de tu sitio web. En otras palabras: el Critical CSS es el CSS que se requiere para renderizar la parte visible de tu página.

Hay una serie de herramientas que pueden extraer el Critical CSS de tu página. El Critical CSS se coloca luego en línea (inline), en el head de tu página, mientras que el archivo CSS original se carga de forma asíncrona (para que el navegador lo utilice más tarde).

Esto no resuelve completamente el problema del CSS no utilizado. Eventualmente, el CSS no utilizado se cargará y analizará, pero tu navegador no se verá afectado por él durante la primera fase de renderizado.

La herramienta más utilizada para encontrar y extraer Critical CSS es el script de Node.js Critical. También hay herramientas online como Critical Path CSS Generator.

5. Minificar los archivos CSS

El CSS no utilizado ralentiza una página, como leíste antes, de 2 maneras. La primera es porque los archivos CSS son más grandes y, por lo tanto, tardan más tiempo en descargarse.

Podemos contrarrestar ese problema reduciendo el tamaño del archivo CSS al minificar los archivos CSS. Eso se hace a través de un minificador CSS. Un minificador CSS reduce los archivos CSS eliminando espacios, comentarios y formato. Además, un minificador CSS puede reescribir variables y código CSS para que ocupe menos bytes al transferirse.

Una herramienta de minificación de CSS muy conocida es css-minify. Minifica todos tus archivos CSS a través de la línea de comandos con el comando css-minify -f filename. También hay varios minificadores de CSS online como cssminifier.com.

6. Recompilar tu framework CSS

¿Estás utilizando un framework CSS como Bootstrap CSS? Ese es un framework CSS con el que puedes estilizar todo tu sitio. Este framework es tan completo que lo más probable es que nunca uses gran parte de él.

Afortunadamente, los creadores de Bootstrap y otros frameworks CSS han tenido esto en cuenta. Este framework está escrito en SASS. Ese es un lenguaje que es muy similar al CSS. Consiste en varios archivos SASS pequeños que pueden usar variables y funciones simples. Esto hace que sea fácil ajustar y personalizar el framework tú mismo con un poco de conocimiento. Puedes simplemente omitir las partes que no usas y compilarlo fácilmente en 1 archivo CSS final.

También asegúrate de no cargar un framework CSS sin modificar desde el CDN estándar. Descarga el framework y compílalo con SASS exactamente como lo deseas, solo con las clases CSS que usas.

7. Considerar una estrategia CSS diferente

¿Realmente quieres ser rápido? Entonces podría ser una idea repensar tu estrategia CSS. Cómo se hace eso depende de tu sitio. Hay varios caminos que llevan a Roma.

Tomemos nuestro sitio como ejemplo. Solo cargamos el CSS que realmente necesitamos por página. Las clases CSS son importadas automáticamente por nuestro CMS solo cuando son necesarias. Colocamos el CSS en línea (en el head de la página). Eso nos ahorra una solicitud de red adicional. Esta solución es increíblemente rápida y fácil de mantener.

Un lector atento podría pensar: "¿Qué pasa con el almacenamiento en caché del CSS? El CSS es más rápido cuando los archivos CSS finales están almacenados en caché". Sí, es cierto. Es por eso que utilizamos Speculation Rules para precargar las páginas en el viewport visible de modo que una página siempre se recupere de la caché, incluido el CSS.

Solucionar 'remove unused CSS' en WordPress

¿Estás listo para eliminar el CSS no utilizado? Así es como puedes empezar en WordPress. En WordPress el CSS se puede agregar de 3 maneras:

• Directamente en la plantilla. En la carpeta de tu plantilla hay un archivo llamado header.php. En este archivo a menudo hay archivos CSS específicos de la plantilla. Podrías modificar estos archivos CSS como describí anteriormente. No olvides hacer una copia de seguridad de tus archivos CSS originales y ten en cuenta que una actualización del tema puede sobrescribir tus archivos CSS.
• CSS agregado por un plugin. Los plugins en WordPress pueden agregar archivos CSS ilimitados en tu HTML. Estos plugins utilizan las funciones wp_register_style y wp_enqueue_style. La mayoría de los plugins no se molestan en comprobar si están activos en la página actual. Simplemente inyectan CSS en cada página, a pesar de que no hay necesidad de ese CSS específico del plugin en esa página. Me encuentro con eso todos los días. Si ese es el caso, puedes usar las funciones wp_dequeue_style y wp_deregister_style para eliminar estos estilos de las páginas. Ese es un trabajo de precisión. Si no estás seguro de cómo solucionar esto, acude a tu desarrollador o pídeme ayuda. También puedes utilizar el plugin Asset CleanUp con el que puedes establecer por tipo de página qué plugins, estilos y scripts pueden ser cargados.
• CSS agregado por JavaScript. También es posible inyectar hojas de estilo en la página usando JavaScript. Al igual que las hojas de estilo, puedes desactivar estos scripts por página con la función wp_dequeue_script. Cuando el JavaScript no se carga, la hoja de estilo tampoco se inyectará. Si necesitas el script y la hoja de estilo pero no directamente después de la carga, es posible posponer la carga del JavaScript a través del atributo defer del script. Hazlo agregando este código en functions.php:

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

Después de reducir tu CSS no utilizado, verifica la mejora con Real User Monitoring. En nuestros datos de CoreDash, los sitios que colocan el critical CSS en línea y difieren el resto ven una mejora media en FCP de 320ms.