Como Corrigir o Tamanho Excessivo do DOM no WordPress (11 Dicas de Especialistas)

O aviso 'Evite um tamanho excessivo do DOM' no WordPress significa que sua página tem muitos elementos HTML, o que a deixa lenta.

As melhores maneiras de corrigir isso são usando um plugin de desempenho como o WP Rocket, otimizando o carregamento de imagens e galerias e escolhendo um tema ou construtor de páginas leve.

Este aviso pode aparecer no Google Lighthouse ou em outras ferramentas de teste de velocidade, e soa técnico. Mas o conceito é simples: seu site é uma coleção de partes, e ter muitas pode sobrecarregar um navegador.

Aqui no WPBeginner, não apenas otimizamos nossos próprios sites de alto tráfego para resolver esse problema exato, mas também ajudamos inúmeros usuários a melhorar a velocidade de seus sites.

Neste artigo, detalharemos 11 de nossos métodos de especialistas para resolver o problema e melhorar o desempenho do seu WordPress.

O que significa o aviso 'Evite um tamanho excessivo do DOM'?

O aviso 'Evite um tamanho excessivo do DOM' aparece em ferramentas de teste de velocidade como o Google PageSpeed Insights quando uma página da web tem muitos elementos HTML para um navegador processar eficientemente.

DOM significa Document Object Model (Modelo de Objeto de Documento). É uma estrutura semelhante a uma árvore que representa todos os objetos em sua página da web. Cada elemento, como um título, parágrafo, imagem ou botão, é um 'nó' nesta árvore.

O número total desses nós compõe o tamanho do DOM. Quando esse número se torna muito grande, o navegador precisa de mais tempo e recursos para renderizar a página, o que pode deixar seu site lento.

Como o Tamanho Excessivo do DOM Afeta o Desempenho do Site?

Um tamanho de DOM grande impacta negativamente o desempenho do seu site WordPress de várias maneiras importantes. Cada elemento que você adiciona a uma página, de textos e imagens a formulários e menus, aumenta a contagem de nós do DOM.

Essa complexidade tem os seguintes efeitos:

• Renderização Mais Lenta da Página: Um navegador precisa analisar toda a árvore DOM antes de poder exibir a página. Uma árvore maior leva mais tempo para ser processada, o que atrasa o tempo que um visitante leva para ver seu conteúdo.
• Aumento do Uso de Memória: Uma estrutura DOM complexa requer mais memória e poder de processamento do dispositivo do usuário. Isso pode ser especialmente perceptível em telefones celulares.
• Experiência do Usuário Ruim: Esses impactos no desempenho levam a tempos de carregamento mais lentos. Isso pode frustrar os visitantes e fazer com que eles saiam do seu site antes mesmo que ele carregue.
• Impacto Negativo no SEO: Mecanismos de busca como o Google usam a velocidade da página como um fator de classificação. Páginas de carregamento lento podem prejudicar seu SEO do WordPress e reduzir as conversões do site.

Quantos Elementos DOM São Muitos para o Google?

Ferramentas de teste como o Google Lighthouse não usam apenas um número para sinalizar um tamanho de DOM excessivo. Em vez disso, eles consideram três critérios específicos:

• Total de Nós DOM: Um aviso é acionado se o número total de elementos HTML (nós) na página exceder 1.500. Esta é a razão mais comum para o aviso.
• Profundidade Máxima do DOM: Um aviso é acionado se os elementos estiverem aninhados muito profundamente uns dentro dos outros. O Lighthouse sinaliza uma página se o aninhamento for mais profundo que 32 níveis.
• Elementos Filhos Máximos: Um aviso é acionado se um único elemento pai tiver mais de 60 elementos filhos diretamente dentro dele. Isso geralmente acontece com mega menus ou galerias mal codificados.

Páginas com múltiplos sliders, layouts complexos com muitas seções aninhadas ou inúmeros itens incorporados são mais propensas a exceder esses limites. No entanto, você não precisa sacrificar seu design para resolver esse problema.

Preparamos um guia completo para você resolver isso. Aqui estão 11 maneiras comprovadas de reduzir o tamanho do DOM e melhorar o desempenho do WordPress:

1. Use um Plugin de Otimização de Velocidade para WordPress
2. Verifique seu Tema e Plugins
3. Use um Page Builder Otimizado
4. Otimize suas Imagens e Vídeos
5. Implemente o Carregamento Lento (Lazy Loading)
6. Paginar Comentários ou Posts com Muito Conteúdo
7. Minificar Arquivos CSS e JavaScript
8. Reduzir JavaScript e CSS que Bloqueiam a Renderização
9. Habilitar Cache do WordPress
10. Usar um CDN do WordPress
11. Otimize Seu Banco de Dados do WordPress

