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

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

Erros relacionados

- [Como corrigir TBT alto e JavaScript bloqueante](https://full.services/wp-fixer/corrigir-tbt-alto-wordpress/)
- [Como corrigir INP alto (Interaction to Next Paint) no WordPress](https://full.services/wp-fixer/corrigir-inp-alto-wordpress/)
- [Como corrigir Eliminate render-blocking resources](https://full.services/wp-fixer/corrigir-render-blocking-resources-wordpress/)

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

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

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

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

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

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


## Código

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

**Fonte:** [web.dev — How the size of the DOM affects interactivity (Google)](https://web.dev/articles/dom-size-and-interactivity)