Resolver o aviso “Evitar um tamanho excessivo do DOM” no WordPress

Você está recebendo avisos do Google PageSpeed Insights ou Lighthouse sobre o desempenho do seu site WordPress?

É um problema comum para muitos proprietários de sites WordPress, e é essencial resolvê-lo rapidamente.

Você pode não saber, mas um tamanho grande do DOM pode tornar mais lenta a velocidade com que seu site exibe conteúdo e imagens. Também usa mais memória, faz as interações parecerem lentas e desacelera os scripts, prejudicando o desempenho do site e a experiência do usuário.

Para acelerar seu site WordPress e melhorar a experiência do usuário, você deve abordar o problema do tamanho grande do DOM. Vamos ver como resolver este problema.

Entendendo o DOM

O DOM, ou Document Object Model, representa a estrutura e o conteúdo de um site WordPress. Ele organiza elementos como cabeçalhos, conteúdo, recursos visuais e botões em uma ordem específica, tornando-os mais fáceis de acessar e modificar usando linguagens de programação como HTML, CSS e JavaScript.

Pense no DOM como uma árvore genealógica. Como uma árvore genealógica com pais, filhos e parentes, um site WordPress tem vários elementos (nós) com diferentes níveis (profundidade). Essa hierarquia continua até que o último elemento (nó filho) seja alcançado. Um DOM com muitos nós é chamado de "Tamanho Excessivo do DOM".

Conceitos-chave:

• Nós: Também conhecidos como tags HTML, esses são os elementos essenciais do DOM.
• Profundidade: Refere-se a quão fundo um galho vai na árvore do DOM.
• Elemento Filho: Um elemento listado sob outro elemento, encontrado entre tags HTML de abertura e fechamento. Por exemplo:
  Hello World

Agora que você entende o DOM.

De onde vem o tamanho excessivo do DOM?

Tamanhos grandes do DOM ocorrem quando sua página web tem muitas tags HTML ou quando elas estão aninhadas muito profundamente. Isso faz o navegador do usuário trabalhar mais, retardando os tempos de carregamento da página e reduzindo suas pontuações de velocidade de página.

A execução lenta de JavaScript e CSS muitas vezes se deve ao navegador ter que processar mais nós, o que atrasa a renderização da página.

Um DOM extenso aumenta o uso de memória, atrasa o processamento de estilo e causa reflows de layout caros. Modificando objetos do DOM, você pode controlar quais elementos da página são exibidos ao usuário. Você pode encontrar isso nas DevTools do seu navegador ou nas telas Inspect Element:

No entanto, se você usar uma ferramenta como o Google Lighthouse, poderá ver um aviso de desempenho sobre isso.

A mensagem é clara: você deve seguir ‘Avoid an excessive DOM size’. O Google Lighthouse relata este aviso em três áreas:

1. Número total de elementos: Se sua página tiver mais de 800 elementos na árvore DOM, você verá um aviso.
2. Profundidade máxima do DOM: Este valor mostra a seção de código com os elementos mais profundamente aninhados.
3. Nó pai com muitos nós filhos: O Lighthouse sinaliza qualquer nó pai com mais de 60 nós filhos.

Embora isso seja um ‘Diagnóstico’ no Lighthouse, manter o tamanho do DOM pequeno melhora o desempenho do site e a experiência do usuário, aumentando sua pontuação Core Web Vitals.

Razões para o tamanho excessivo do DOM

Um tamanho grande do DOM pode retardar significativamente suas páginas web. Aqui estão os principais fatores que contribuem para este problema:

1. Páginas sobrecarregadas: Uma página web contendo muitos elementos devido a designs complexos ou código redundante resulta em uma árvore DOM sobrecarregada. Isso não apenas retarda a página, mas também degrada a experiência do usuário.
2. Aninhamento excessivo: Estruturas HTML profundamente aninhadas criam uma árvore DOM complexa, dificultando a renderização eficiente da página pelos navegadores. Isso leva a um processamento mais lento de CSS e JavaScript.
3. Temas e plugins inchados: Temas e plugins frequentemente adicionam elementos desnecessários, como JavaScript ou CSS. Muitos temas vêm com recursos padrão que incham o DOM, enquanto plugins podem introduzir scripts e estilos extras, aumentando os tempos de carregamento mesmo quando esses recursos não são utilizados.

