Astra WP Rocket CSS quebrado: como corrigir o conflito

Tipo Performance & Velocidade

Nome do erro Conflito de CSS entre Astra Pro e WP Rocket EN: Astra Pro and WP Rocket CSS conflict

Severidade Grave

Descrição O conflito de CSS otimizado entre Astra Pro e WP Rocket acontece quando o Remove Unused CSS ou a combinacao de CSS do WP Rocket descarta o estilo dinâmico do Astra, e o site carrega sem layout: fontes erradas, cores fora do lugar e botões sem formatacao. Aparece so na primeira visita de cada URL, porque o CSS usado e gerado por página.

O que é o conflito de CSS entre Astra e WP Rocket?

O Astra Pro injeta boa parte do visual via CSS dinâmico, gerado pelo Customizer e enfileirado em handles como astra-theme-css. O WP Rocket, na aba File Optimization, oferece o Remove Unused CSS (que mantem so o CSS usado por página), além de minificar e combinar CSS. Quando essas otimizacoes leem o estilo do Astra como não usado, ou alteram a ordem de carga, o tema perde regras essenciais. O resultado e uma página que aparece sem estilo, com o conteúdo empilhado e os componentes do Astra Pro sem formatacao, mesmo que tudo esteja correto no editor.

Como identificar

A página abre ‘sem estilo’ (texto cru, sem fontes, cores ou espacamento) so na primeira visita de cada URL, e ao recarregar volta ao normal.
Cabeçalho, mega menu, botões ou sticky header do Astra Pro aparecem desformatados ou somem depois de ativar o Remove Unused CSS.
No código-fonte da página o estilo inline do Astra (id ‘astra-theme-css-inline-css’) esta ausente ou movido para o rodape.
O layout quebra so para visitantes deslogados, porque o CSS usado e servido do cache do WP Rocket e não para o admin logado.

Como prevenir

Sempre que mexer no Customizer do Astra, limpe o Used CSS do WP Rocket logo em seguida para evitar estilo desatualizado em cache
Mantenha os handles essenciais do Astra Pro fixos na CSS safelist do WP Rocket antes de subir mudancas grandes de layout
Teste cada nova otimização do WP Rocket em staging e em aba anonima antes de ativar em producao, conferindo desktop e mobile

Causa

A opção 'Remove Unused CSS' (aba File Optimization, Optimize CSS Delivery) descarta o handle astra-theme-css por considerar regras dinâmicas do Astra como não usadas naquela página.
As opções 'Minify CSS files' e 'Combine CSS files' alteram a ordem de carga e fazem o CSS do Astra Pro perder para regras de outro arquivo combinado.
O CSS crítico gerado pelo WP Rocket não inclui seletores de elementos dinâmicos do Astra, como mega menu, sticky header e off-canvas, que aparecem so após interacao.
O cache do 'Used CSS' do WP Rocket ficou desatualizado depois de uma mudanca no Customizer do Astra e nunca foi regenerado.
A opção do Astra 'Cache Dynamic CSS' (em Appearance -> Customize -> Performance) gerou um arquivo estático antigo que diverge do CSS que o WP Rocket otimizou.

Como resolver

Confirme que o culpado e o Remove Unused CSS: abra uma URL afetada em aba anonima para reproduzir a quebra como visitante. Depois desligue temporariamente o Remove Unused CSS e limpe o cache para isolar a causa antes de aplicar a correção definitiva. A opção fica na aba indicada abaixo.
```
Settings -> WP Rocket -> File Optimization -> Optimize CSS Delivery -> Remove Unused CSS
```
Adicione os handles do Astra na CSS safelist: mantenha o Remove Unused CSS ligado, mas proteja o estilo do tema. Na área de texto CSS safelist, inclua os identificadores do Astra (um por linha) para o WP Rocket nunca remove-los. Use os valores abaixo.
```
#astra-theme-css-inline-css
.ast-container
.main-header-menu
.ast-builder-layout-element
```
Exclua o CSS do Astra da combinacao, se ainda quebrar: se o problema vier da combinacao e não do Remove Unused CSS, va ao campo Excluded CSS Files, na mesma aba File Optimization, e informe o caminho do estilo do tema para que ele carregue isolado. Use o padrão abaixo.
```
/wp-content/themes/astra/assets/css/minified/style.min.css
```
Regenere o CSS do Astra e o Used CSS do WP Rocket: force os dois lados a recriar o estilo. No Astra, regenere o CSS dinâmico salvando o Customizer; no WP Rocket, limpe o Used CSS e o cache pela barra de administracao. Os caminhos estão abaixo.
```
Appearance -> Customize -> Publish (regenera o CSS dinâmico do Astra)
Admin bar -> WP Rocket -> Clear Used CSS
Admin bar -> WP Rocket -> Clear and preload cache
```
Valide em aba anonima e em mobile: abra de novo a URL corrigida em aba anonima e também no celular, já que o WP Rocket gera CSS usado separado para desktop e mobile. Se o layout do Astra voltar ao normal nas duas versões, a correção esta concluida.

PHP

