Corrigir o aviso avoid excessive-DOM size do Lighthouse

Última revisão por Arjen Karel em fevereiro de 2026

O que é o aviso 'avoid excessive-DOM size' do Lighthouse?

O que é o aviso avoid excessive-DOM size no Lighthouse? O Lighthouse sinaliza páginas que possuem qualquer um dos seguintes:

• mais de 1.500 nós DOM no total.
  Isso significa que existem mais de 1.500 elementos HTML na sua página.
• uma profundidade máxima de nós maior que 32 nós.
  Isso acontece quando um elemento está aninhado com 32 níveis de profundidade.
• um nó pai com mais de 60 nós filhos.
  Isso pode acontecer quando um elemento pai (como uma tabela ou uma lista) tem mais de 60 filhos (linhas de tabela ou elementos de lista).

Para colocar esses números em perspectiva: de acordo com o capítulo Markup do Web Almanac 2024, a página mediana tem 594 elementos DOM. No 90º percentil, esse número salta para 1.716, o que já excede o limite do Lighthouse. Cerca de 10% de todas as páginas na web acionam esse aviso.

Desde o Lighthouse 13 (outubro de 2025), essa auditoria evoluiu para o insight "Optimize DOM size". Agora ela é acionada com base em recálculos de estilo reais e trabalho de layout que excedem 40ms, não apenas em contagens estáticas de nós. Os limites acima ainda são relatados como pontos de referência.

Um lembrete rápido: o que é o DOM?

DOM significa Document Object Model. O DOM é uma representação de objeto estruturada em árvore do seu HTML onde cada elemento HTML (por exemplo: o body ou h1) é representado por seu próprio nó.

O que causa um tamanho excessivo do DOM?

Um tamanho excessivo do DOM pode ter várias razões. Um tamanho excessivo do DOM geralmente é causado por:

• Plugins mal codificados no seu CMS.
• Nós DOM criados por JavaScript.
• Page builders que geram HTML inchado (por exemplo: Elementor ou WP Bakery).
• Texto que é copiado e colado em um editor WYSIWYG (como TinyMCE).
• Codificação de template ruim.

O capítulo Markup do Web Almanac 2024 descobriu que apenas os elementos <div> representam 28,7% de todos os elementos da página. Essa "divitis" é uma grande contribuinte para tamanhos excessivos de DOM, especialmente na saída de page builders.

Como o tamanho excessivo do DOM afeta a velocidade da página?

Um DOM grande não impacta diretamente as métricas do Lighthouse. No entanto, ele torna a renderização de uma página da web desnecessariamente complicada, tornando quase impossível obter uma pontuação alta no Lighthouse. O seu navegador precisará de mais trabalho antes que a página possa ser exibida na tela. Existem 4 problemas com um DOM grande:

• O tamanho do seu HTML é maior porque seu código está inchado. Isso aumentará o tempo necessário para baixar a sua página.
• Um tamanho grande do DOM diminuirá a performance de renderização. O seu navegador precisa fazer mais cálculos (DOM) no primeiro carregamento e cada vez que um usuário ou um script interagir com a sua página.
• O seu navegador pode usar muito mais memória ao interagir com o DOM via JavaScript.
• Um DOM grande impacta diretamente o Interaction to Next Paint (INP). Toda vez que um usuário clica, toca ou digita, o navegador deve recalcular estilos e layout para os elementos afetados. Quanto mais nós DOM na página, mais tempo isso leva. Quando o recálculo de estilo afeta mais de 300 elementos ou leva mais de 40ms, torna-se um problema mensurável para o INP. É por isso que páginas com milhares de nós DOM frequentemente falham no INP, mesmo quando o seu JavaScript é rápido.

O aviso 'avoid excessive DOM size' muito provavelmente afetará indiretamente Core Web Vitals importantes como Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS). Mas o maior impacto é no INP, que é o Core Web Vital mais frequentemente reprovado.

Como corrigir 'avoid excessive-DOM size'

Para corrigir o aviso 'avoid excessive-DOM size' você primeiro precisará rastrear suas origens. O Lighthouse lhe dará uma indicação de onde a Profundidade Máxima do DOM (Maximum DOM Depth) e os Elementos Filhos Máximos (Maximum Child Elements) estão localizados. A partir daí você precisa fazer uma pequena busca. Use o Inspetor de DOM no Chrome DevTools e confira o DOM. Tente descobrir o que está criando um grande número de nós DOM. Existem 5 suspeitos habituais:

