Corrigir 'Remove Unused CSS' no Lighthouse

Última revisão por Arjen Karel em fevereiro de 2026

O que é CSS não utilizado?

CSS não utilizado consiste em declarações CSS que não são usadas em nenhum lugar de uma página web. É bastante normal que parte do CSS não seja utilizado. Por exemplo, porque algumas declarações CSS foram escritas para outro dispositivo, como desktop ou mobile. Às vezes porque um elemento descrito na folha de estilos (como um botão) não é usado nesta página específica. CSS não utilizado ocorre frequentemente quando você usa um framework como Bootstrap, onde há muito mais elementos descritos por padrão no CSS do que você jamais usará. Ou quando você redesenhou sua página, mas esqueceu de remover os elementos CSS antigos.

Por que CSS não utilizado é ruim para a velocidade da página?

CSS diminui o carregamento da página. Quando uma página é carregada, o navegador primeiro busca o HTML desta página. Este HTML é convertido em nós DOM. Depois disso, o navegador busca todas as folhas de estilo. Os estilos encontrados nesses arquivos CSS também são convertidos para outro formato, chamado CSSOM. O DOM e o CSSOM são combinados em uma árvore de renderização. Somente quando esta árvore de renderização foi construída, o navegador começa a pintar o primeiro conteúdo.

Por causa desse mecanismo, os arquivos CSS sempre bloqueiam a renderização da sua página web. Quando um arquivo CSS é maior do que deveria, leva mais tempo para baixar esse arquivo e isso causa o primeiro atraso. Quando um arquivo CSS contém CSS não utilizado, leva mais tempo para construir a árvore de renderização.

A página mediana envia 79 KB de CSS no mobile, mas de acordo com o 2024 Web Almanac, 52 KB disso não é utilizado na página atual. Isso é 66% de CSS desperdiçado. No percentil 90, CSS não utilizado chega a 212 KB. E 85% de todas as páginas falham na auditoria de recursos que bloqueiam a renderização, sendo CSS a principal causa.

CSS não utilizado atrasa diretamente o First Contentful Paint (FCP) e o Largest Contentful Paint (LCP) porque o navegador não pintará nenhum pixel até que todo o CSS seja baixado e analisado. Em páginas com CSS pesado, também afeta o INP porque folhas de estilo maiores aumentam o custo dos recálculos de estilo durante as interações do usuário.

Como encontrar CSS não utilizado manualmente

No Google Chrome, você pode visualizar CSS não utilizado na visão geral de Code Coverage. Code Coverage faz parte do Chrome DevTools. DevTools é uma série de ferramentas integradas que estão disponíveis em todos os navegadores Chrome.

Primeiro, abra o DevTools com o atalho Ctrl-Shift-J. Em seguida, digite Ctrl-Shift-P para abrir a Paleta de Comandos. Agora digite 'coverage'. Selecione coverage e recarregue a página. Você verá agora uma visão geral dos arquivos CSS e JavaScript que são carregados e usados pela página. Além disso, você pode ver o tamanho dos arquivos e quanto do código está sendo realmente utilizado. Clique em um arquivo CSS para ver quais regras CSS são (verde) e quais regras CSS não são (vermelho) utilizadas na página atual.

Como resolver o aviso 'remove unused CSS'

Existem várias maneiras de resolver a mensagem 'remove unused CSS' no Lighthouse. Se, por algum motivo, corrigir o aviso não for possível, você pode otimizar a entrega de CSS para garantir que CSS não utilizado tenha menos impacto no tempo de carregamento da sua página. Discutirei brevemente as opções que você tem para corrigir CSS não utilizado abaixo.

1. Excluir o CSS não utilizado manualmente

A maneira mais lógica e melhor, mas também a mais trabalhosa, é obviamente remover o CSS não utilizado manualmente. Os passos são simples:

1. Faça backup dos seus arquivos CSS originais. Você pode remover CSS demais.
2. Abra a aba Code Coverage no Google Chrome e veja por arquivo CSS quais declarações você não precisa.
3. Abra o arquivo CSS no servidor (ou localmente) e verifique cada declaração CSS não utilizada. Determine se ela pode ser removida. Mas tenha cuidado: uma declaração CSS não utilizada em uma página pode ser necessária em outra página. Você precisa avaliar isso!
4. Verifique por declaração CSS se ela não está duplicada no CSS. CSS duplicado também será sinalizado como não utilizado.
5. Verifique cada regra CSS para métodos abreviados. É possível encurtar o CSS? Então encurte!

2. Dividir o CSS em vários arquivos

Existe uma maneira simples de reduzir rapidamente o número de regras CSS! Carregue apenas os estilos necessários para o seu dispositivo. Sua página é frequentemente visitada no mobile. Você não precisa realmente baixar os estilos para desktop e print neste dispositivo móvel. Não baixar esses estilos economiza tempo e, assim, encurta a cadeia de requisições críticas no Lighthouse.

Para conseguir isso, use o atributo media. O atributo media garante que uma folha de estilos só seja usada se o atributo media corresponder à mídia que você está usando no momento.

<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)">

Você também pode usar o truque do atributo media para carregar CSS não crítico sem bloquear a renderização:

<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>

Isso carrega o CSS sem bloquear a renderização, marcando-o como media="print", e depois muda para media="all" após o carregamento.

3. Usar uma ferramenta de limpeza automática de CSS

Existem várias ferramentas inteligentes que podem limpar automaticamente seus arquivos CSS e remover quaisquer referências de CSS não utilizado. Embora as ferramentas funcionem incrivelmente bem, elas não são perfeitas. Às vezes, essas ferramentas removem declarações CSS demais. Portanto, use-as com cuidado e sempre verifique seu CSS você mesmo. A melhor ferramenta de limpeza de CSS é o PurgeCSS. PurgeCSS roda em Node.js e se integra com Webpack, PostCSS e Vite. Ele usa extratores de conteúdo para escanear seus arquivos HTML, JavaScript e de template em busca de nomes de classes, e depois remove quaisquer seletores CSS que não forem encontrados. Você também pode experimentar o PurifyCSS online para uma análise rápida.