Sinta-se à vontade para usar os links rápidos acima para saber mais sobre um método de otimização específico.

1. Use um Plugin de Otimização de Velocidade do WordPress

Nossa primeira recomendação é instalar um poderoso plugin de otimização de velocidade do WordPress. Esses plugins cuidam das otimizações técnicas necessárias para tornar seu site mais rápido.

Isso permite que você se concentre em gerenciar e criar seu conteúdo enquanto o plugin funciona em segundo plano.

Aqui na WPBeginner, usamos e recomendamos o WP Rocket. Nós o usamos em nossos próprios sites para gerenciar cache, otimização de arquivos e carregamento preguiçoso (lazy loading), sobre o qual você pode aprender mais em nosso artigo sobre como aumentamos a velocidade de carregamento da página no WPBeginner.

Embora o WP Rocket seja conhecido principalmente como um plugin de cache, muitos de seus recursos ajudam a resolver os problemas causados por um DOM grande. Isso inclui otimização de arquivos, carregamento preguiçoso e adiamento de JavaScript.

Explicaremos esses recursos mais tarde no artigo. Você também pode ler nossa análise completa do WP Rocket para mais informações, ou usar nosso guia de configuração para começar.

2. Verifique seu Tema e Plugins

Embora os plugins e temas do WordPress adicionem funcionalidade e estilo ao seu site WordPress, eles também podem contribuir para um tamanho excessivo do DOM.

Temas e plugins mal codificados podem adicionar elementos HTML desnecessários, inchando a estrutura da sua página. Da mesma forma, plugins e temas com recursos extras que você não usa ainda podem carregar seu código, aumentando o DOM.

Para verificar se um plugin ou tema específico é o culpado, você pode desativar plugins um por um ou trocar temporariamente para um tema padrão do WordPress. Após cada alteração, execute um teste de velocidade para ver se o aviso de tamanho do DOM desaparece.

Para evitar esse problema, escolha sempre temas e plugins de fontes confiáveis, como o diretório oficial do WordPress ou desenvolvedores conhecidos. Esses recursos geralmente têm padrões de codificação mais rigorosos.

Para recomendações confiáveis, confira o WPBeginner Solution Center, onde testamos e revisamos softwares do WordPress.

3. Use um Page Builder Otimizado

Page builders são ferramentas excelentes para projetar layouts personalizados sem código, mas alguns podem contribuir para um tamanho excessivo do DOM. Eles frequentemente envolvem seu conteúdo em elementos HTML extras para controlar o estilo e o layout.

Por exemplo, um page builder mal otimizado pode envolver um único botão em múltiplos contêineres <div> aninhados para alinhamento e estilo. Cada um desses contêineres adiciona um novo nó ao DOM, aumentando rapidamente a contagem total.

Se você suspeita que seu construtor de páginas é o problema, você pode testá-lo desativando-o em um site de teste e verificando o tamanho do DOM novamente. Você pode usar ferramentas integradas como o Editor de Site Completo, mas eles podem carecer de flexibilidade.

Para o melhor equilíbrio entre flexibilidade e desempenho, recomendamos o uso de um construtor de páginas otimizado para velocidade como o SeedProd. Em nossos testes, ele consistentemente supera outros construtores populares.

Você pode ver como ele se compara a outros em nossa análise Elementor vs. Divi vs. SeedProd.

Muitas de nossas marcas parceiras, incluindo WPForms e Duplicator, usam o SeedProd para construir seus sites.

4. Otimize Suas Imagens e Vídeos

É importante esclarecer como as imagens se relacionam com o tamanho do DOM. O tamanho do arquivo de uma imagem (em KB ou MB) não afeta o número de nós do DOM. Uma tag <img> é um único nó, não importa quão grande seja o arquivo da imagem.

No entanto, a forma como as imagens são exibidas pode aumentar o tamanho do DOM. Alguns temas e plugins de galeria envolvem cada imagem em múltiplos contêineres <div> para estilização, lightboxes ou legendas. Esses elementos extras de encapsulamento são o que adicionam à contagem do DOM, não a imagem em si.

Embora otimizar imagens comprimindo-as seja crucial para a velocidade da página, você também deve escolher plugins de galeria que gerem código limpo. Um plugin como Optimole pode ajudar na compressão de imagens e no carregamento preguiçoso.

