Perfmatters e Elementor: corrigir conflito de JS

Tipo Performance & Velocidade

Nome do erro Conflito de JavaScript entre Perfmatters e Elementor EN: Perfmatters JavaScript conflict with Elementor

Severidade Grave

Descrição 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.

O que é o conflito de JavaScript entre Perfmatters e Elementor?

O conflito de JS entre Perfmatters e Elementor acontece porque os dois disputam quando o JavaScript do construtor pode rodar. O Elementor monta cada página no carregamento usando scripts próprios, principalmente o frontend.min.js, o webpack.runtime.min.js e dependencias como jQuery, imagesloaded e o SmartMenus do menu de navegação. O Perfmatters, para acelerar o site, usa o recurso Delay JavaScript, que remove os scripts da cascata de carregamento e so os executa na primeira interacao do usuário (mover o mouse, rolar ou tocar). O Defer JavaScript faz algo parecido, empurrando os scripts para o fim do carregamento.

Quando essas otimizacoes atingem exatamente os arquivos de que o Elementor depende para renderizar, o construtor inicializa tarde demais ou fora de ordem. Por isso o editor pode travar em carregamento, o menu mobile abre so no segundo toque e widgets com animacao ficam sem efeito até o usuário interagir. Nenhum dos plugins esta com defeito: o Perfmatters apenas não sabe, sozinho, que aqueles scripts são criticos para a renderizacao. A documentação oficial do Perfmatters trata o Elementor como um caso que exige exclusoes, justamente por ser um construtor pesado em JavaScript. A FULL configura esse par de forma conjunta nos sites que gerencia, em vez de tratar cada plugin isoladamente.

Como identificar

O editor do Elementor não abre depois de ativar o Delay JavaScript: a tela fica presa em “Carregando” ou em branco.
O menu mobile (hamburguer) so abre no segundo toque, porque o script que controla o clique ainda esta adiado.
Sliders, carrosseis e o Swiper do Elementor não deslizam até o usuário interagir com a página.
Animacoes de entrada, efeito sticky e popups do Elementor PRO não disparam no primeiro paint.
O console do navegador mostra a mensagem “elementorFrontend is not defined” ou “jQuery is not defined” enquanto o script esta adiado.
A página aparece sem estilo ou com layout deslocado por um instante antes de o usuário rolar ou mover o mouse.

Como prevenir

Marque a Quick Exclusion do Elementor no Perfmatters antes de ligar o Delay all scripts em producao, em vez de descobrir os scripts quebrados um a um
Mantenha desligado o recurso de combinar JavaScript de qualquer outro plugin de cache, porque o Perfmatters exige o combine desligado para o Delay JavaScript funcionar
Sempre que instalar um novo addon ou widget do Elementor, teste o frontend em aba anonima e confira o console antes de confiar nas exclusoes antigas
Após cada mudanca no Delay ou no Defer, limpe o cache e valide menu, slider e animacao na página pública, nunca apenas dentro do editor do Elementor

Causa

O Delay JavaScript do Perfmatters esta no modo Delay all scripts e remove o frontend.min.js do Elementor da cascata, fazendo o construtor so inicializar na primeira interacao do usuário.
Os arquivos webpack.runtime.min.js e webpack-pro.runtime.min.js, que carregam os módulos do Elementor, foram adiados e o frontend.min.js falha porque sua dependencia ainda não executou.
O jquery.min.js foi adiado pelo delay e os scripts do Elementor que dependem de jQuery quebram com "jQuery is not defined" no console.
O jquery.smartmenus.min.js, que controla o menu de navegação do Elementor, esta adiado e por isso o menu mobile so responde no segundo toque.
O Defer JavaScript empurrou os scripts do Elementor para o fim do carregamento e a ordem de execução do construtor saiu da sequencia esperada.
O recurso de combinar JavaScript de outro plugin de cache esta ligado junto com o Delay, e o Perfmatters exige que o combine esteja desligado para o delay funcionar.

Como resolver

