# 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.

## 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

Erros relacionados

- [Como corrigir scripts essenciais do WooCommerce removidos pelo Perfmatters](https://full.services/wp-fixer/corrigir-scripts-woocommerce-perfmatters/)
- [Como corrigir o conflito entre Elementor e WP Rocket no WordPress](https://full.services/wp-fixer/corrigir-conflito-elementor-wp-rocket/)
- [Como corrigir o conflito de cache entre WP Rocket, LiteSpeed e Perfmatters](https://full.services/wp-fixer/corrigir-conflito-cache-wp-rocket-litespeed-perfmatters/)

## 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

1. 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)
```

2. 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
```

3. 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.
4. 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
```

5. 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.
6. Busca do Elementor (Excluded from delay):

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

7. 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
```

8. 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
```

9. 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
```


## Código

```markup
# === 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.

**Fonte:** [Perfmatters — How to delay JavaScript until user interaction (Common JS delay exclusions)](https://perfmatters.io/docs/delay-javascript/)