O problema oculto: DOM excessivo

O Elementor gera HTML com muitas camadas de wrappers. Uma seção simples com um título e um parágrafo pode gerar 8-12 elementos HTML aninhados. Uma página com 10 seções pode facilmente ter mais de 1.500 nós no DOM.

O Google recomenda menos de 1.400 nós no DOM para boa performance. Sites Elementor típicos chegam a 2.000-4.000 nós. Isso afeta diretamente o LCP (tempo de carregamento), o INP (responsividade) e o CLS (estabilidade visual).

CSS não usado — o outro grande problema

O Elementor carrega seu CSS completo em todas as páginas, mesmo que a página use apenas 20% dos widgets disponíveis. Um site com o Elementor Pro ativo carrega facilmente 200-400KB de CSS que nunca é usado naquela página específica.

Isso atrasa o LCP porque o browser precisa baixar, parsear e processar todo esse CSS antes de renderizar a página.

Como reduzir com as configurações nativas do Elementor

O Elementor tem uma opção para carregar apenas o CSS dos widgets usados em cada página:

1. No painel WordPress, vá em Elementor → Configurações → Avançado
2. Em "Modo de carregamento do CSS", selecione "Arquivo externo por post"
3. Clique em Salvar e depois em Regenerar arquivos CSS

Isso faz o Elementor gerar um arquivo CSS separado para cada página, contendo apenas os estilos dos widgets presentes naquela página. A redução pode ser de 60-80% no tamanho do CSS.

Scripts JavaScript do Elementor

O Elementor carrega vários scripts JS por padrão, mesmo em páginas que não usam elementos interativos:

• elementor-frontend.min.js — core do frontend (necessário)
• elementor-waypoints.js — para animações de entrada
• swiper.js — para carrosséis e sliders
• jquery — dependência base

Reduzir scripts desnecessários

No Elementor → Configurações → Avançado:

• "Desativar fonts do Google" — se você já carrega as fontes de outra forma ou usa fontes do sistema
• "Melhorar a carga do CSS e JS" — carrega scripts de forma mais eficiente
• "Otimização de carregamento" (Elementor Pro) — adia carregamento de widgets não utilizados

Widgets que mais impactam a performance

1. Slider/Carrossel

Sliders carregam o Swiper.js (80KB+) e geralmente incluem imagens não otimizadas. Considere substituir por uma sequência estática de imagens com lazy loading, ou usar a tag <video> para animações simples.

2. Popup / Lightbox

Popups Elementor carregam o JavaScript de interação mesmo em páginas onde o popup nunca vai aparecer. Se o popup só aparece em conversão, considere uma solução JavaScript simples nativa em vez do widget do Elementor.

3. Google Maps

O widget de mapa do Elementor carrega a API do Google Maps de forma imediata, adicionando 200-300KB ao carregamento inicial. Use um iframe simples com o mapa embutido do Google, que carrega lazy, ou uma imagem estática do mapa que abre o Google Maps ao clicar.

4. Formulários com muitos campos

O Elementor Form carrega suas próprias dependências de validação. Para formulários simples, Contact Form 7 com carregamento condicional costuma ser mais leve.

Configurações experimentais de performance

O Elementor tem recursos experimentais que podem melhorar significativamente a performance. Acesse em Elementor → Configurações → Recursos (Features):

• "Otimização de carregamento" — carrega assets do Elementor somente em páginas que usam o builder
• "Container flexbox" — substitui as seções/colunas clássicas por containers flexbox com menos wrappers HTML, reduzindo o DOM significativamente
• "Lazy load de background" — aplica lazy loading em imagens de fundo (background-image) do CSS

Imagens no Elementor — o problema mais comum

O Elementor facilita arrastar imagens grandes direto do editor, sem qualquer alerta de peso. O resultado são imagens de 2-5MB sendo carregadas no hero ou em seções de destaque.

Para cada imagem adicionada via Elementor:

• Comprima para WebP (use o Squoosh.app ou ShortPixel)
• Dimensione para no máximo o dobro do tamanho de exibição (para Retina)
• Ative lazy loading em imagens que não são LCP (não no hero)
• Defina dimensões explícitas para evitar CLS

Checklist de otimização Elementor

• CSS: configurar "Arquivo externo por post" e regenerar
• Medir DOM — manter abaixo de 1.400 nós
• Ativar "Otimização de carregamento" nas Features
• Comprimir todas as imagens para WebP
• Substituir Sliders por imagens estáticas (se possível)
• Substituir mapa embed por imagem + link ao Maps
• Testar no PageSpeed Insights após cada mudança
• Verificar Core Web Vitals com dados de campo (não só laboratório)

Quando considerar migrar para fora do Elementor

Nem sempre a solução é otimizar o Elementor. Considere migrar para um tema mais leve ou construção customizada quando:

• Nota no PageSpeed está abaixo de 50 em mobile mesmo após otimizações
• O LCP está acima de 4 segundos consistentemente
• O site é um e-commerce WooCommerce de alta conversão (onde cada 100ms impacta diretamente vendas)
• A equipe tem capacidade de manter HTML/CSS customizado

Perguntas frequentes

Elementor Pro é mais rápido que a versão gratuita?

O Elementor Pro tem mais funcionalidades de otimização (como carregamento condicional de assets e otimização de carregamento nas Features). Mas sem configuração adequada, o Pro pode ser ainda mais pesado que o gratuito, pois carrega mais funcionalidades. A diferença de performance vem da configuração, não apenas da versão.

WP Rocket resolve os problemas de performance do Elementor?

Parcialmente. O WP Rocket ajuda com cache de página, minificação de CSS/JS, lazy loading e prefetch. Mas não resolve o DOM excessivo nem o CSS não usado do Elementor — esses precisam ser tratados nas configurações do próprio Elementor. Os dois juntos se complementam bem, mas não substituem a necessidade de construir páginas mais limpas.

Qual a nota mínima no PageSpeed para não prejudicar o SEO?

O Google não usa a nota do PageSpeed diretamente — usa os Core Web Vitals (LCP, INP, CLS) medidos com dados reais de usuários (CrUX). A meta é LCP < 2.5s, INP < 200ms e CLS < 0.1. Uma nota de 70+ no PageSpeed geralmente indica que os Core Web Vitals estão em bom estado, mas sempre valide com o Google Search Console → Experiência da Página.

Conclusão

A lentidão em sites Elementor raramente tem uma causa única — é a combinação de DOM excessivo, CSS não usado, imagens pesadas e scripts de terceiros. O caminho é atacar cada problema de forma isolada:

1. Configure o CSS por post no Elementor e regenere os arquivos
2. Ative as Features experimentais de performance
3. Comprima e otimize todas as imagens
4. Elimine widgets pesados desnecessários (slider, mapa, popup)
5. Meça com PageSpeed Insights após cada mudança