Confirme que o problema vem do Perfmatters: antes de mexer em exclusoes, prove que a causa e a otimização de JavaScript. Abra uma página afetada e desligue temporariamente o Delay JavaScript no Perfmatters. Se o editor volta a abrir e o menu funciona no primeiro toque, esta confirmado que o delay e a causa, e não um bug do Elementor.
```
Perfmatters -> JavaScript -> Delay -> desligar Delay JavaScript
Perfmatters -> JavaScript -> Defer -> desligar Defer JavaScript (teste)
```
Use a Quick Exclusion do Elementor: religue o Delay JavaScript e use a exclusão em um clique do Perfmatters. Quando o Elementor esta ativo, o Perfmatters mostra uma Quick Exclusion pronta na seção de delay, que aplica de uma vez a lista de scripts que o construtor precisa. Marque essa opção antes de adicionar qualquer exclusão manual.
```
Perfmatters -> JavaScript -> Delay -> Delay all scripts
Perfmatters -> JavaScript -> Delay -> Quick Exclusions -> marcar Elementor
```
Adicione as exclusoes manuais do Elementor no Delay: se ainda houver widget quebrado depois da Quick Exclusion, cole a lista de exclusoes do Elementor na caixa Excluded from delay. Cada linha e um trecho do caminho ou do nome do script que o Perfmatters deixa de adiar. A lista abaixo e a recomendada pela documentação oficial do Perfmatters para Elementor.

Perfmatters -> JavaScript -> Delay -> Excluded from delay (uma por linha):

jquery.min.js
jquery.smartmenus.min.js
jquery.sticky.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
/elementor/assets/js/frontend.min.js
/elementor-pro/assets/js/frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js

Resolva o widget de busca e o indice de conteúdo: alguns elementos do Elementor precisam de exclusoes extras além da lista principal. Se a busca do Elementor parar, adicione os handles do webpack e do SmartMenus. Se o widget de indice (table of contents) não montar, exclua os scripts de hooks, i18n e waypoints que ele usa.

Busca do Elementor (Excluded from delay):

webpack-pro.runtime.min.js
elements-handlers.min.js
jquery.smartmenus.min.js

Indice de conteúdo do Elementor (Excluded from delay):

/wp-includes/js/dist/hooks.min.js
/wp-includes/js/dist/i18n.min.js
/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js

Conserte o menu mobile de dois toques: se o menu hamburguer continua abrindo so no segundo toque mesmo com as exclusoes certas, ligue o Disable Click Delay nas opções avancadas. Esse ajuste impede o Perfmatters de esperar todo o JavaScript carregar antes de responder ao primeiro toque, o que também ajuda a métrica de Interaction to Next Paint.
```
Perfmatters -> Options -> Show Advanced Options
Perfmatters -> JavaScript -> Disable Click Delay -> ligar
Salvar alterações
```
Limpe o cache e valide no frontend: depois de cada ajuste, limpe o cache do plugin de cache em uso e recarregue a página pública em uma aba anonima, não o editor. Confira no console do navegador se as mensagens elementorFrontend is not defined sumiram e teste menu, slider e animacao antes de confiar na configuração.
```
Limpar cache do plugin de cache em uso
Recarregar a página pública em aba anonima
Abrir o console do navegador e confirmar zero erro de elementorFrontend
```

HTML

# === Perfmatters > JavaScript > Delay > Excluded from delay ===
# Cole uma linha por exclusao. Tira esses scripts do Delay JavaScript
# para o Elementor inicializar a tempo (editor, menu, sliders, animacoes).
jquery.min.js
jquery.smartmenus.min.js
jquery.sticky.min.js
webpack.runtime.min.js
webpack-pro.runtime.min.js
/elementor/assets/js/frontend.min.js
/elementor-pro/assets/js/frontend.min.js
frontend-modules.min.js
elements-handlers.min.js
elementorFrontendConfig
ElementorProFrontendConfig
imagesloaded.min.js

# === Widget de indice (table of contents) do Elementor — exclusoes extras ===
/wp-includes/js/dist/hooks.min.js
/wp-includes/js/dist/i18n.min.js
/wp-content/plugins/elementor/assets/lib/waypoints/waypoints.min.js

# === Mesma lista tambem em Defer, se o Defer JavaScript estiver ligado ===
# Perfmatters > JavaScript > Defer > Excluded from defer

Perguntas frequentes

Preciso desligar o Perfmatters para usar o Elementor?

Não. Os dois funcionam juntos quando você exclui os scripts do Elementor do Delay JavaScript. Desligar o Perfmatters serve so como teste para confirmar que o delay e a causa. Depois disso, religue o recurso e aplique as exclusoes, assim você mantem o ganho de performance sem quebrar o construtor.

Qual recurso do Perfmatters mais quebra o Elementor?

O Delay JavaScript no modo Delay all scripts. Ele remove o frontend.min.js e o webpack.runtime do Elementor da cascata e so os executa na primeira interacao do usuário, o que faz o editor não abrir e o menu responder no segundo toque. O Defer JavaScript também pode interferir, mas o delay e o que mais costuma quebrar a renderizacao.

