DOM size grande no Elementor: como reduzir as divs

Tipo Performance & Velocidade

Nome do erro DOM size grande no Elementor EN: Avoid an excessive DOM size

Severidade Atenção

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

O que é DOM size grande do Elementor?

O DOM size grande do Elementor e a quantidade excessiva de elementos HTML que a página renderiza, medida pela auditoria do Lighthouse chamada Avoid an excessive DOM size. Segundo a documentação do Google no web.dev, o Lighthouse alerta quando o body passa de aproximadamente 800 nos e aponta erro acima de aproximadamente 1.400 nos, além de avaliar a profundidade maxima da arvore e o número máximo de filhos por elemento. Um DOM grande aumenta o consumo de memória do navegador, encarece o calculo de estilos e o reflow de layout e prejudica a interatividade da página.

No Elementor o problema e estrutural. O modelo antigo de sections e colunas envolve cada bloco em várias camadas de div aninhadas (a section, o wrapper interno da section, a coluna e o wrapper interno da coluna), antes mesmo de chegar ao widget. Quando uma página tem muitas sections, colunas e widgets, esses wrappers se multiplicam e o total de nos dispara, derrubando a nota de performance no PageSpeed Insights mesmo com cache e imagens otimizadas.

Como identificar

O PageSpeed Insights ou o Lighthouse exibem a auditoria ‘Avoid an excessive DOM size’ com um número alto de elementos (por exemplo 1.500 ou 2.000 nos) na página feita com Elementor.
A auditoria reporta uma profundidade maxima da arvore DOM elevada e um elemento com muitos filhos, apontando o container do conteúdo do Elementor.
A página abre visualmente leve, mas a nota de performance no mobile fica baixa e a métrica de interatividade (TBT ou INP) piora conforme o layout cresce.
Ao inspecionar o código no navegador, cada bloco do Elementor aparece envolto em múltiplas divs aninhadas (section, wrapper, coluna, wrapper) antes do conteúdo visivel.
Templates longos, páginas com muitas seções repetidas ou loops de posts montados com sections e colunas tem o DOM crescendo de forma proporcional ao número de blocos.

Antes de começar: Antes de ativar o Optimized Markup ou migrar sections para Container em producao, faça um backup completo do site (arquivos e banco de dados) ou teste primeiro em um ambiente de staging. A remoção de wrappers internos e a troca de estrutura podem afetar CSS personalizado que mira essas divs, e a reconstrucao de seções precisa de conferencia visual antes de publicar.

Como prevenir

Construa novas páginas com Container (Flexbox) desde o inicio, em vez de sections e colunas, para nascer com menos divs aninhadas.
Mantenha o Optimized Markup ativo em Elementor -> Configurações -> Performance como padrão do site, validando o CSS personalizado em staging.
Monitore a auditoria ‘Avoid an excessive DOM size’ no PageSpeed após publicar páginas longas, mantendo o body abaixo do aviso de cerca de 800 nos sempre que possível.
Evite addons que injetam marcacao pesada e prefira widgets nativos enxutos, revisando a arvore no Navigator antes de finalizar layouts complexos.

Causa

A página foi montada com o modelo antigo de sections e colunas do Elementor, que envolve cada bloco em várias divs aninhadas (wrapper da section, coluna e wrapper da coluna) antes do widget, multiplicando os nos do DOM.
O recurso Optimized Markup do Elementor, que remove o div wrapper interno de containers e widgets, esta desligado em Elementor -> Configurações -> Performance, deixando a marcacao com mais elementos do que o necessário.
Cada widget recebe wrappers extras de estilo e o uso intenso de Inner Sections (seção dentro de seção) para alinhar conteúdo dobra a quantidade de divs em cada bloco.
Loops de listagem (Loop Grid, posts ou produtos) repetem a mesma estrutura de container e widgets dezenas de vezes na mesma página, somando centenas de nos ao total medido pelo Lighthouse.
Widgets de terceiros e addons do Elementor (sliders, mega menus, tabs) injetam marcacao duplicada ou nos ocultos que continuam contando para o DOM mesmo sem aparecer na tela.

Como resolver

