Unused CSS no WordPress: como remover sem quebrar layout

Tipo Performance & Velocidade

Nome do erro Aviso de CSS não utilizado no WordPress EN: Unused CSS warning in WordPress

Severidade Atenção

Descrição O aviso de unused CSS no WordPress aparece quando o PageSpeed Insights detecta folhas de estilo carregadas pela página, mas com regras que aquela página não aplica, o que pesa no LCP e no render. A correção gera o Used CSS por página com o Perfmatters e mantem o estilo usado, em vez de simplesmente apagar todo o CSS.

O que é o aviso de unused CSS no WordPress?

Unused CSS no WordPress e o CSS que o navegador baixa numa página mas não chega a usar: o tema e cada plugin enfileiram a folha de estilo inteira em toda página, mesmo que so uma fracao das regras valha para aquela URL. O PageSpeed Insights e o Lighthouse sinalizam isso na auditoria Reduce unused CSS, estimando quantos KiB poderiam ser economizados. Como o CSS e um recurso que bloqueia a renderizacao, esse excesso atrasa o First Contentful Paint e o Largest Contentful Paint. A correção moderna não e apagar o CSS na mao: e gerar o Used CSS por página, ou seja, calcular quais regras aquela URL realmente usa, servir so essas no carregamento inicial e adiar ou remover o resto. O Perfmatters faz isso de forma automatizada com a opção Remove Unused CSS, enquanto o Autoptimize cobre parte do problema agregando e adiando CSS, sem o calculo de Used CSS por página.

Como identificar

No relatório do PageSpeed Insights aparece a auditoria “Reduce unused CSS” (ou “Reduzir CSS não utilizado”) listando arquivos .css com KiB potenciais de economia.
O LCP e o First Contentful Paint ficam altos e a aba Coverage do DevTools mostra alta porcentagem de bytes de CSS não usados na página.
Depois de ativar o Remove Unused CSS, a página abre “sem estilo” (texto cru, botões sem cor, grade desalinhada) na primeira visita de cada URL e volta ao normal ao recarregar.
Um componente que aparece so após interacao (slider, mega menu, popup, sticky header, abas) perde a formatacao porque seu CSS foi considerado não usado.
O layout quebra para o visitante deslogado mas continua certo para você, que esta logado como administrador e recebe o CSS completo.

Antes de começar: Antes de ativar o Remove Unused CSS ou mexer nas excecoes, exporte as configurações atuais em Perfmatters -> Tools -> Import/Export. Assim você restaura o estado anterior se uma excecao errada piorar o layout.

Como prevenir

Ative o Remove Unused CSS comecando pelo Stylesheet Behavior em Delay e so passe para Remove depois de validar o site inteiro.
Mantenha na lista de Excluded Stylesheets e Excluded Selectors os arquivos e seletores de componentes que aparecem so após interacao (sliders, popups, mega menu).
Limpe o Used CSS sempre que alterar o Customizer, trocar de tema ou atualizar um page builder, para evitar estilo desatualizado em cache.
Teste cada mudanca de otimização em uma janela anonima e no mobile antes de considerar o ajuste concluido.
Mantenha um export das configurações do Perfmatters como ponto de restauração depois de cada ajuste validado.

Causa

O tema e os plugins enfileiram a folha de estilo completa em toda página via wp_enqueue_style, entao páginas simples carregam regras de componentes que nunca aparecem ali.
Page builders como Elementor e Divi geram um arquivo CSS grande por widget e por kit global, e a maior parte das regras não se aplica a uma página específica.
No Perfmatters, a opção Stylesheet Behavior esta em Remove (a mais agressiva), que apaga as folhas originais sem excecao para o estilo que a página ainda usava.
O Used CSS foi gerado uma vez e ficou em cache desatualizado depois de uma mudanca no Customizer ou de uma atualização de plugin, entao o estilo novo não entrou no calculo.
Um componente que depende de interacao (popup, off-canvas, carrossel) so injeta o CSS após o clique, e o gerador de Used CSS, que le o HTML inicial, não captura essas regras.
O Autoptimize esta agregando e adiando o CSS, mas sem gerar Used CSS por página, entao o PageSpeed continua acusando CSS não utilizado mesmo com o plugin ativo.

Como resolver