Por que o editor do Elementor não abre depois de ligar o Delay JavaScript?

Porque o Delay JavaScript segura o frontend.min.js e o webpack.runtime.min.js do Elementor até o usuário interagir com a página, e o editor depende desses scripts para montar. Marque a Quick Exclusion do Elementor no Perfmatters ou adicione o caminho /elementor/assets/js/frontend.min.js na caixa Excluded from delay e limpe o cache.

O menu mobile do Elementor abre so no segundo toque. Como corrigir?

O script que controla o menu, o jquery.smartmenus.min.js, esta sendo adiado pelo delay. Adicione jquery.smartmenus.min.js na caixa Excluded from delay e, se o atraso continuar, ligue o Disable Click Delay nas opções avancadas do Perfmatters. Esse ajuste também ajuda a métrica de Interaction to Next Paint.

O console mostra elementorFrontend is not defined. O que isso significa?

Significa que o script frontend.min.js do Elementor foi adiado pelo Delay JavaScript e ainda não executou quando outro código tentou usa-lo. Adicione o frontend.min.js e o elementorFrontendConfig a caixa Excluded from delay para o construtor inicializar a tempo, depois limpe o cache e recarregue a página em aba anonima.

Tenho de excluir os mesmos scripts no Delay e no Defer?

Sim, se você usa os dois recursos. O Delay JavaScript e o Defer JavaScript agem em momentos diferentes do carregamento, entao a mesma lista de scripts do Elementor deve entrar na caixa Excluded from delay e na caixa Excluded from defer. Se so o delay estiver ligado, basta a primeira caixa.

As animacoes do Elementor pararam de funcionar. E o Perfmatters?

Provavelmente sim. As animacoes dependem do frontend.min.js, do frontend-modules.min.js e do imagesloaded.min.js, que o Delay JavaScript adia. Cole a lista completa de exclusoes do Elementor na caixa Excluded from delay e limpe o cache. As animacoes voltam porque os scripts passam a carregar no momento certo, em vez de so na interacao.

Por que o Perfmatters pede para desligar o combinar JavaScript?

Porque o Delay JavaScript precisa enxergar cada script separadamente para decidir o que adiar. Quando outro plugin de cache combina vários arquivos em um so, o Perfmatters não consegue isolar o frontend.min.js do Elementor das exclusoes. Desligue o combinar JavaScript no plugin de cache antes de configurar o delay.

Informativo

Como corrigir o aviso de formatos de imagem (WebP/AVIF) no WordPress

Servir cada imagem WebP no WordPress significa entregar versões WebP ou AVIF ao navegador no lugar de JPEG e PNG. O aviso aparece quando o site não gera nem entrega esses formatos, porque o nucleo do WordPress aceita upload de WebP mas não converte as imagens JPEG e PNG já existentes nem decide a entrega por navegador.

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.

Atenção

Como corrigir o erro de permissão ao limpar o banco no WP-Optimize

O erro de permissão no banco do WP-Optimize trava a limpeza quando o usuário MySQL definido no wp-config.php não tem o privilégio que o comando OPTIMIZE TABLE exige para recriar a tabela. O plugin marca cada otimização como falha e o overhead não cai. A correção é conceder o GRANT correto ao usuário do banco.

Grave

Como corrigir o cache do WP Rocket em páginas dinâmicas do WooCommerce

O cache do WP Rocket no WooCommerce mostra carrinho, total ou estoque desatualizados quando uma página dinâmica é servida como HTML estático. O WP Rocket exclui carrinho, checkout e minha conta automaticamente, mas páginas customizadas ou cookies próprios precisam de exclusão manual.

Atenção

Como corrigir o CDN Rewrite que não altera URLs no Perfmatters no WordPress

O Perfmatters CDN Rewrite não funciona quando a opção Enable CDN Rewrite esta desligada, a CDN URL esta preenchida errada, ou os assets ficam fora das Included Directories, fazendo o HTML continuar servindo arquivos do domínio original em vez do CDN.

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.

Setores

Extensões

Integrações

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

O que é o conflito de JavaScript entre Perfmatters e Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o aviso de formatos de imagem (WebP/AVIF) no WordPress

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

Como corrigir o erro de permissão ao limpar o banco no WP-Optimize

Como corrigir o cache do WP Rocket em páginas dinâmicas do WooCommerce

Como corrigir o CDN Rewrite que não altera URLs no Perfmatters no WordPress

Como corrigir CLS alto e layout shift 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