Conflito de cache WP Rocket e Elementor: como resolver

Tipo Performance & Velocidade

Nome do erro Conflito de cache entre WP Rocket e Elementor EN: WP Rocket cache conflict with Elementor

Severidade Grave

Descrição O conflito de cache entre WP Rocket e Elementor quebra o layout no frontend quando o Remove Unused CSS remove os arquivos de CSS dinâmico do builder. A correção e adicionar os caminhos do Elementor ao campo Safelist de CSS e limpar o cache.

O que é conflito de cache WP Rocket Elementor?

O conflito de cache entre WP Rocket e Elementor acontece quando as otimizacoes de CSS e JavaScript do WP Rocket processam ou removem os arquivos que o Elementor gera dinamicamente por página (em wp-content/uploads/elementor/css/). O Elementor compila o estilo de cada página, post e Kit global em arquivos como post-123.css e global.css; quando o Remove Unused CSS, o Optimize CSS Delivery ou o Combine CSS interferem nesses arquivos, o navegador recebe a página sem as regras de estilo do builder.

Como identificar

Layout quebrado, sem espacamento e sem cores no frontend, enquanto o editor do Elementor mostra a página correta
Estilos retornam ao normal quando você limpa o cache do WP Rocket e somem de novo após alguns minutos (quando o Used CSS e regenerado)
No código-fonte da página aparece a tag inline ‘style id=wpr-usedcss’ e as folhas de estilo do Elementor (elementor-frontend, elementor-post-123) somem ou viram preload
Botões, acordeoes, abas e carrosseis do Elementor param de responder ao clique porque o Delay JavaScript Execution segura o elementor-frontend.js
O problema desaparece com o WP Rocket desativado e volta ao reativar o plugin
Mensagem ‘Used CSS is being generated’ no admin e a página segue sem estilo enquanto a fila assincrona não termina

Antes de começar: Faca backup do banco antes de mexer nas opções de otimização. As configurações do WP Rocket ficam na option wp_rocket_settings e um backup permite reverter para o estado anterior caso o Used CSS regenerado piore o layout.

Como prevenir

Sempre que editar uma página no Elementor, rode Elementor -> Tools -> Regenerate Files & Data e em seguida limpe o cache do WP Rocket, nessa ordem
Mantenha os caminhos do Elementor (elementor-frontend, elementor-post, elementor-global) fixos no CSS Safelist para que novas regeneracoes do Used CSS nunca removam o estilo do builder
Após atualizar o WP Rocket ou o Elementor, teste o frontend em uma janela anonima com cache limpo antes de considerar o deploy concluido
Use o modo Safe Mode do Elementor para confirmar que um problema de layout vem do cache e não de outro plugin antes de alterar as otimizacoes

Causa

A opção Remove Unused CSS (aba File Optimization) classifica o CSS dinâmico do Elementor como não utilizado e o remove, gerando o inline 'style id=wpr-usedcss' sem as regras do builder.
A opção Optimize CSS Delivery / Load CSS Asynchronously adia o carregamento das folhas do Elementor e a página renderiza antes do estilo chegar (FOUC e layout sem formatacao).
A opção Combine CSS files junta os arquivos por página do Elementor (post-ID.css e global.css) num único bundle que perde os caminhos relativos de fontes e icones.
A opção Delay JavaScript Execution segura o elementor-frontend.js e o frontend-modules.js até a interacao do usuário, travando widgets interativos (abas, acordeao, carrossel).
O cache do WP Rocket foi gerado antes do Elementor recompilar o CSS após uma edição (Regenerate CSS & Data), servindo uma versão antiga do estilo da página.
O Lazy Load do WP Rocket aplica a imagens de fundo definidas via CSS pelo Elementor, deixando seções inteiras sem background.

Como resolver

Confirme que a causa e o WP Rocket: No painel, va em Settings -> WP Rocket -> Dashboard e clique em Clear and preload cache. Se o layout voltar ao normal e quebrar de novo em poucos minutos, o conflito esta nas otimizacoes de CSS, não no Elementor.
Adicione o Elementor ao Safelist do Remove Unused CSS: Va em Settings -> WP Rocket -> File Optimization, role até Optimize CSS delivery e abra a área de texto CSS Safelist. Cole, uma por linha, as folhas e seletores do Elementor (elementor-frontend, elementor-post, elementor-global, e-flex). Salvar limpa e regenera o Used CSS com essas regras preservadas.
Exclua os scripts do Elementor do Delay JavaScript Execution: Ainda em File Optimization, na seção Delay JavaScript Execution, adicione na lista de exclusão os scripts do builder para que abas, acordeoes e carrosseis voltem a responder ao clique.
```
/elementor/assets/js/frontend
/elementor-pro/assets/js/
elementorFrontendConfig
```
Recompile o CSS do Elementor e limpe o cache do WP Rocket: Em Elementor -> Tools -> General clique em Regenerate Files & Data para reconstruir os arquivos em uploads/elementor/css, depois volte ao Dashboard do WP Rocket e clique em Clear and preload cache para servir o estilo atualizado.
Se persistir, isole a otimização culpada: Desative uma por vez Combine CSS files, Optimize CSS delivery e Lazy Load do CSS background, recarregando o frontend com cache limpo a cada teste, até identificar qual opção quebra o layout e manter so essa desligada.

