Corrija 'Remover CSS não utilizado' 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 da web. É bastante normal que parte do CSS não seja usada. Por exemplo, porque algumas declarações CSS são escritas para outro dispositivo, como desktop ou mobile. Às vezes, porque um elemento que é descrito na folha de estilos (como um botão) não é usado nesta página específica. O CSS não utilizado geralmente ocorre quando você usa um framework como o 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 se esqueceu de remover os elementos CSS antigos.

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

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

Devido a esse mecanismo, os arquivos CSS sempre bloquearão a renderização da sua página da web. Quando um arquivo CSS é maior do que deveria, leva mais tempo para baixar este 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 são utilizados na página atual. Isso representa 66% de CSS desperdiçado. No percentil 90, o CSS não utilizado chega a 212 KB. E 85% de todas as páginas falham na auditoria de recursos de bloqueio de renderização, sendo o CSS a causa principal.

O CSS não utilizado atrasa diretamente a First Contentful Paint (FCP) e a 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, ele também afeta a 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 ver o CSS não utilizado na visão geral do Code Coverage. O Code Coverage faz parte do Chrome DevTools. O 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. Agora você verá 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á realmente sendo usado. Clique em um arquivo CSS para ver quais regras CSS são (verde) e quais regras CSS não são (vermelho) usadas na página atual.

Como resolver o aviso 'remover CSS não utilizado'

Existem várias maneiras de resolver a mensagem 'remover CSS não utilizado' no Lighthouse. Se, por algum motivo, corrigir o aviso não for possível, você poderá otimizar a entrega do CSS para garantir que o 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 o 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, é claro, remover manualmente o CSS não utilizado. Os passos são simples:

1. Faça backup dos seus arquivos CSS originais. Você pode acabar removendo CSS demais.
2. Abra a guia 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ê tem que julgar isso por si mesmo!
4. Verifique por declaração CSS se ela não está duplicada no CSS. O CSS duplicado também será sinalizado como não utilizado.
5. Verifique cada regra CSS em busca de métodos abreviados. É possível encurtar o CSS? Então encurte-o!

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 de que você precisa para o seu dispositivo. Sua página costuma ser visitada no mobile. Você não precisa de fato baixar os estilos de desktop e print para este dispositivo móvel. Não baixar esses estilos economiza tempo e, portanto, encurta a cadeia de solicitações críticas no Lighthouse.

Para conseguir isso, use o atributo media. O atributo media garante que uma folha de estilos seja usada apenas 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, em seguida, muda para media="all" assim que for carregado.

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

Existem várias ferramentas inteligentes que podem limpar automaticamente seus arquivos CSS para você e remover quaisquer referências de CSS não utilizadas. 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. O PurgeCSS é executado no Node.js e se integra ao 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, em seguida, remove quaisquer seletores CSS que não forem encontrados. Você também pode experimentar o PurifyCSS online para uma análise rápida.

4. Critical CSS

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

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

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

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

5. Minificar os arquivos CSS

O CSS não utilizado retarda 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 serem baixados.

Podemos combater esse problema reduzindo o tamanho do arquivo CSS através da minificação dos arquivos CSS. Isso é feito por meio de um minificador de CSS. Um minificador de CSS encolhe os 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 ocupe menos bytes para transferir.

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

6. Recompile seu framework CSS

Você está usando um framework CSS como o Bootstrap CSS? É um framework CSS com o qual você pode estilizar todo o seu site. Este framework é tão completo que as chances são de que você nunca usará grandes partes dele.

Felizmente, os criadores do Bootstrap e de outros frameworks CSS levaram isso em consideração. Este framework é escrito em SASS. Essa é uma linguagem muito semelhante ao CSS. Ela consiste em vários pequenos arquivos SASS que podem usar variáveis e funções simples. Isso torna mais 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.

Certifique-se também de não carregar um framework CSS não modificado a partir do CDN padrão. Baixe o framework e compile-o com SASS exatamente como você o deseja, apenas com 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. A forma como isso é feito depende do seu site. Existem vários caminhos que levam a Roma.

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

Um leitor atento pode pensar: "E quanto ao cache de CSS? O CSS é mais rápido quando os arquivos CSS finais são armazenados em cache." Sim, está certo. É por isso que usamos Speculation Rules para pré-carregar páginas na janela de visualização visível para que uma página seja sempre recuperada do cache, incluindo o CSS.

Corrigir 'remover CSS não utilizado' no WordPress

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

• Diretamente no template. Na sua pasta de template existe um arquivo chamado header.php. Neste arquivo, muitas vezes existem arquivos CSS específicos do template. Você pode modificar esses arquivos CSS como descrevi acima. Não se esqueça de fazer backup dos seus arquivos CSS originais e tenha em mente que uma atualização de tema pode sobrescrever seus arquivos CSS.
• CSS adicionado por um plugin. Plugins no WordPress podem adicionar um número ilimitado de arquivos CSS 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 apenas injetam CSS em cada página, mesmo que não haja necessidade daquele CSS específico do plugin naquela página. Eu me deparo com isso todos os dias. Se for esse o caso, você pode usar as funções wp_dequeue_style e wp_deregister_style para remover esses estilos das páginas. É um trabalho de precisão. Se você não tem certeza de como consertar isso, recorra ao seu desenvolvedor ou peça-me 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 as folhas de estilo, você pode desativar esses scripts por página com a função wp_dequeue_script. Quando o JavaScript não carregar, a folha de estilos também não será injetada. Se você precisa do script e da folha de estilos, mas não diretamente após o carregamento, é possível adiar o carregamento do JavaScript por meio 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 o Real User Monitoring. Em nossos dados do CoreDash, os sites que usam CSS crítico inline e adiam o restante observam uma melhoria mediana de FCP de 320ms.