Identificando o tamanho excessivo do DOM: ferramentas e técnicas

Compreender e gerenciar o tamanho do DOM do seu site é essencial para um desempenho ideal. Aqui estão algumas ferramentas e técnicas para ajudá-lo a identificar e resolver este problema:

1. Google Lighthouse

O Google Lighthouse é uma ferramenta gratuita e de código aberto que ajuda a identificar problemas de desempenho do site, incluindo tamanho excessivo do DOM. Veja como usá-lo:

• Abra o Chrome e navegue até sua página web.
• Clique com o botão direito na página e selecione "Inspect" para abrir as Ferramentas de Desenvolvedor.
• Clique na aba "Lighthouse" e depois em "Analyze page load."

2. Chrome DevTools

O Chrome DevTools oferece uma visão detalhada do DOM da sua página web. Ele ajuda a contar nós do DOM e identificar elementos que contribuem para um grande tamanho do DOM. Siga estes passos:

• Abra sua página web no Chrome.
• Clique com o botão direito e selecione "Inspect" para abrir as DevTools.
• Visualize a árvore DOM na aba "Elements" e conte os nós.

3. WebPageTest

WebPageTest é uma ferramenta online que oferece uma análise detalhada do desempenho da sua página web, incluindo uma divisão dos elementos do DOM. Veja como usá-la:

• Visite WebPageTest.org.
• Insira a URL da sua página web.
• Clique em "Start Test".

4. GTmetrix

GTmetrix é outra ferramenta valiosa que analisa o desempenho da sua página web, incluindo o tamanho do DOM. Veja como usá-la:

• Vá para GTmetrix.com.
• Insira a URL da sua página web.
• Clique em "Test your site" e revise o relatório detalhado, focando em métricas relacionadas ao DOM.

5. PageSpeed Insights

O PageSpeed Insights do Google fornece insights sobre o desempenho da sua página web, incluindo problemas de tamanho do DOM. Veja como usá-lo:

• Visite PageSpeed Insights.
• Insira a URL da sua página web.
• Clique em "Analyze" para um relatório detalhado sobre o desempenho da sua página web, com recomendações específicas sobre otimização do tamanho do DOM.

Usando essas ferramentas, você pode diagnosticar e otimizar efetivamente o tamanho do DOM do seu site para melhor desempenho.

Resolva o problema do tamanho excessivo do DOM: dicas e truques

Antes de poder corrigir o aviso "avoid excessive-DOM size", você deve identificar suas causas.

Primeiro, use o Google Lighthouse para encontrar a Profundidade Máxima do DOM e os Elementos Filhos Máximos. Em seguida, use o inspetor de DOM do seu navegador para verificar o DOM.

Seu objetivo é identificar o que está causando o número excessivo de nós do DOM.

1. Evite plugins e temas mal codificados

Usar um plugin como uma linha do tempo, calendário ou slider que cria muitos nós do DOM pode retardar seu site. Para melhorar o desempenho, troque-o por um plugin mais eficiente.

Da mesma forma, temas e modelos mal codificados podem prejudicar a velocidade do seu site. Você pode melhorar seu site eliminando código desnecessário usando um editor enxuto ou modificando seu modelo.

2. Reduza os nós DOM de JavaScript

Às vezes, o JavaScript pode adicionar muitos nós do DOM a uma página, retardando o site. Por exemplo, um widget de chat pode criar um número excessivo de nós.

Considere remover o arquivo JavaScript problemático ou mudar para um widget mais eficiente. Essa simples mudança pode melhorar significativamente o desempenho e a velocidade do seu site.

3. Evite construtores de páginas que produzem HTML excessivo

Construtores de páginas como WP Bakery, Elementor e Gutenberg às vezes podem gerar muitos nós do DOM, retardando seu site. Essas ferramentas são úteis, mas podem criar código volumoso e ineficiente.

Para corrigir isso, limpe o código excedente e otimize seu fluxo de trabalho. Recentemente, os desenvolvedores do Elementor fizeram melhorias para reduzir o inchaço e aumentar a eficiência. Por outro lado, o Gutenberg tende a produzir HTML mais limpo, o que pode ajudar a manter uma estrutura mais enxuta.