1. Plugins mal codificados no seu CMS.
   Quando um plugin, por exemplo um slider ou um plugin de calendário, cria uma grande quantidade de nós DOM você pode considerar substituir esse plugin por um plugin mais otimizado.
2. Nós DOM criados por JavaScript.
   Um JavaScript, por exemplo um widget de chat, pode injetar um grande número de nós DOM no DOM. Neste caso, remova o arquivo JavaScript ou encontre um substituto com a mesma funcionalidade.
3. Page builders que geram HTML inchado.
   Page builders como o Elementor ou WP Bakery frequentemente criam códigos inchados que têm um grande número de nós DOM. Não há uma solução fácil para isso. Page builders são frequentemente uma parte do fluxo de trabalho. A solução inclui limpar o seu código inchado e mudar o seu fluxo de trabalho.
4. Texto que é copiado e colado em um editor WYSIWYG.
   A maioria dos editores WYSIWYG como o TinyMCE faz um trabalho ruim ao limpar código colado, especialmente quando colado de outra fonte de rich text como o Microsoft Word. Ele não apenas copiará o texto, mas também os estilos. Esses estilos podem estar embutidos em um grande número de nós DOM. A solução para esse problema é simples. Pare de colar conteúdo no seu editor e limpe páginas que já possuem texto colado e inchado.
5. Codificação (de template) ruim.
   Quando um tamanho grande do DOM é criado pelo seu editor ou causado pelo seu template, as coisas podem ficar feias. Isso significa que o código inchado é parte do núcleo do seu site. Você precisará trocar de editores, reescrever partes do seu template ou até mesmo começar do zero.

Técnicas para reduzir o impacto de um DOM grande

Às vezes não é possível remover o tamanho excessivo do DOM sem reescrever grandes partes do seu site e mudar todo o seu fluxo de trabalho. Existem várias técnicas para diminuir o impacto de um tamanho excessivo do DOM:

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Lazy load de partes da sua página da web.
  Para acelerar a renderização inicial, você pode considerar aplicar o lazy load em partes do seu site. Por exemplo, o rodapé.
• Use content-visibility: auto para pular a renderização de conteúdo fora da tela.
  A propriedade CSS content-visibility diz ao navegador para pular estilização, layout e pintura de elementos fora da tela até que o usuário role a página para perto deles. Atualmente ela tem 93% de suporte dos navegadores (Chrome 85+, Firefox 125+, Safari 18+). Sempre emparelhe-a com contain-intrinsic-size para evitar layout shifts:
• Divida páginas grandes em várias páginas.
  Dividir páginas grandes em várias páginas pode reduzir o número de nós DOM quando o próprio conteúdo cria muitos nós DOM.
• Implemente virtual scrolling.
  Para listas longas, tabelas de dados ou galerias de imagens, o virtual scrolling renderiza apenas os itens visíveis na viewport. Bibliotecas como react-window (React) e o módulo CDK Virtual Scrolling (Angular) mantêm a contagem de nós DOM em apenas os itens visíveis (tipicamente 10 a 30 nós) em vez de milhares.
• Evite JavaScript de uso intensivo de memória.
  Ao lidar com uma grande quantidade de nós DOM na sua página, seja extremamente cuidadoso com o JavaScript. document.getElementsByTagName('div'); pode carregar um grande número de nós DOM, o que aumenta o uso de memória.
• Evite declarações CSS complicadas.
  Ao lidar com uma grande quantidade de nós DOM na sua página, seja extremamente cuidadoso com declarações CSS complicadas. div:last-child; precisa verificar o status de last-child para cada div na sua página. Seletores mais simples significam menos trabalho de travessia para o navegador. Isso é mais importante para o INP, onde cada milissegundo de recálculo de estilo conta.

Após reduzir o tamanho do seu DOM, acompanhe o impacto nos usuários reais com Real User Monitoring. Nos nossos dados do CoreDash, reduzir a contagem de nós DOM para menos de 1.500 tipicamente melhora o INP em 35% em dispositivos móveis.