Cobertura CSS y estilos no utilizados

Los archivos CSS grandes suelen contener estilos para componentes que no están presentes en la página actual. Cada byte no utilizado aumenta el tiempo de análisis, el tiempo de construcción del CSSOM y el tamaño transferido. Una aplicación típica en producción puede tener un 90 % o más de CSS no utilizado en una página determinada.

Abra el panel Coverage de DevTools (Cmd+Shift+P → Coverage). Inicie la grabación, interactúe con la página y deténgala después. El panel muestra cada archivo CSS con el porcentaje utilizado y resalta en rojo las reglas no utilizadas. Exporte los datos de cobertura como JSON para analizarlos.

PurgeCSS analiza sus archivos HTML, JS y de plantillas en busca de nombres de clase, y elimina las reglas CSS no utilizadas. Configure los patrones glob de contenido para que coincidan con todos los archivos que puedan hacer referencia a nombres de clase. Incluya en la lista segura las clases utilizadas dinámicamente (añadidas por JS) para evitar que se eliminen por accidente.

El compilador JIT de Tailwind genera únicamente las clases de utilidad que se utilizan realmente en sus plantillas. El CSS resultante es muy pequeño, a menudo de 5-15KB para una aplicación completa, porque las utilidades no utilizadas nunca se generan. Este es el resultado ideal de la eliminación de código no utilizado.

En una configuración de webpack o Vite, añada PurgeCSS con patrones glob de contenido que cubran todos los archivos de plantilla. La opción safelist acepta cadenas, expresiones regulares y deep-safelist para patrones complejos de clases dinámicas procedentes de bibliotecas como Headless UI.

CSS Modules genera nombres de clase únicos por archivo y permite eliminar módulos no utilizados mediante la configuración del bundler. Solo se incluyen en el bundle los módulos CSS importados; mantener los estilos junto a sus componentes elimina de forma natural los estilos globales no utilizados.

Divida el CSS por ruta en frameworks como Next.js (extracción de CSS por página) o use importaciones dinámicas con CSS Modules. Cada página carga únicamente sus propios estilos, lo que hace significativo analizar la cobertura por página en lugar de por aplicación.

La auditoría "Reduce unused CSS" de Lighthouse estima el ahorro potencial de bytes que se obtendría al eliminar reglas no utilizadas. Identifica recursos de hojas de estilo concretos con porcentajes elevados de contenido no utilizado. Úsela como guía para priorizar los archivos que debe auditar primero.

El análisis de cobertura solo registra los estados visibles durante la grabación. Los estados hover, los estados con modales abiertos, los estados de error y los estados autenticados deben activarse manualmente durante la grabación de cobertura para evitar eliminar sus estilos por error.

Las hojas de estilo globales monolíticas acumulan CSS no utilizado con el tiempo a medida que se eliminan funcionalidades. El CSS por componente (CSS Modules, Styled Components y utilidades de Tailwind) es más fácil de depurar porque los estilos viven junto a sus componentes y se eliminan con ellos.

Para archivos CSS heredados de gran tamaño, use primero UnCSS o PurgeCSS en modo de solo informe. Ordene las reglas por frecuencia de uso. Extraiga y elimine los estilos de plugins de terceros que estén claramente sin utilizar. Trabaje de forma incremental para evitar eliminar accidentalmente estilos correspondientes a estados poco frecuentes.

¿Qué mide el panel Coverage de Chrome DevTools?

El análisis de cobertura de CSS con DevTools Coverage y Lighthouse identifica las reglas no utilizadas. PurgeCSS y Tailwind JIT automatizan la eliminación de código obsoleto. CSS Modules y la división por rutas evitan la acumulación de estilos no utilizados. En conjunto, minimizan el tamaño del CSS y el tiempo de análisis.