Corrigir o aviso do Lighthouse avoid excessive-DOM size

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

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

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

• mais de 1.500 nós DOM no total.
  Isso significa que há mais de 1.500 elementos HTML na sua página.
• uma profundidade máxima de nó superior a 32 nós.
  Isso acontece quando um elemento está aninhado 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 possui 594 elementos DOM. No percentil 90, ele salta para 1.716, o que já excede o limite do Lighthouse. Aproximadamente 10% de todas as páginas da web acionam este aviso.

Desde o Lighthouse 13 (outubro de 2025), esta auditoria evoluiu para o insight "Optimize DOM size" (Otimizar tamanho do DOM). Ele agora é acionado 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 excessive DOM size?

Um excessive DOM size pode ter vários motivos. Um excessive DOM size geralmente é causado por:

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

O capítulo Markup do Web Almanac 2024 descobriu que apenas os elementos <div> representam 28,7% de todos os elementos da página. Esta "divite" (divitis) é um grande contribuinte para tamanhos excessivos do DOM, especialmente em saídas de construtores de páginas.

Como o excessive DOM size afeta a velocidade da página?

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

• O tamanho do seu HTML é maior porque o seu código está inchado. Isso aumentará o tempo necessário para baixar a sua página.
• Um grande tamanho de DOM diminuirá o desempenho de renderização. Seu navegador precisa fazer mais cálculos (DOM) no primeiro carregamento e toda vez que um usuário ou um script interage com sua página.
• Seu navegador pode usar muito mais memória ao interagir com o DOM via JavaScript.
• Um grande DOM afeta diretamente a Interaction to Next Paint (INP). Toda vez que um usuário clica, toca ou digita, o navegador deve recalcular estilos e o 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, isso se torna um problema mensurável para a INP. É por isso que as páginas com milhares de nós DOM frequentemente falham na INP, mesmo quando o JavaScript é rápido.

O aviso 'avoid excessive DOM size' afetará muito provavelmente de forma indireta os importantes Core Web Vitals como o Largest Contentful Paint (LCP) e o Cumulative Layout Shift (CLS). Mas o maior impacto é na INP, que é o Core Web Vital que mais falha comumente.

Como corrigir 'avoid excessive-DOM size'

Para corrigir o aviso 'avoid excessive-DOM size', primeiro você precisará rastrear suas origens. O Lighthouse dará a você uma indicação de onde a Profundidade Máxima do DOM (Maximum DOM Depth) e o Máximo de Elementos Filhos (Maximum Child Elements) estão localizados. A partir daí, você precisa fazer uma pequena pesquisa. Use o inspetor DOM no Chrome DevTools e verifique 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 plugin de slider ou de calendário cria uma grande quantidade de nós DOM, você pode considerar substituir este 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. Construtores de páginas (Page builders) que geram HTML inchado.
   Construtores de páginas como Elementor ou WP Bakery frequentemente criam códigos inchados que têm um grande número de nós DOM. Não existe uma correção fácil para isso. Os construtores de páginas são muitas vezes uma parte do fluxo de trabalho. A solução inclui limpar seu código inchado e mudar seu fluxo de trabalho.
4. Texto que é copiado e colado em um editor WYSIWYG.
   A maioria dos editores WYSIWYG como TinyMCE faz um mau trabalho na limpeza de 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 este problema é simples. Pare de colar conteúdo em seu editor e limpe as páginas que já têm texto colado e inchado.
5. Má codificação (de template).
   Quando um tamanho de DOM grande é criado pelo seu editor ou causado pelo seu template, as coisas podem ficar feias. Isso significa que o código inchado faz parte do núcleo (core) do seu site. Você precisará trocar de editor, reescrever partes de seu template ou mesmo começar do zero.

Técnicas para reduzir o impacto de um DOM grande

Às vezes não é possível remover o excessive DOM size 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 excessive DOM size:

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

• Aplique lazy load em partes de sua página web.
  Para acelerar a renderização inicial, você pode considerar aplicar lazy load em partes de seu site. Por exemplo, o rodapé (footer).
• Use content-visibility: auto para ignorar a renderização de conteúdo fora da tela.
  A propriedade CSS content-visibility diz ao navegador para ignorar a estilização, layout e a pintura (paint) de elementos fora da tela até que o usuário role para perto deles. Ela agora tem 93% de suporte do navegador (Chrome 85+, Firefox 125+, Safari 18+). Sempre faça um par com contain-intrinsic-size para prevenir os layout shifts:
• Divida páginas grandes em múltiplas páginas.
  Dividir páginas grandes em múltiplas páginas pode reduzir o número de nós DOM quando o próprio conteúdo cria muitos nós DOM.
• Implemente o virtual scrolling.
  Para listas longas, tabelas de dados ou galerias de imagens, o virtual scrolling renderiza apenas itens visíveis no viewport. Bibliotecas como react-window (React) e o módulo CDK Virtual Scrolling (Angular) mantêm a contagem de nós DOM apenas para os itens visíveis (normalmente 10 a 30 nós) em vez de milhares.
• Evite JavaScript que consuma muita memória.
  Ao lidar com uma grande quantidade de nós DOM na sua página, seja extremamente cuidadoso com 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 (traversal) para o navegador. Isso importa mais para a INP, onde cada milissegundo de recálculo de estilo conta.

Depois de reduzir o tamanho do seu DOM, rastreie o impacto em usuários reais com Real User Monitoring. Em nossos dados da CoreDash, a redução da contagem de nós DOM abaixo de 1.500 tipicamente melhora a INP em 35% em dispositivos móveis.