7 estratégias comprovadas para corrigir o aviso “Evite um tamanho excessivo de DOM”

Publicados: 2022-11-23
TL;DR: Corrigir o aviso "Evite um tamanho excessivo de DOM" não melhorará suas pontuações do Lighthouse, mas terá um impacto direto no desempenho do seu site no mundo real. Um tamanho grande de DOM torna seu site mais lento, aumenta o tempo de renderização e os custos de dados para seus usuários e sobrecarrega a memória de seus dispositivos. Existem inúmeras soluções para o problema de tamanho excessivo do DOM, como evitar temas e plug-ins mal codificados, dividir seu site de página única em várias páginas e usar construtores de páginas com cuidado.

A maioria das sugestões de melhoria do Google PageSpeed ​​Insights são bastante diretas.

Seja “adiar imagens fora da tela”, “eliminar recursos de bloqueio de renderização” ou “reduzir CSS não utilizado”, você pode entender quais as próximas etapas necessárias para lidar com os problemas.

No entanto, quando você rola um pouco mais fundo, de repente é atingido pelo aviso “Evite um tamanho excessivo de DOM”:

Primeira reação:

Qual é o tamanho do DOM e como faço para corrigir isso?!

Você está no lugar certo.

Nos parágrafos a seguir, você aprenderá tudo o que precisa saber sobre o tamanho do DOM e como lidar com esse aviso:

  • O que é DOM (Modelo de objeto de documento)?
  • Qual é o impacto do tamanho do DOM no desempenho da página?
  • Por que você vê o aviso "Evite um tamanho de DOM excessivo"
  • Como corrigir o aviso “Evite um tamanho excessivo de DOM”

Alcance uma pontuação de 90+ PSI com um clique de um botão. Veja seu site com NitroPack!

O que é DOM?

Seu site inclui recursos como um documento HTML, CSS e arquivos JavaScript.

Sempre que um usuário carrega seu site, o navegador dele estabelece uma conexão e recebe os recursos. Depois que o primeiro bloco de dados é recebido, o processo de análise começa.

A análise é a etapa que o navegador executa para transformar os dados (marcação HTML) na árvore DOM.

O DOM é um modelo de documento que representa o HTML como uma árvore de ramificações e nós.

Cada ramificação da árvore termina em um nó e cada nó contém objetos. Um nó representa parte do documento, como um elemento, string de texto ou comentário.

Em termos mais simples, quando você ouve DOM, significa a estrutura de objetos que o navegador cria toda vez que uma página da Web é carregada.

Termos chave:

  • Nós. Cada elemento ou tag no DOM é chamado de nó ou folha.
  • Profundidade. O número de elementos em uma ramificação de um DOM.
  • Elemento filho. O último nó que não se ramifica mais.

Qual é o impacto do tamanho do DOM no desempenho da página?

Quanto mais ramificações e nós seu DOM tiver, maior será seu tamanho.

Respectivamente, quanto maior o tamanho do DOM, mais problemas de desempenho negativos você pode enfrentar.

Aqui estão alguns dos problemas que se correlacionam com um tamanho de DOM maior:

1. Custos de dados aumentados e tempos de carregamento mais lentos

Uma grande árvore DOM geralmente inclui muitos nós que não são visíveis quando o usuário carrega a página pela primeira vez. Isso aumentará desnecessariamente os custos de dados, pois eles terão que carregar mais elementos para seus usuários e diminuirão o tempo de carregamento.

2. Sobrecarrega os recursos de memória do dispositivo do usuário

A interação contínua com consultas JavaScript leva a um desempenho ruim e renderização lenta. Isso resulta em uma experiência de página negativa para os usuários do seu site.

3. Maior tempo de renderização

À medida que os usuários interagem com sua página, o navegador deve recalcular constantemente a posição e o estilo dos nós. Uma árvore DOM grande e complicada pode desacelerar drasticamente a renderização.

4. Tempo aumentado para o primeiro byte (TTFB)

O TTFB mede quanto tempo leva para o navegador de um cliente receber o primeiro byte da resposta do servidor. Um DOM excessivo indica um documento HTML maior. Como resultado, há mais quantidade de dados a serem transportados, o que pode levar mais tempo.

Por que você vê o aviso “Evite um tamanho excessivo de DOM” no PageSpeed ​​Insights

A PSI usa o Lighthouse para analisar URLs em um ambiente controlado (ou seja, usando dados de laboratório) para mostrar a pontuação de desempenho, acessibilidade, práticas recomendadas e SEO.

Para que o Lighthouse sinalize sua página e, respectivamente, exiba o aviso "Evite um tamanho excessivo de DOM" em seu relatório PSI, um dos seguintes erros deve ser verdadeiro para sua árvore DOM:

  • Possui mais de 1.500 nós DOM no total.
  • Tem uma profundidade máxima de nó superior a 32 nós .
  • Um nó pai tem mais de 60 nós filhos .

É bom saber: o tamanho do DOM não afeta diretamente as pontuações do Lighthouse (ou seja, desempenho, acessibilidade, práticas recomendadas e SEO). No entanto, um tamanho de DOM excessivo afetará negativamente o desempenho do seu site no mundo real, levando a tempos de carregamento lentos e uma experiência de usuário ruim para seus usuários.

Junte-se ao top 31% dos sites que passam em seus Core Web Vitals! Veja seu site com NitroPack

 

Como corrigir Evite um tamanho excessivo de DOM

Uma boa regra do Google é:

“Em geral, procure maneiras de criar nós DOM somente quando necessário e destrua os nós quando eles não forem mais necessários.”

Claro, é mais fácil dizer do que fazer, e haverá momentos em que você precisará ir ao âmago da questão de otimizar seu site.