HTML

elementor-frontend
elementor-frontend-inline
elementor-post-
elementor-global
elementor-pro
widget-
e-flex
e-con
elementor-kit-

Perguntas frequentes

Por que o site fica sem estilo so no frontend e o editor do Elementor continua normal?

O editor carrega o CSS direto do Elementor, sem passar pelas otimizacoes do WP Rocket. O frontend serve a versão em cache, onde o Remove Unused CSS removeu as folhas do builder. Por isso a quebra aparece so para o visitante.

Preciso desativar todo o WP Rocket para resolver o conflito com o Elementor?

Não. Na maioria dos casos basta adicionar os caminhos do Elementor ao CSS Safelist e excluir o elementor-frontend.js do Delay JavaScript Execution. Assim você mantem o cache e o ganho de velocidade sem quebrar o layout.

O que e a tag style id wpr-usedcss que aparece no código da página?

E o CSS inline que o Remove Unused CSS injeta após o título da página com apenas as regras que o WP Rocket julgou usadas. Quando ele descarta as regras dinâmicas do Elementor, esse bloco fica incompleto e o layout quebra.

Adicionei o Elementor ao Safelist e o layout continua quebrado, e agora?

Limpe o cache com Clear and preload cache para forcar a regeneracao do Used CSS. Se persistir, desative Combine CSS files e Optimize CSS delivery um de cada vez para identificar qual opção remove o estilo do builder.

Os botões e abas do Elementor pararam de funcionar depois do WP Rocket, por que?

O Delay JavaScript Execution segura o elementor-frontend.js até a primeira interacao do usuário. Excluir esse script da lista de Delay JavaScript faz os widgets interativos voltarem a responder normalmente.

O Lazy Load do WP Rocket pode quebrar imagens de fundo do Elementor?

Sim. Quando a imagem de fundo e definida via CSS pelo Elementor, o Lazy Load pode atrasar o carregamento e deixar a seção sem background. Desligar o Lazy Load para imagens via CSS ou excluir a seção resolve.

Devo limpar o cache do Elementor ou do WP Rocket primeiro?

Primeiro recompile no Elementor (Regenerate Files & Data) para reconstruir os arquivos de CSS por página, depois limpe o cache do WP Rocket. Inverter a ordem faz o WP Rocket cachear um CSS desatualizado.

O problema acontece também com o Elementor Pro e o Theme Builder?

Sim. Templates de header, footer e single do Theme Builder geram CSS próprio em uploads/elementor/css e sofrem o mesmo conflito. Inclua os caminhos elementor-pro e elementor-global no Safelist para proteger esses estilos.

Grave

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

O conflito de JS entre Perfmatters e Elementor surge quando o Delay JavaScript adia os scripts do construtor (frontend.min.js, jQuery) para depois da interacao do usuário. O resultado e editor que não abre, menu de dois toques e animacoes paradas. A correção e excluir os arquivos do Elementor 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.

Grave

Como corrigir CLS alto e layout shift no WordPress

CLS alto no WordPress é quando o Cumulative Layout Shift, a medida de quanto os elementos da página "pulam" durante o carregamento, fica acima de 0,1. Costuma vir de imagens e iframes sem dimensões reservadas, fontes que trocam de tamanho e anúncios ou banners injetados sem espaço fixo.

Atenção

Como corrigir o aviso de cache do navegador no WordPress

O aviso de browser caching no WordPress aparece quando os arquivos estáticos do site são servidos sem cabeçalho de validade (expires), forcando o navegador a baixar tudo de novo a cada visita. A correção e definir expires headers no servidor.

Atenção

Como corrigir o DOM size grande do Elementor no WordPress

O DOM size grande do Elementor acontece porque o modelo de sections e colunas envolve cada bloco em várias divs aninhadas, somando nos demais na página. O Lighthouse marca aviso acima de cerca de 800 elementos e erro acima de cerca de 1.400, o que pesa no PageSpeed e na interatividade.

Setores

Extensões

Integrações

Como corrigir conflitos de cache entre WP Rocket e Elementor

O que é conflito de cache WP Rocket Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

Como corrigir o erro ao desativar RSS Feeds no Perfmatters

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

Como corrigir CLS alto e layout shift no WordPress

Como corrigir o aviso de cache do navegador no WordPress

Como corrigir o DOM size grande do Elementor no WordPress

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