// functions.php do tema filho do Astra
// Garante que o estilo do tema seja sempre enfileirado e dificil de
// ser tratado como 'nao usado' por plugins de otimizacao de CSS.
add_action( 'wp_enqueue_scripts', function () {
    if ( ! wp_style_is( 'astra-theme-css', 'enqueued' ) ) {
        wp_enqueue_style(
            'astra-theme-css',
            get_template_directory_uri() . '/assets/css/minified/style.min.css',
            array(),
            ASTRA_THEME_VERSION
        );
    }
}, 1 );

Perguntas frequentes

Por que o site do Astra so quebra na primeira visita de cada página?

O Remove Unused CSS do WP Rocket gera o CSS usado por URL na primeira visita e so aplica na visita seguinte. Se ele descarta o estilo do Astra, a primeira carga sai sem layout e o recarregamento já vem corrigido do cache. Por isso o problema parece intermitente.

Preciso desligar o Remove Unused CSS para resolver?

Não precisa. Na maioria dos casos basta adicionar os identificadores do Astra na CSS safelist do WP Rocket e regenerar o Used CSS. Desligar a opção resolve, mas você perde o ganho de performance que motivou ativar o recurso.

O que coloco na CSS safelist do WP Rocket para o Astra?

Inclua o estilo inline do tema e os seletores dos componentes dinâmicos, um por linha, como o id do CSS inline do Astra e classes do cabeçalho e do builder. Assim o WP Rocket mantem essas regras mesmo achando que não são usadas na página.

A combinacao de CSS também quebra o Astra Pro?

Pode quebrar. Combinar CSS junta arquivos e muda a ordem de carga, e o estilo do Astra pode perder para regras de outro arquivo. Se a quebra continuar com o Remove Unused CSS protegido, exclua o CSS do tema do campo Excluded CSS Files.

Mexi no Customizer e o site quebrou de novo. O que aconteceu?

Mudar o Customizer do Astra gera um CSS novo, mas o WP Rocket ainda serve o Used CSS antigo do cache. Limpe o Used CSS pela barra de administracao do WP Rocket depois de toda alteração de layout para forcar a regeneracao com o estilo atualizado.

O layout esta certo para mim, mas o cliente ve quebrado. Por que?

Você esta logado como admin e recebe o CSS completo, enquanto o visitante recebe a versão otimizada do cache. Teste sempre em aba anonima e em mobile, já que o WP Rocket gera CSS usado separado para cada contexto.

O mega menu e o sticky header somem com o WP Rocket. Como resolver?

Esses elementos do Astra Pro aparecem após interacao, entao o WP Rocket muitas vezes não captura suas regras no CSS crítico. Adicione os seletores desses componentes na CSS safelist para garantir que o estilo deles nunca seja removido.

Grave

Como corrigir INP alto (Interaction to Next Paint) no WordPress

INP alto no WordPress é quando o Interaction to Next Paint, a métrica que mede o tempo entre o usuário interagir (clicar, tocar, digitar) e a página atualizar visualmente, passa de 200ms. Costuma vir de JavaScript pesado na thread principal, handlers de evento lentos e scripts de terceiros que travam a resposta às interações.

Grave

Como corrigir o erro de JavaScript ao combinar arquivos no WP Rocket

A opção Combine JavaScript Files do WP Rocket junta todos os scripts em um único arquivo; quando dois scripts dependem de ordem ou de uma variavel global, a juncao gera erro de JavaScript e quebra menu, carrossel, slider ou formulário. A correção e excluir o arquivo conflitante do combine.

Atenção

Como resolver cache que não limpa no WordPress

Cache que não limpa no WordPress é quando o site continua exibindo a versão antiga de uma página depois de você editá-la, porque alguma camada de cache não foi invalidada. Costuma vir de várias camadas empilhadas (plugin, servidor, CDN e navegador) em que purgar só uma delas deixa as outras servindo o conteúdo velho.

Grave

Como corrigir JavaScript do JetEngine removido pelo Perfmatters

O JavaScript do JetEngine removido pelo Perfmatters acontece quando o Delay JavaScript ou o Script Manager tira o jet-engine frontend.min.js e o jQuery da página. O resultado e Listing Grid vazio, JetSmartFilters que não filtra e Load More que não responde. A correção e excluir os scripts do JetEngine do delay, não desligar o Perfmatters.

Informativo

Como corrigir o erro ao desativar RSS Feeds no Perfmatters

O erro ao desativar RSS Feeds no Perfmatters acontece quando a opção Disable RSS Feeds, em Options, fica ativa e passa a redirecionar ou bloquear todas as URLs de feed do WordPress, derrubando integracoes que ainda dependem do RSS, como Mailchimp, FeedBurner, podcast e leitores de feed.

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.

Setores

Extensões

Integrações

Como corrigir o conflito de CSS otimizado entre Astra Pro e WP Rocket

O que é o conflito de CSS entre Astra e WP Rocket?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir INP alto (Interaction to Next Paint) no WordPress

Como corrigir o erro de JavaScript ao combinar arquivos no WP Rocket

Como resolver cache que não limpa no WordPress

Como corrigir JavaScript do JetEngine removido pelo Perfmatters

Como corrigir o erro ao desativar RSS Feeds no Perfmatters

Como corrigir scripts que não carregam pelo Script Manager do 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