Confirme o problema no PageSpeed e no Coverage: rode a página lenta no PageSpeed Insights e abra a auditoria de CSS não utilizado para ver quais arquivos pesam. No navegador, use a aba Coverage do DevTools para medir a porcentagem de CSS baixado e não usado naquela URL.
```
PageSpeed Insights -> auditoria "Reduce unused CSS" (veja os .css e os KiB)
DevTools (F12) -> Ctrl+Shift+P -> Show Coverage -> recarregue a página
```
Ative o Remove Unused CSS no Perfmatters: no painel do Perfmatters, abra a aba CSS e ligue o Remove Unused CSS. Comece pela geração Inline (default), que coloca o CSS usado no inicio do HTML e tende a render a melhor nota de PageSpeed antes de qualquer ajuste fino.
```
Perfmatters -> CSS -> Remove Unused CSS: On
Used CSS Method: Inline (default)
```
Escolha o Stylesheet Behavior menos agressivo: o Stylesheet Behavior define o que acontece com as folhas originais depois que o Used CSS e gerado. Prefira Delay ou Async em vez de Remove: as duas primeiras adiam o estilo original como rede de segurança, enquanto Remove apaga tudo e exige mais excecoes.
```
Perfmatters -> CSS -> Remove Unused CSS -> Stylesheet Behavior: Delay
Use Remove apenas em sites simples e depois de testar
```
Adicione excecoes para o estilo que quebrou: quando um componente fica sem formatacao, proteja o estilo dele em vez de desligar o recurso. Informe o arquivo .css em Excluded Stylesheets e a classe ou id do componente em Excluded Selectors, um por linha, para que essas regras nunca sejam cortadas.
```
Perfmatters -> CSS -> Used CSS -> Excluded Stylesheets
/wp-content/plugins/elementor/assets/css/frontend.min.css
Perfmatters -> CSS -> Used CSS -> Excluded Selectors
.elementor-widget-slides
#site-navigation
```
Limpe o Used CSS e regenere: toda vez que mudar excecoes, o comportamento ou o layout no Customizer, o cache do Used CSS precisa ser refeito. Limpe o Used CSS pelas ferramentas do Perfmatters e também o cache do seu plugin de cache para forcar a regeneracao.
```
Perfmatters -> Tools -> Clear Used CSS
Limpe também o cache do plugin de cache (WP Rocket, LiteSpeed, etc.)
```
Valide em janela anonima, desktop e mobile: o Used CSS e servido do cache para o visitante, não para o admin logado, e e gerado separado para desktop e mobile. Abra a URL corrigida numa janela anonima e também no celular para confirmar que o layout voltou nos dois contextos.
```
Teste em janela anonima (Ctrl+Shift+N) sem estar logado
Repita o teste no celular ou no modo responsivo do DevTools
```

PHP

// functions.php do tema filho
// Remove folhas de estilo que NAO sao usadas em uma pagina especifica,
// na origem (dequeue), reduzindo o unused CSS antes de qualquer plugin de cache.
// Ajuste os handles e a condicao para o seu caso real.
add_action( 'wp_enqueue_scripts', function () {
    // Exemplo: o CSS do bloco de comentarios so e util onde ha comentarios.
    if ( ! is_singular() || ! comments_open() ) {
        wp_dequeue_style( 'wp-block-comments' );
    }
    // Exemplo: estilo de um plugin de formulario so na pagina de contato.
    if ( ! is_page( 'contato' ) ) {
        wp_dequeue_style( 'contact-form-7' );
    }
}, 100 );

// Filtro do Perfmatters: exclui um stylesheet do calculo de Used CSS via codigo,
// util quando a folha precisa carregar inteira (ex.: page builder).
add_filter( 'perfmatters_rucss_excluded_stylesheets', function ( $excluded ) {
    $excluded[] = 'frontend.min.css';
    return $excluded;
} );

Perguntas frequentes

O que significa o aviso de unused CSS no PageSpeed Insights?

Significa que a página baixou folhas de estilo cujas regras ela não aplica, desperdicando download e atrasando a renderizacao. O relatório estima quantos KiB poderiam ser economizados. A causa comum e o tema e os plugins enfileirarem o CSS inteiro em toda página, mesmo onde a maioria das regras não vale.

Como remover o CSS não utilizado no WordPress sem quebrar o site?

Use o Remove Unused CSS do Perfmatters para gerar o Used CSS por página, mantendo o Stylesheet Behavior em Delay no inicio. Assim o estilo usado e servido e o restante e adiado, não apagado de vez. Adicione excecoes para os componentes que ficarem sem formatacao e regenere o Used CSS.

Por que o layout quebrou depois que ativei o Remove Unused CSS?

Porque o gerador considerou uma folha de estilo usada como não usada e a removeu, ou porque o componente so injeta o CSS após interacao e não foi capturado. Troque o Stylesheet Behavior de Remove para Delay, adicione o arquivo .css em Excluded Stylesheets e o seletor em Excluded Selectors, e limpe o Used CSS.

Qual a diferenca entre o Used CSS Inline e o File no Perfmatters?