Meça o DOM atual no Lighthouse: Antes de mexer no layout, rode o PageSpeed Insights na URL afetada e abra a auditoria Avoid an excessive DOM size para anotar o total de elementos, a profundidade maxima e o elemento com mais filhos. Segundo o Google no web.dev, acima de cerca de 800 nos já e aviso e acima de cerca de 1.400 e erro. Esse número e a sua linha de base para comparar depois.
```
Acesse pagespeed.web.dev e análise a URL no modo Mobile
Abra a auditoria 'Avoid an excessive DOM size' e anote: Total DOM Elements, Maximum DOM Depth e Maximum Child Elements
```
Ative o Optimized Markup do Elementor: O Optimized Markup remove o div wrapper interno de containers e widgets, reduzindo o número de nos sem mudar o layout. Ative o recurso e rode o Lighthouse de novo para confirmar a queda no total de elementos. Atenção: CSS personalizado que mira esses wrappers internos pode precisar de ajuste após a mudanca.
```
Painel WP -> Elementor -> Configurações -> aba Performance
Ative a opção 'Optimized Markup' (ou 'Optimized DOM Output' em versões anteriores, na aba Recursos)
Salve e limpe o cache do site
```
Migre sections e colunas para Container (Flexbox): O Container do Elementor substitui o par section mais coluna por um único elemento flexivel, eliminando os wrappers aninhados que mais inflam o DOM. Ative o recurso e reconstrua as seções mais pesadas usando Container no lugar de section com colunas. Esse e o ganho estrutural maior em páginas com muitos blocos.
```
Painel WP -> Elementor -> Configurações -> aba Recursos (Features)
Garanta que o recurso 'Flexbox Container' esteja Ativo
No editor, recrie as seções mais densas usando Container em vez de Section + Column
```
Enxugue Inner Sections e wrappers desnecessarios: Reveja o layout e elimine Inner Sections usadas so para alinhar conteúdo, colunas vazias e blocos aninhados sem função. Cada camada removida tira várias divs do DOM. Prefira ajustar alinhamento com as opções de flex do próprio Container em vez de criar novos níveis.
```
No editor Elementor, use o Navegador (Navigator) para ver a arvore de elementos
Remova Inner Sections e colunas vazias usadas apenas para espaçamento
Use o alinhamento Flexbox do Container no lugar de aninhar novas seções
```
Reduza a repeticao em loops e templates: Em Loop Grid, listas de posts ou produtos, simplifique o template do item para conter o mínimo de elementos, já que ele se repete por linha. Limite o número de itens exibidos por página e pagine o restante. Menos elementos por item, multiplicado pela repeticao, derruba bastante o total de nos.
```
Abra o template do Loop Item e remova widgets e wrappers não essenciais
Defina um limite de itens por página (paginação) no widget de loop
Rode o Lighthouse de novo e compare o Total DOM Elements com a linha de base do passo 1
```

PHP

<?php
// Conta os elementos do DOM no rodape do front-end (apenas para diagnostico).
// Use em ambiente de staging; remova depois de medir.
add_action( 'wp_footer', 'full_debug_dom_count', 999 );
function full_debug_dom_count() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var total = document.getElementsByTagName('*').length;
        var aviso = total > 800;
        var erro  = total > 1400;
        console.log('[FULL] Total DOM elements: ' + total +
            (erro ? ' (ERRO: acima de ~1400)' : aviso ? ' (AVISO: acima de ~800)' : ' (OK)'));
    });
    </script>
    <?php
}

Perguntas frequentes

O que significa DOM size grande no Elementor

Significa que a página renderiza elementos HTML demais. O Lighthouse mede isso na auditoria Avoid an excessive DOM size e, segundo o Google no web.dev, sinaliza aviso acima de cerca de 800 nos e erro acima de cerca de 1.400. No Elementor o número cresce porque cada bloco ganha várias divs aninhadas.

Por que o Elementor gera tantas divs na página

O modelo antigo de sections e colunas envolve cada bloco em camadas: o wrapper da section, a coluna e o wrapper interno, antes do widget. Quando a página tem muitas sections e colunas, esses wrappers se multiplicam e o total de elementos do DOM dispara.

O recurso Container do Elementor reduz o DOM