Para vídeos, recomendamos nunca fazer o upload deles diretamente para o WordPress.

Em vez disso, hospede-os em serviços como YouTube ou Vimeo e incorpore-os. Isso reduz a carga em seu servidor e mantém seu DOM mais limpo.

5. Configurar Carregamento Preguiçoso

Carregamento preguiçoso (lazy loading) é uma técnica que adia o carregamento de elementos não críticos, como imagens e vídeos, até que eles estejam prestes a entrar na área de visualização do usuário. Isso permite que o navegador renderize a parte inicial e visível da página muito mais rapidamente.

Ao não carregar tudo de uma vez, o carregamento preguiçoso reduz o trabalho inicial de processamento para o navegador e cria uma experiência de usuário muito mais fluida.

Configurar o carregamento preguiçoso (lazy loading) é fácil com um plugin como o WP Rocket. No seu painel do WordPress, navegue até Configurações » WP Rocket e abra a aba ‘Mídia’. Aqui, você pode ativar o carregamento preguiçoso para imagens, vídeos e iframes com um único clique.

Para galerias, recomendamos o uso de um plugin de galeria com carregamento preguiçoso integrado, como o Envira Gallery.

Você pode até mesmo carregar preguiçosamente sua seção de comentários usando um plugin como o Thrive Comments para melhorar ainda mais o desempenho.

6. Paginar Comentários ou Posts com Muito Conteúdo

Posts ou seções de comentários muito longos podem aumentar significativamente o tamanho do DOM e diminuir os tempos de carregamento. A paginação resolve isso dividindo esse conteúdo em várias páginas menores.

Isso torna o conteúdo mais gerenciável tanto para o navegador quanto para o leitor. Você pode facilmente dividir posts longos adicionando o bloco ‘Quebra de Página’ no editor do WordPress. Para instruções detalhadas, consulte nosso guia sobre como dividir posts do WordPress em várias páginas.

Da mesma forma, você pode paginar seus comentários. Vá para Configurações » Discussão na sua área de administração do WordPress, marque a caixa ao lado de ‘Dividir comentários em páginas’ e defina o número de comentários por página.

Você pode ler mais em nosso guia sobre como paginar comentários no WordPress.

Sugerimos evitar rolagem infinita, pois ela adiciona continuamente novos elementos ao DOM, o que pode levar a problemas de desempenho.

7. Minificar arquivos CSS e JavaScript

Embora essa técnica não reduza diretamente o número de nós do DOM, ela melhora significativamente o desempenho e diminui o impacto negativo de um DOM grande.

Minificação remove caracteres desnecessários como comentários, espaços e quebras de linha dos seus arquivos CSS e JavaScript. Isso reduz o tamanho do arquivo, tornando-os mais rápidos para o navegador baixar e processar.

Um plugin como o WP Rocket torna isso simples. Vá para Configurações » WP Rocket, mude para a aba ‘Otimização de Arquivos’ e ative os recursos para minificar arquivos CSS e JavaScript. Para mais detalhes, veja nosso guia sobre como minificar arquivos CSS e JavaScript.

Antes de minificar, recomendamos criar um backup do seu site. Em casos raros, a minificação pode causar problemas com temas ou plugins específicos.

8. Reduza JavaScript e CSS que Bloqueiam a Renderização

Esta é outra técnica que não reduz os nós DOM diretamente, mas melhora muito o desempenho percebido ao alterar a forma como os arquivos são carregados.

Pense no navegador carregando sua página como se estivesse pintando um quadro. Recursos que bloqueiam a renderização forçam o navegador a parar de pintar a página da web até que sejam totalmente carregados. Adiar o carregamento deles permite que o conteúdo principal seja pintado primeiro, para que o usuário veja seu site mais rápido.

O WP Rocket possui recursos para resolver isso. Ele pode combinar arquivos para reduzir requisições HTTP e adiar o carregamento de JavaScript não crítico. Isso significa que os usuários veem seu conteúdo mais rápido, mesmo que os scripts em segundo plano ainda não tenham terminado de carregar.

Você pode aprender mais em nosso artigo sobre como corrigir recursos que bloqueiam a renderização no WordPress.

9. Habilite o Cache do WordPress

Embora o cache não reduza diretamente o número de nós do DOM, ele acelera drasticamente os tempos de carregamento da página, especialmente para visitantes recorrentes. Isso faz com que o DOM carregue e seja exibido muito mais rapidamente.

O cache armazena uma versão estática do seu site. Quando um usuário revisita, o navegador dele pode carregar essa versão salva em vez de reconstruir a página do zero, o que é muito mais rápido. Isso também reduz a carga no seu servidor, liberando-o para processar o DOM mais rapidamente.

Configurar o cache é simples com um plugin como o WP Rocket, que habilita automaticamente as configurações ideais de cache após a ativação. Você pode aprender mais sobre seus recursos de cache em nosso guia de instalação do WP Rocket.

10. Use uma CDN para WordPress

Uma CDN (Rede de Distribuição de Conteúdo) também ajuda a mitigar os efeitos de um DOM grande sem alterá-lo diretamente. Uma CDN é uma rede global de servidores que armazena cópias dos arquivos estáticos do seu site (imagens, CSS, JavaScript).

Quando um usuário visita seu site, a CDN entrega esses arquivos do servidor mais próximo de sua localização física. Isso reduz drasticamente os tempos de download e permite que o navegador comece a processar o DOM muito mais rapidamente.

Usamos a CDN da Cloudflare no WPBeginner. Você pode aprender por que a escolhemos em nosso post sobre a mudança da Sucuri para a Cloudflare.

Para outras opções, confira nossa lista dos melhores serviços de CDN para WordPress.

11. Otimize seu banco de dados WordPress

Esta é outra otimização indireta. Embora seu banco de dados não faça parte do DOM, um banco de dados inchado pode diminuir o tempo de resposta do seu servidor. Esse atraso faz com que seu site demore mais para carregar, o que pode fazer com que um DOM grande pareça ainda mais lento.

Com o tempo, seu banco de dados pode ficar cheio de dados desnecessários, como revisões de posts, comentários de spam e dados antigos de plugins. Limpar isso ajuda seu site a funcionar de forma mais eficiente.

Nosso guia sobre como otimizar seu banco de dados WordPress mostra como usar um plugin para limpar seu banco de dados com segurança e rapidez.

Concentre-se no Desempenho Geral do WordPress, Não Apenas no Tamanho do DOM

Embora resolver o aviso 'Evite um tamanho de DOM excessivo' no WordPress seja importante para a velocidade do site, não é o único fator a ser considerado.

Um site com muita funcionalidade ou formatação exclusiva pode naturalmente ter um DOM maior, e tudo bem. A chave é encontrar o equilíbrio certo entre o desempenho do site e os recursos.

Portanto, além do tamanho do DOM, você pode querer prestar atenção a outras métricas como Core Web Vitals. Estas são métricas específicas que o Google usa para medir a experiência do usuário de um site.

Perguntas Frequentes Sobre Tamanho Excessivo do DOM

Aqui estão as respostas para algumas das perguntas mais comuns que recebemos sobre como corrigir problemas de tamanho do DOM no WordPress.

Qual é um bom tamanho de DOM para uma página da web?

De acordo com as diretrizes do Google, um bom objetivo é manter o tamanho do seu DOM abaixo de 1.500 nós totais, com uma profundidade máxima de aninhamento de 32 níveis e nenhum elemento único tendo mais de 60 filhos.

Usar um construtor de páginas sempre aumentará o tamanho do DOM?

Nem necessariamente. Construtores de páginas modernos e focados em desempenho, como o SeedProd, são projetados para gerar código limpo e eficiente. No entanto, alguns construtores de páginas mais antigos ou mal codificados podem adicionar muitos elementos de wrapper desnecessários que aumentam o tamanho do DOM.

Como posso verificar o tamanho do DOM do meu site gratuitamente?

Você pode usar ferramentas online gratuitas como o Google PageSpeed Insights ou o GTmetrix. Você também pode verificar diretamente no seu navegador. No Google Chrome, clique com o botão direito na sua página, escolha 'Inspecionar', vá para a aba 'Console' e digite o comando document.querySelectorAll('*').length e pressione Enter.

Recursos Adicionais para Desempenho do WordPress

Esperamos que este tutorial tenha ajudado você a aprender como corrigir o tamanho excessivo do DOM no WordPress.

Você também pode querer conferir estes guias relacionados sobre como melhorar o desempenho do seu site:

• O Guia Definitivo para Aumentar a Velocidade e o Desempenho do WordPress
• Como Acelerar o Desempenho do WooCommerce
• Maneiras Comprovadas de Reduzir a Taxa de Rejeição e Aumentar as Conversões

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.