Inline coloca o CSS usado no inicio do HTML, o que costuma render a melhor nota de PageSpeed mas aumenta o tamanho da página. File grava o CSS usado em um arquivo separado, que pode ser cacheado em visitas repetidas e reduz o HTML. Inline e bom para a nota; File e melhor para a performance percebida em retorno.

O Autoptimize resolve o unused CSS sozinho?

Não totalmente. O Autoptimize agrega, minifica e pode adiar o CSS, o que ajuda, mas ele não calcula o Used CSS por página como o Perfmatters. Por isso o PageSpeed pode continuar acusando CSS não utilizado mesmo com o Autoptimize ativo. Para zerar o aviso, gere o Used CSS por página.

Preciso limpar o Used CSS sempre que mudo algo no site?

Sim, sempre que alterar o Customizer, trocar o tema ou atualizar um page builder. O Used CSS e um snapshot por página e fica em cache; se o estilo mudou e o cache não, a página pode sair com layout antigo ou quebrado. Limpe o Used CSS em Perfmatters Tools e também o cache do plugin de cache.

O site esta certo para mim mas quebrado para o visitante. Por que?

Você esta logado como administrador e recebe o CSS completo, enquanto o visitante recebe a versão otimizada do cache com o Used CSS. Por isso o teste final tem de ser numa janela anonima e também no mobile, já que o Used CSS e gerado separado para desktop e celular.

Qual Stylesheet Behavior devo usar: Delay, Async ou Remove?

Comece com Delay, que adia o CSS original como rede de segurança e raramente quebra o layout. Async tende a um LCP um pouco maior, mas evita pop-in. Remove e a mais agressiva: apaga as folhas originais e quase sempre exige excecoes, entao deixe para sites simples já testados.

Atenção

Como corrigir o erro de imagens WebP que não carregam no WP Rocket com Imagify

As imagens WebP não carregam no WP Rocket com Imagify quando a opção WebP Compatibility do WP Rocket é ativada junto com o método de tag picture do Imagify, gerando cache duplicado e referências quebradas; o WP Rocket só deve cuidar do WebP quando o Imagify não serve a imagem sozinho.

Grave

Como corrigir queries lentas no banco com JetEngine e ACF PRO no WordPress

As queries lentas do JetEngine e ACF PRO no banco acontecem quando listings e filtros disparam meta_query pesadas sobre a tabela wp_postmeta sem indice útil, ou quando muitos campos são gravados como meta em vez de uma tabela dedicada, forçando JOINs e leituras caras a cada carregamento.

Atenção

Como corrigir o cache do WP Rocket que quebra listings do JetEngine no WordPress

O cache do WP Rocket que quebra listings do JetEngine acontece quando otimizacoes como Delay JavaScript Execution, Remove Unused CSS e o cache de página servem uma versão estática que não executa o JavaScript ou não carrega o CSS de que o Listing Grid e o JetSmartFilters precisam para renderizar conteúdo dinâmico.

Atenção

Como corrigir o impacto de scripts de terceiros (Analytics e Pixel) no WordPress

Scripts de terceiros como Google Analytics e Facebook Pixel carregam de domínios externos no head e bloqueiam a thread principal, elevando o Total Blocking Time e o LCP. A correção adia esses scripts até a interacao e hospeda o analytics localmente.

Grave

Como corrigir scripts que não carregam pelo Script Manager do Perfmatters

No Perfmatters Script Manager o JS não carrega quando um arquivo JavaScript enfileirado é marcado como Off em escopo amplo (Everywhere ou por tipo de post) sem exceção para a página que precisa dele. O script some do front-end e a funcionalidade que dependia daquele arquivo para de responder, embora o recurso continue ativo no painel.

Crítico

Como corrigir scripts essenciais do WooCommerce removidos pelo Perfmatters

Scripts do WooCommerce removidos pelo Perfmatters acontecem quando o Script Manager desativa assets como wc-cart-fragments, woocommerce e wc-checkout marcados como Everywhere, em vez de Current URL. Sem esses arquivos, o carrinho Ajax para de atualizar e o checkout fica sem o JavaScript que processa o pedido.

Setores

Extensões

Integrações

Como corrigir o aviso de CSS não utilizado no WordPress

O que é o aviso de unused CSS no WordPress?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o erro de imagens WebP que não carregam no WP Rocket com Imagify

Como corrigir queries lentas no banco com JetEngine e ACF PRO no WordPress

Como corrigir o cache do WP Rocket que quebra listings do JetEngine no WordPress

Como corrigir o impacto de scripts de terceiros (Analytics e Pixel) no WordPress

Como corrigir scripts que não carregam pelo Script Manager do Perfmatters

Como corrigir scripts essenciais do WooCommerce removidos pelo Perfmatters

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos