Eliminador de CSS no utilizado
Conserve solo el CSS que usa una página, a partir de una exportación de Coverage de Chrome o del HTML y la hoja de estilos. Todo se ejecuta en su navegador.
Eliminador de CSS no utilizado - conserve solo el CSS que usa una página
La mayoría de los sitios envían mucho más CSS del que necesita cualquier página. Un tema, un maquetador visual o un framework traen estilos para cada widget que podrían llegar a mostrar, y el navegador tiene que descargarlos y analizarlos todos antes de poder pintar nada. Esta herramienta reduce una hoja de estilos a las reglas que la página usa de verdad, de dos maneras: a partir de la exportación de Coverage que graba Chrome DevTools, o a partir del HTML de la página y del propio CSS.
Ambas se ejecutan por completo en su navegador. La hoja de estilos, el HTML y el archivo de cobertura se leen en su propio equipo y nunca se suben, algo importante cuando el CSS pertenece al sitio todavía no publicado de un cliente.
Dos formas de empezar
| Modo | Qué le da | Qué sabe | Ideal para |
|---|---|---|---|
| JSON de Coverage | El archivo exportado desde el panel Coverage de Chrome DevTools | Exactamente qué reglas aplicó el navegador mientras usted usaba la página | Temas y maquetadores cuyas clases no puede prever |
| HTML + CSS | El HTML de la página y la hoja de estilos | Qué selectores coinciden con algún elemento de ese HTML | Páginas estáticas y plantillas que usted controla |
Cómo exportar la cobertura desde Chrome
- Abra la página en Chrome y abra DevTools.
- Abra el menú de los tres puntos, luego More tools (Más herramientas) y luego Coverage (Cobertura).
- Pulse el botón de recarga del panel Coverage para que la grabación empiece con la carga de la página.
- Use la página como lo haría un visitante: abra los menús, los acordeones y las ventanas emergentes, y cambie el tamaño de la ventana a los anchos que admite.
- Pulse Export (Exportar) y guarde el archivo JSON; después arrástrelo a la pestaña JSON de Coverage y pulse Extraer CSS usado.
La exportación enumera todos los archivos que cargó la página, JavaScript incluido. La herramienta conserva las hojas de estilos, extrae los bloques <style> en línea de los documentos HTML y omite el resto, indicando cuántas entradas ha omitido. El mismo formato sale de page.coverage.stopCSSCoverage() en Puppeteer, así que también sirve una grabación automatizada.
Por qué las reglas vuelven dentro de su @media
Chrome registra la cobertura regla de estilo por regla de estilo. Para una regla dentro de @media (max-width: 768px) { ... } registra la regla, no la línea @media que la rodea. Una herramienta que se limita a copiar los rangos grabados produce por tanto la regla móvil suelta, y esta empieza a aplicarse en cualquier ancho de pantalla. Esta herramienta lee primero la hoja de estilos entera como un árbol, de modo que cada regla conservada se escribe de nuevo dentro de su propio bloque @media, @supports, @container o @layer, y un bloque que se queda vacío desaparece.
Algunas reglas @ se conservan siempre, porque otras reglas dependen de ellas en lugar de coincidir con la página: @font-face, @keyframes, @import, @charset, @property y la declaración de orden de @layer. Las reglas conservadas se copian tal como estaban escritas, así que los comentarios que contienen, el formato y los hacks de proveedor quedan exactamente como en el original.
El modo HTML + CSS
Pegue el HTML de la página y la hoja de estilos, o arrastre ambos archivos. La herramienta analiza el HTML como lo haría el navegador, sin ejecutar ningún script, y conserva una regla si alguno de sus selectores coincide con un elemento. Las partes de estado y de pseudoelemento como :hover, :focus y ::before se ignoran en la comprobación, así que .menu a:hover se queda cuando la página tiene un .menu a. Un selector que el navegador no puede analizar se conserva en lugar de adivinarse, y los @keyframes sobreviven solo mientras una regla conservada o un estilo en línea siga nombrando la animación.
El punto débil es JavaScript. Una clase que un script añade después, como is-open en un menú o active en una diapositiva, no está en el HTML que pegó, así que sus reglas parecen no usadas. Escriba esos nombres en Conservar siempre, separados por espacios o comas; los ids funcionan con o sin #, y un patrón entre barras, como /^elementor-/, conserva todas las clases que coinciden con él. Si varias páginas comparten una hoja de estilos, pegue el HTML de todas, una tras otra.
Qué significan las cifras
Tras cada ejecución la herramienta muestra cuánto ha conservado, cuántas reglas han sobrevivido y, en el modo de cobertura, una línea por hoja de estilos. En el modo HTML + CSS, Selectores eliminados enumera lo que se ha descartado, que es la forma más rápida de detectar una clase que debería haber estado en la lista de excepciones. Guarde el archivo original: el resultado es una hoja de estilos nueva, y la prueba honesta es cargar la página con ella y mirar.
Límites que conviene conocer
- Coverage solo sabe lo que ocurrió mientras grababa. Un estado hover que nunca activó, un menú que nunca abrió o un ancho que nunca probó cuenta como no usado.
- La cobertura de una página no dice nada de las demás páginas que cargan el mismo archivo. Ejecute la herramienta en cada plantilla principal, o mantenga entera una hoja de estilos base compartida.
- Los estilos que JavaScript añade en tiempo de ejecución, mediante atributos
styleu hojas inyectadas, quedan fuera de lo que puede ver cualquiera de los dos modos. - Las hojas de estilos de otros sitios, como fuentes o el CSS de un widget en un CDN, también aparecen en la exportación; consérvelas o descártelas a propósito.
Dónde más ayuda
- Páginas creadas con Elementor, Divi u otro maquetador, que cargan el CSS de todos los widgets en todas las páginas. La guía para convertir una página de Elementor en HTML y CSS simples recorre todo el proceso.
- Temas y frameworks como Bootstrap, donde una landing page usa una fracción de las clases.
- Incrustar el CSS crítico o crear una plantilla de correo, donde cada byte de estilo tiene un coste.
- Auditar una hoja de estilos antigua antes de un rediseño, para ver qué reglas sigue tocando alguna página.
Hacerlo desde la línea de comandos
Para un paso de compilación, PurgeCSS hace el trabajo de HTML + CSS desde un script. Lee los archivos de contenido y las hojas de estilos y escribe el CSS limpio en una carpeta:
npx purgecss --css css/style.css --content index.html --output dist/css/Puppeteer graba la misma cobertura que el panel Coverage, y su salida se puede guardar como JSON y arrastrar a esta herramienta:
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));Herramientas relacionadas
Una exportación de cobertura es JSON, así que el formateador JSON es la forma más rápida de mirar dentro. Cree y pruebe los patrones para Conservar siempre con el probador de expresiones regulares, y comprima las imágenes que la página, ya más ligera, sigue cargando con el conversor de imágenes.