Removedor de CSS não utilizado
Mantenha só o CSS que a página usa, a partir de uma exportação do Coverage do Chrome ou do HTML e da folha de estilos. Tudo roda no seu navegador.
Removedor de CSS não utilizado - mantenha só o CSS que a página usa
A maioria dos sites entrega muito mais CSS do que qualquer página precisa. Um tema, um construtor de páginas ou um framework traz estilos para cada widget que um dia possa exibir, e o navegador precisa baixar e interpretar tudo isso antes de conseguir desenhar a página. Esta ferramenta reduz uma folha de estilos às regras que a página realmente usa, de duas formas: a partir da exportação do Coverage gravada pelo Chrome DevTools, ou a partir do HTML da página e do próprio CSS.
As duas rodam inteiramente no seu navegador. A folha de estilos, o HTML e o arquivo de cobertura são lidos na sua própria máquina e nunca enviados, o que importa quando o CSS pertence ao site ainda não lançado de um cliente.
Dois caminhos
| Modo | O que você fornece | O que ele sabe | Ideal para |
|---|---|---|---|
| JSON do Coverage | O arquivo exportado pelo painel Coverage do Chrome DevTools | Exatamente quais regras o navegador aplicou enquanto você usava a página | Temas e construtores de páginas cujas classes você não consegue prever |
| HTML + CSS | O HTML da página e a folha de estilos | Quais seletores correspondem a algum elemento desse HTML | Páginas estáticas e templates que você controla |
Como exportar a cobertura no Chrome
- Abra a página no Chrome e abra o DevTools.
- Abra o menu de três pontos, depois More tools (Mais ferramentas) e depois Coverage (Cobertura).
- Clique no botão de recarregar do painel Coverage para que a gravação comece junto com o carregamento da página.
- Use a página como um visitante usaria: abra os menus, os acordeões e os pop-ups, e redimensione a janela para as larguras que você suporta.
- Clique em Export (Exportar) e salve o arquivo JSON; depois arraste-o para a aba JSON do Coverage e clique em Extrair CSS usado.
A exportação lista todos os arquivos que a página carregou, inclusive JavaScript. A ferramenta mantém as folhas de estilos, lê os blocos <style> inline dos documentos HTML e ignora o resto, informando quantas entradas ignorou. O mesmo formato sai de page.coverage.stopCSSCoverage() no Puppeteer, então uma gravação automatizada também funciona.
Por que as regras voltam para dentro do seu @media
O Chrome registra a cobertura uma regra de estilo por vez. Para uma regra dentro de @media (max-width: 768px) { ... }, ele registra a regra, não a linha @media em volta dela. Uma ferramenta que simplesmente copia os intervalos gravados produz, portanto, a regra mobile solta, e ela passa a valer em qualquer largura de tela. Esta ferramenta primeiro lê a folha de estilos inteira como uma árvore, de modo que cada regra mantida é escrita de volta dentro do seu próprio bloco @media, @supports, @container ou @layer, e um bloco que fica vazio desaparece.
Algumas at-rules são sempre mantidas, porque outras regras dependem delas em vez de a página corresponder a elas: @font-face, @keyframes, @import, @charset, @property e a declaração de ordem do @layer. As regras mantidas são copiadas como foram escritas, então os comentários dentro delas, a formatação e os hacks de fornecedor ficam exatamente como no original.
O modo HTML + CSS
Cole o HTML da página e a folha de estilos, ou arraste os dois arquivos. A ferramenta interpreta o HTML como o navegador faria, sem executar nenhum script, e mantém uma regra se algum seletor dela corresponder a um elemento. Partes de estado e de pseudoelemento como :hover, :focus e ::before são ignoradas no teste, então .menu a:hover fica quando a página tem um .menu a. Um seletor que o navegador não consegue interpretar é mantido em vez de adivinhado, e os @keyframes só sobrevivem enquanto uma regra mantida ou um estilo inline ainda citar a animação.
O ponto fraco é o JavaScript. Uma classe que um script adiciona depois, como is-open em um menu ou active em um slide, não está no HTML que você colou, então as regras dela parecem não usadas. Liste esses nomes em Manter sempre, separados por espaços ou vírgulas; ids funcionam com ou sem #, e um padrão entre barras, como /^elementor-/, mantém todas as classes que correspondem a ele. Se várias páginas compartilham uma folha de estilos, cole o HTML de todas, uma depois da outra.
O que os números significam
Depois de cada execução, a ferramenta mostra quanto manteve, quantas regras sobreviveram e, no modo de cobertura, uma linha por folha de estilos. No modo HTML + CSS, Seletores removidos lista o que foi descartado, que é o jeito mais rápido de achar uma classe que deveria estar na lista de exceções. Guarde o arquivo original: o resultado é uma folha de estilos nova, e o teste honesto é carregar a página com ela e olhar.
Limites que vale conhecer
- O Coverage só sabe o que aconteceu durante a gravação. Um estado de hover que você nunca acionou, um menu que nunca abriu ou uma largura que nunca testou conta como não usado.
- A cobertura de uma página não diz nada sobre as outras páginas que carregam o mesmo arquivo. Rode a ferramenta em cada template principal, ou mantenha inteira uma folha de estilos base compartilhada.
- Estilos adicionados por JavaScript em tempo de execução, por atributos
styleou folhas injetadas, ficam fora do que qualquer um dos dois modos consegue ver. - Folhas de estilos de outros sites, como fontes ou o CSS de um widget em uma CDN, também aparecem na exportação; mantenha ou descarte essas de propósito.
Onde mais ajuda
- Páginas feitas com Elementor, Divi ou outro construtor de páginas, que carregam o CSS de todos os widgets em todas as páginas. O guia para transformar uma página do Elementor em HTML e CSS puros mostra o trabalho inteiro.
- Temas e frameworks como o Bootstrap, em que uma landing page usa uma fração das classes.
- Embutir o CSS crítico ou montar um template de e-mail, em que cada byte de estilo tem um custo.
- Auditar uma folha de estilos antiga antes de um redesign, para ver quais regras alguma página ainda usa.
Fazendo pela linha de comando
Para uma etapa de build, o PurgeCSS faz o trabalho do HTML + CSS a partir de um script. Ele lê os arquivos de conteúdo e as folhas de estilos e grava o CSS limpo em uma pasta:
npx purgecss --css css/style.css --content index.html --output dist/css/O Puppeteer grava a mesma cobertura que o painel Coverage, e a saída dele pode ser salva como JSON e arrastada para esta ferramenta:
await page.coverage.startCSSCoverage();
await page.goto('https://example.com');
const coverage = await page.coverage.stopCSSCoverage();
fs.writeFileSync('coverage.json', JSON.stringify(coverage));Ferramentas relacionadas
Uma exportação de cobertura é JSON, então o formatador JSON é o jeito mais rápido de ver o que há dentro. Crie e teste os padrões para Manter sempre com o testador de regex, e comprima as imagens que a página, agora mais leve, ainda carrega com o conversor de imagens.