Corrigir o aviso 'avoid excessive-DOM size' do Lighthouse

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

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

• mais de 1.500 DOM nodes no total.
  Isso significa que existem mais de 1500 elementos HTML na nossa página.
• uma profundidade máxima de nodes superior a 32 nodes.
  Isso acontece quando um elemento está aninhado em pelo menos 32 elementos pai.
• um node pai com mais de 60 nodes 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)

O aviso 'avoid excessive DOM size' não impacta diretamente nenhuma métrica do Lighthouse. Em teoria, páginas com um DOM grande poderiam carregar bastante rápido. Na prática, frequentemente não carregam. Um tamanho excessivo de DOM provavelmente afetará indiretamente métricas importantes do Lighthouse como Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS).

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

DOM significa Document Object Model. O DOM é uma representação em árvore orientada a objetos do seu HTML onde cada elemento HTML (por exemplo: o body ou h1) é representado pelo seu próprio node.

O que causa um tamanho excessivo de DOM?

Um tamanho excessivo de DOM pode ter diversas razões. Um tamanho excessivo de DOM é geralmente causado por:

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

Como o 'excessive-DOM size' afeta o pagespeed

Um DOM grande não impacta diretamente as métricas do Lighthouse. Ele torna a renderização de uma página web desnecessariamente complicada, tornando quase impossível obter aquela pontuação alta no Lighthouse. Seu navegador precisará fazer mais trabalho antes que a página possa ser exibida na tela. Existem 3 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 sua página.
• Um tamanho de DOM grande diminuirá o desempenho de renderização. Seu navegador precisa fazer mais cálculos (DOM) no primeiro carregamento e cada 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.

Como corrigir 'avoid excessive-DOM size'

Para corrigir o aviso 'avoid excessive-DOM size' você primeiro precisará rastrear suas origens. O Lighthouse indicará onde a Profundidade Máxima do DOM e os Máximos Elementos Filhos estão localizados. A partir daí, você precisa fazer uma pequena investigação. Use o inspetor de DOM do seu navegador web e examine o DOM. Tente descobrir o que está criando um grande número de DOM nodes. 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 DOM nodes, você pode considerar substituir este plugin por um plugin mais otimizado.
2. DOM nodes criados por JavaScript.
   Um JavaScript, por exemplo um widget de chat, pode injetar um grande número de DOM nodes 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 Elementor ou WP Bakery frequentemente criam código inchado que possui um grande número de DOM nodes. Não existe uma solução fácil para isso. PageBuilders são frequentemente parte do fluxo de trabalho. A solução inclui limpar seu código inchado e mudar seu fluxo de trabalho.
4. Texto copiado e colado em um editor WYSIWYG
   A maioria dos editores WYSIWYG como TinyMCE faz um trabalho ruim na limpeza de código colado, especialmente quando colado de outra fonte de rich text como o Microsoft Word. Ele não copiará apenas o texto, mas também os estilos. Esses estilos podem estar incorporados em um grande número de DOM nodes. A solução para este problema é simples. Pare de colar conteúdo no seu editor e limpe as páginas que já possuem texto colado e inchado.
5. Codificação ruim de (template).
   Quando um tamanho grande de DOM é criado pelo seu editor ou causado pelo seu template, as coisas podem ficar complicadas. Isso significa que código inchado faz parte do núcleo do seu website. Você precisará trocar de editores, reescrever partes do seu template ou até mesmo começar do zero.

Soluções alternativas para 'avoid excessive-DOM size'

Às vezes não é possível remover o tamanho excessivo de DOM sem reescrever grandes partes do seu site e mudar todo o seu fluxo de trabalho. Existem algumas soluções alternativas para diminuir o impacto de um tamanho excessivo de DOM. Essas soluções alternativas estão longe de serem perfeitas e podem introduzir um conjunto totalmente novo de desafios que podem impactar seu SEO ou indexação em alguns casos.

• Carregue partes da sua página web com lazy load.
  Para acelerar a renderização inicial, você pode considerar o lazy loading de partes do seu website. Por exemplo, o footer.
• Melhore a renderização da página com content visibility.
  A propriedade CSS content-visibility diz ao navegador para pular estilização, layout e pintura até que você precise, o que pode diminuir o impacto do tamanho excessivo de nodes.
• Divida páginas grandes em múltiplas páginas.
  Dividir páginas grandes em múltiplas páginas pode reduzir o número de DOM nodes quando o próprio conteúdo criou muitos DOM nodes.
• Implemente infinite scroll.
  Infinite scroll é basicamente lazy loading. Ao percorrer elementos repetidos como imagens (Pinterest) ou grandes tabelas de dados, o infinite scroll pode acelerar sua página consideravelmente.
• Evite JavaScript intensivo em memória.
  Ao lidar com uma grande quantidade de DOM nodes na sua página, tenha cuidado extra com JavaScript. document.getElementsByTagName('div'); pode carregar um grande número de DOM nodes, o que aumenta o uso de memória.
• Evite declarações CSS complicadas.
  Ao lidar com uma grande quantidade de DOM nodes na sua página, tenha cuidado extra com declarações CSS complicadas. div:last-child; precisa verificar o status de last-child para cada div na sua página.