Sim. O Container baseado em Flexbox substitui o par de section mais coluna por um único elemento flexivel, eliminando os wrappers aninhados que mais inflam o DOM. Reconstruir as seções pesadas com Container costuma ser o maior ganho estrutural na contagem de nos.

O que faz o Optimized Markup do Elementor

O Optimized Markup remove o div wrapper interno de containers e widgets, reduzindo o número de elementos sem alterar o layout visivel. Ele fica em Elementor, Configurações, aba Performance. Após ativar, confira o CSS personalizado que possa mirar esses wrappers internos.

Qual o limite de elementos do DOM recomendado

O Lighthouse considera bom manter o body abaixo de cerca de 800 nos. Acima disso ele exibe aviso e, acima de cerca de 1.400 nos, aponta erro. A auditoria também avalia a profundidade maxima da arvore e o número máximo de filhos de um elemento.

Um DOM grande prejudica o PageSpeed e a interatividade

Sim. Segundo o Google no web.dev, uma arvore DOM grande aumenta o uso de memória, encarece o calculo de estilos e o reflow de layout e degrada a interatividade. Isso piora métricas como TBT e INP e derruba a nota de performance mesmo com cache ativo.

Loops de posts no Elementor aumentam o DOM

Aumentam. Um Loop Grid repete a estrutura do item por linha, entao cada div extra no template do item e multiplicada por dezenas de itens. Simplifique o template do loop e limite os itens por página com paginação para conter o total de nos.

Preciso reconstruir o site inteiro para reduzir o DOM

Não. Comece ativando o Optimized Markup e migrando apenas as páginas e seções mais pesadas para Container, medindo o resultado no Lighthouse a cada mudanca. A reconstrucao pode ser gradual, priorizando os templates de maior tráfego.

Informativo

Como corrigir a remoção de query strings que não funciona no Perfmatters

A remoção de query strings do Perfmatters falha quando a opção continua desativada, o cache não foi limpo após ativar, ou os assets que ainda exibem o ?ver= são externos ou enfileirados fora dos filtros style_loader_src e script_loader_src que o Perfmatters intercepta.

Grave

Como corrigir erros de integração entre WP Rocket e Cloudflare

A integração entre WP Rocket e Cloudflare falha quando as duas camadas otimizam os mesmos arquivos ou quando o add-on não autentica. O resultado é JavaScript quebrado, CSS sem aplicar ou cache que não limpa.

Atenção

Como corrigir o cache do WP Rocket que quebra listings do JetEngine no WordPress

O cache do WP Rocket que quebra listings do JetEngine acontece quando otimizacoes como Delay JavaScript Execution, Remove Unused CSS e o cache de página servem uma versão estática que não executa o JavaScript ou não carrega o CSS de que o Listing Grid e o JetSmartFilters precisam para renderizar conteúdo dinâmico.

Crítico

Como corrigir scripts essenciais do WooCommerce removidos pelo Perfmatters

Scripts do WooCommerce removidos pelo Perfmatters acontecem quando o Script Manager desativa assets como wc-cart-fragments, woocommerce e wc-checkout marcados como Everywhere, em vez de Current URL. Sem esses arquivos, o carrinho Ajax para de atualizar e o checkout fica sem o JavaScript que processa o pedido.

Atenção

Como corrigir o Lazy Load do WP Rocket em imagens do Elementor

O LazyLoad do WP Rocket troca o src das imagens por um placeholder SVG e so carrega a imagem real quando ela chega ao viewport. Em imagens de fundo e widgets do Elementor que usam CSS inline ou JavaScript, essa troca falha e a imagem fica em branco ou não aparece.

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.

Setores

Extensões

Integrações

Como corrigir o DOM size grande do Elementor no WordPress

O que é DOM size grande do Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir a remoção de query strings que não funciona no Perfmatters

Como corrigir erros de integração entre WP Rocket e Cloudflare

Como corrigir o cache do WP Rocket que quebra listings do JetEngine no WordPress

Como corrigir scripts essenciais do WooCommerce removidos pelo Perfmatters

Como corrigir o Lazy Load do WP Rocket em imagens do Elementor

Como corrigir o conflito de JavaScript entre Perfmatters e Elementor

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