Em seguida, sugerimos a aplicação de algumas das seguintes correções:

1. Evite plugins e temas mal codificados

Eles basicamente incham o código do seu site, aumentam o tamanho do seu DOM e prejudicam a velocidade e o desempenho geral do seu site.

Como você pode saber se um tema/plugin foi mal codificado?

Ótima pergunta. E a resposta é:

  • Leia os comentários. Se houver problemas, é provável que alguém já os tenha encontrado e comentado.
  • Não tenha vergonha de gastar algum dinheiro. Assim como qualquer outra coisa, você obtém o que você paga. Economizar dinheiro obtendo um tema/plugin gratuito pode parecer ótimo, mas os efeitos a longo prazo custarão muito mais.
  • Verifique quando foi a última atualização. Você definitivamente deseja evitar temas e plugins desatualizados.

Se você é um usuário WooCommerce ou planeja abrir uma loja, você deve definitivamente verificar nossa pesquisa aprofundada sobre os temas Woo de melhor desempenho em 2022.

Aqui está uma lista de coisas que você deve procurar/evitar ao selecionar um tema:

  1. Temas multifuncionais. Eles vêm com muitas opções que você nunca usará e, ao mesmo tempo, irão sobrecarregar seu código.
  2. Versões gratuitas. Novamente, eles são ótimos para um test drive, mas muitas vezes, eles têm desempenho inferior e podem causar muitos problemas.
  3. Temas anulados. Nunca use uma versão crackeada de um tema pago, pois ela pode conter scripts maliciosos que podem prejudicar seu site.

 

2. Minimize os nós DOM baseados em JavaScript

Adicionar elementos dinâmicos ao seu site tem um preço, pois eles podem sobrecarregá-lo com nós JavaScript extras.

Para começar, você pode corrigi-lo alocando os arquivos JS que causam problemas e removendo-os. Caso seja um widget de terceiros (por exemplo, um widget de chat), você deve procurar uma alternativa otimizada.

3. Construtores de páginas que geram HTML inchado

A facilidade de uso dos criadores de páginas os tornou parte integrante do processo de criação de sites para muitos usuários.

Infelizmente, os construtores de páginas às vezes podem produzir código inchado com um número excessivo de nós DOM. Eles estão fazendo isso injetando muitas tags div.

Para lidar com isso, você pode acessar seu HTML e corrigi-lo manualmente.

A boa notícia é que alguns construtores de páginas tomam medidas para resolver esses problemas conhecidos. Por exemplo, a Elementor anunciou que o Elementor 3.0 vem com melhorias significativas no DOM para aumentar a velocidade e o desempenho de novos sites.

4. Não copie/cole texto no editor WYSIWYG

A maioria dos editores WYSIWYG (o que você vê é o que você obtém) falha na limpeza do código colado. Especialmente quando colado de outra fonte de rich text como o Microsoft Word. O problema é que ele não apenas copiará o texto, mas também seus estilos. E eles são os principais culpados, pois podem incorporar muitos nós DOM.

Você tem algumas opções para lidar com isso:

  • Evite colar texto em seu editor
  • Use a opção Colar como texto simples
  • (Se o seu editor permitir) Use os recursos avançados para limpar o código depois de colá-lo

E por último, mas não menos importante, retorne às suas páginas antigas e limpe-as.

5. Divida seu site de uma página em várias páginas

Um site de página única é uma ótima ideia quando seu único objetivo é apresentar sua empresa.

Ao contrário, se você decidir adicionar informações comerciais, artigos de blog, produtos, formulários de contato etc., divida-os em páginas separadas e vincule-os através do menu de navegação.

A divisão de páginas grandes em várias páginas pode reduzir o número de nós DOM.

6. Não esconda elementos indesejados usando display:none

display: none é comumente usado com JavaScript para ocultar e mostrar elementos sem excluí-los e recriá-los. No entanto, isso não significa que eles desapareçam de sua marcação HTML, deixando os visitantes carregando elementos indesejados.

7. Evite usar declarações complicadas de CSS e JavaScript

Declarações CSS e JavaScript complicadas também podem aumentar o uso de memória e tornar seu site lento. É melhor ignorá-los se você lidar com um número excessivo de nós DOM.

Corrija problemas de CSS e JavaScript automaticamente! Veja seu site com NitroPack

Para concluir

É verdade que corrigir seus problemas de DOM não levará a uma melhoria em suas pontuações do PageSpeed ​​Insights.

No entanto, os benefícios ocultos de se esforçar para lidar com o aviso “evitar um tamanho excessivo de DOM” são muito maiores:

  • Aumente o tempo de carregamento do seu site
  • Melhore o desempenho percebido da sua página
  • Forneça aos visitantes uma melhor experiência do usuário

Mais importante, essas três coisas são recompensadas pelo Google ! Além disso, eles são uma maneira infalível de diminuir as taxas de rejeição, aumentar o tempo médio gasto e, por último, mas não menos importante, aumentar as conversões.

Se você está procurando maneiras de corrigir outras sugestões de PSI, verifique nossos outros artigos:

  • Sirva imagens em formatos de última geração facilmente (WordPress, OpenCart e Magento)
  • Como carregar imagens fora da tela com preguiça (5 técnicas comprovadas)
  • Otimização de imagens para a Web: técnicas de SEO e velocidade do site 2022
  • 8 estratégias de carregamento de fontes para melhorar seus principais sinais vitais da Web (2022)
  • Como eliminar recursos de bloqueio de renderização (CSS e JavaScript)
  • Reduza o impacto do código de terceiros (com/sem plug-ins)
  • 7 maneiras de minimizar o trabalho do thread principal