4. CSS Crítico

CSS crítico é uma coleção de regras CSS que são necessárias no viewport (a parte visível) do seu site. Em outras palavras: CSS crítico é o CSS necessário para renderizar a parte visível da sua página.

Existem várias ferramentas que podem extrair CSS crítico da sua página. O CSS crítico é então colocado inline, no head da sua página, enquanto o arquivo CSS original é carregado de forma assíncrona (para o navegador usar depois).

Isso não resolve completamente o problema de CSS não utilizado. Eventualmente, o CSS não utilizado será carregado e analisado, mas seu navegador não será incomodado por ele durante a primeira fase de renderização.

A ferramenta mais comumente usada para encontrar e extrair CSS crítico é o script Node.js Critical. Também existem ferramentas online como o Critical Path CSS Generator.

5. Minificar os arquivos CSS

CSS não utilizado desacelera uma página, como você leu acima, de 2 maneiras. A primeira é porque os arquivos CSS são maiores e, portanto, levam mais tempo para baixar.

Podemos combater esse problema reduzindo o tamanho do arquivo CSS minificando os arquivos CSS. Isso é feito através de um minificador de CSS. Um minificador de CSS reduz arquivos CSS removendo espaços, comentários e formatação. Além disso, um minificador de CSS pode reescrever variáveis e código CSS para que ocupem menos bytes na transferência.

Uma ferramenta de minificação de CSS conhecida é o css-minify. Minifique todos os seus arquivos CSS via linha de comando com o comando css-minify -f filename. Também existem vários minificadores de CSS online como o cssminifier.com.

6. Recompilar seu framework CSS

Você está usando um framework CSS como Bootstrap CSS? Esse é um framework CSS com o qual você pode estilizar todo o seu site. Este framework é tão completo que há grandes chances de que você nunca use grande parte dele.

Felizmente, os criadores do Bootstrap e outros frameworks CSS levaram isso em consideração. Este framework é escrito em SASS. É uma linguagem muito semelhante ao CSS. Consiste em vários pequenos arquivos SASS que podem usar variáveis e funções simples. Isso torna fácil ajustar e personalizar o framework você mesmo com um pouco de conhecimento. Você pode simplesmente omitir as partes que não usa e compilá-lo facilmente em 1 arquivo CSS final.

Também certifique-se de não carregar um framework CSS sem modificação do CDN padrão. Baixe o framework e compile-o com SASS exatamente como você deseja, com apenas as classes CSS que você usa.

7. Considere uma estratégia de CSS diferente

Você realmente quer ser rápido? Então pode ser uma ideia repensar sua estratégia de CSS. Como isso é feito depende do seu site. Existem vários caminhos que levam a Roma.

Vamos pegar nosso site como exemplo. Carregamos apenas o CSS que realmente precisamos por página. As classes CSS são automaticamente importadas pelo nosso CMS apenas quando são necessárias. Colocamos o CSS inline (no head da página). Isso nos poupa uma requisição de rede extra. Esta solução é extremamente rápida e fácil de manter.

Um leitor atento pode pensar: "E o cache de CSS? CSS é mais rápido quando os arquivos CSS finais estão em cache." Sim, isso está correto. É por isso que usamos Speculation Rules para pré-carregar páginas no viewport visível, para que uma página seja sempre recuperada do cache, incluindo CSS.

Corrigir 'remove unused CSS' no WordPress

Está pronto para remover CSS não utilizado? Veja como começar no WordPress. No WordPress, CSS pode ser adicionado de 3 maneiras:

• Diretamente no template. Na pasta do seu template há um arquivo chamado header.php. Neste arquivo, frequentemente há arquivos CSS específicos do template. Você pode modificar esses arquivos CSS como descrevi acima. Não esqueça de fazer backup dos seus arquivos CSS originais e tenha em mente que uma atualização do tema pode sobrescrever seus arquivos CSS.
• CSS adicionado por um plugin. Plugins no WordPress podem adicionar arquivos CSS ilimitados ao seu HTML. Esses plugins usam as funções wp_register_style e wp_enqueue_style. A maioria dos plugins não se preocupa em verificar se estão ativos na página atual. Eles simplesmente injetam CSS em todas as páginas, mesmo quando não há necessidade desse CSS específico do plugin naquela página. Eu encontro isso todos os dias. Se for o caso, você pode usar as funções wp_dequeue_style e wp_deregister_style para remover esses estilos das páginas. Esse é um trabalho preciso. Se você não tem certeza de como corrigir isso, procure seu desenvolvedor ou peça minha ajuda. Você também pode usar o plugin Asset CleanUp com o qual você pode definir por tipo de página quais plugins, estilos e scripts podem ser carregados.
• CSS adicionado por JavaScript. Também é possível injetar folhas de estilo na página usando JavaScript. Assim como folhas de estilo, você pode desabilitar esses scripts por página com a função wp_dequeue_script. Quando o JavaScript não carrega, a folha de estilos também não será injetada. Se você precisa do script e da folha de estilos, mas não imediatamente após o carregamento, é possível adiar o carregamento do JavaScript através do atributo defer do script. Faça isso adicionando este código no 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 );

Após reduzir seu CSS não utilizado, verifique a melhoria com Real User Monitoring. Nos nossos dados do CoreDash, sites que colocam CSS crítico inline e adiam o restante apresentam uma melhoria mediana de FCP de 320ms.