Revise e simplifique seu HTML regularmente para manter seu site rápido e fácil de usar. Isso garantirá tempos de carregamento mais rápidos e uma experiência melhor para seus visitantes.

4. Otimize o HTML do seu site WordPress

Para otimizar como o HTML do seu site WordPress está organizado, eis o que você pode fazer:

Escolha um tema simples como Hello Elementor ou Elementor, que mantém suas páginas limpas sem elementos desnecessários.

Revise suas páginas e posts no editor do WordPress. Remova quaisquer shortcodes não utilizados, tags div extras ou elementos vazios.

Clique com o botão direito no seu site WordPress e escolha "View Page Source" ou pressione "CTRL + U". Procure seções de código repetitivas, como múltiplas tags div com a mesma classe ou atributos de estilo.

Navegue até o painel do WordPress → ‘Aparência’ → ‘Editor de Temas.’ Aqui, você pode editar os arquivos PHP do seu tema.

Elimine qualquer código aninhado desnecessário.

Após fazer as alterações, salve o arquivo e teste seu site para garantir que tudo funcione corretamente.

Clique com o botão direito no seu site e selecione "Inspect". Vá para a aba Lighthouse e clique em "Analyze page load" para gerar um relatório. Isso verificará avisos sobre "Avoid an Excessive DOM Size".

5. Reduza a carga do site gerenciando scripts

Para reduzir efetivamente o tamanho do DOM do seu site, é essencial gerenciar cuidadosamente os scripts e plugins que você usa. Aqui está uma abordagem passo a passo:

Audite seus plugins: Revise todos os plugins instalados no seu site. Identifique quais são essenciais e quais não estão sendo usados. Plugins que não estão em uso ou que retardam significativamente seu site devem ser desativados ou completamente removidos para otimizar o desempenho do seu site.

Otimize os scripts: Considere usar plugins como WP Rocket ou Asset CleanUp. Essas ferramentas ajudam minimizando e combinando scripts. Minimizar remove caracteres desnecessários do código sem mudar sua funcionalidade.

Em contraste, combinar scripts reduz o número total de arquivos que o navegador de um usuário precisa baixar, reduzindo assim as solicitações e minimizando o tamanho do DOM.

Dicas para reduzir o tamanho do DOM para melhor desempenho

Você está curioso sobre como reduzir o tamanho do DOM do seu site? Aqui estão algumas dicas práticas:

• Use Lazy Loading e Rolagem Infinita – O lazy loading atrasa o carregamento de certas partes do seu site, como imagens em páginas de categoria, até que sejam necessárias. Limitar o número de posts de blog ou itens em páginas de produtos a cerca de dez também pode acelerar os tempos de carregamento.
• Divida páginas longas em múltiplas páginas – Em vez de ter uma página longa com muito conteúdo (como blogs, formulários de contato e produtos), crie páginas separadas para cada um. Use uma barra de navegação para vinculá-las.
• Melhore a renderização da página com CSS – Tente a propriedade CSS ‘content-visibility’. Ela faz o navegador pular a renderização de elementos até que sejam necessários, o que pode melhorar o desempenho.
• Simplifique CSS e JavaScript – Evite estilos CSS complexos e código JavaScript pesado. Eles podem aumentar o tamanho do DOM e retardar seu site. Simplificá-los pode fazer uma grande diferença.

Conclusão

É assim que você lida com o aviso ‘Avoid Excessive DOM Size’ no WordPress! Você aprendeu sobre o problema e explorou maneiras de resolvê-lo, tornando seu site mais simplificado e responsivo.

Cada otimização torna seu site mais rápido, mais eficiente e mais fácil de usar. Mantenha essas dicas em mente à medida que desenvolve suas habilidades web.

Artigos relacionados

• Como corrigir o erro do WordPress "Barra lateral não aparece"
• Por que o WordPress é lento + Como corrigir
• Por que o backup de dados e a recuperação de desastres são necessários para o WordPress?
• Como reparar e otimizar o banco de dados do WordPress
• Como desfazer alterações no WordPress (Revisões, Salvamentos Automáticos, Snapshots)