Chaves para reduzir o tamanho DOM de um site

Um dos aspectos que influenciam a obtenção de um bom posicionamento de SEO em uma página web é o desempenho de carregamento. E este é um assunto em que o tamanho DOM de uma página desempenha um papel fundamental.

Por isso vamos explicar como um DOM pode ser considerado excessivamente grande e como reduzi-lo.

Vamos começar!

O que é o DOM?

Simplificando, quando falamos do DOM, estamos nos referindo à estrutura dos objetos que o navegador gera toda vez que carrega uma página . Deve seu nome à sigla Document Object Model.

É uma estrutura hierárquica na qual existem diferentes objetos, alguns dos quais dependem de outros. A estrutura é semelhante a uma árvore, pois existe o objeto principal do qual dependem outros itens secundários. O DOM representa a estrutura HTML da página como uma árvore , composta por uma série de tags.

Em outras palavras, quando o navegador prepara uma página para nos mostrar, ele constrói uma árvore de objetos composta por todos os elementos de uma página com base em sua estrutura HTML.

Toda vez que o navegador recebe um documento HTML, ele precisa convertê-lo nessa estrutura em forma de árvore, que chamamos de DOM ou árvore DOM. O código JavaScript pode acessar esse DOM e modificá-lo.

Como o tamanho do DOM afeta seu desempenho na web?

A verdade é que o tamanho do DOM afeta o desempenho de uma página. Um DOM excessivamente grande pode diminuir a velocidade do site , pois tem os seguintes impactos:

• Eficiência de rede e desempenho de carga. Se o DOM for excessivamente grande, geralmente inclui elementos HTML que não são visíveis na primeira vez que o usuário carrega a página, aumentando desnecessariamente o consumo de dados e tornando o carregamento do site mais lento.
• Desempenho em tempo de execução. À medida que usuários e scripts interagem com uma página, o navegador deve recalcular continuamente a posição e o estilo das tags HTML.
• Desempenho da memória . Se a árvore DOM for muito grande, o navegador pode precisar de mais memória para processá-la.

Como reduzir tecnicamente o tamanho do DOM?

Para reduzir o tamanho do DOM para que ele não afete negativamente o desempenho da Web , você deve remover todos os elementos HTML desnecessários . Como vimos, se não tomarmos as medidas necessárias, há vários motivos para que a página fique mais lenta.

Em vez de usar este código;

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

Seria melhor usar este outro;

 <ul id = ”navigation-main”>   etc .. </ul>

Com relação à estrutura em árvore, precisamos conhecer os seguintes termos:

• Nós : Todos os elementos HTML do DOM. Eles também são conhecidos como as 'folhas' da árvore.
• Nós Secundários : Aqueles nós que não possuem mais ramificações.

Dito isso, o melhor é que a profundidade da árvore é formada por :

• Menos de 32 nós.
• Menos de 60 nós secundários por cada nó.

O Google recomenda que, ao desenvolver sites, as páginas contenham menos de 1.500 nós DOM , o que significa que os designs não devem ser muito complexos.

Como reduzir o tamanho do DOM no WordPress

Existem várias maneiras de reduzir o tamanho do DOM no WordPress:

Segmente páginas grandes em várias páginas

Você tem uma única página exibindo diferentes tipos de conteúdo do seu site? Por exemplo, formulários de contato, postagens de blog, produtos etc.

Nesse caso, é melhor classificar todos esses elementos em páginas diferentes e vinculá-los através da barra de navegação.

Ative o plugin de carregamento lento e divida todos os elementos possíveis em páginas

Você pode habilitar um módulo de carregamento lento em todos os elementos que o permitem. Você pode fazer isso com vídeos do YouTube, usando Youtube Lite ou Lazy Load do WordPress WP-Rocket.

Também é essencial limitar o número de posts por página do blog . Um número máximo razoável de posts seria 10 por página. Essa prática também se aplica ao número de produtos que devem aparecer em cada página.

Há uma opção para alterar o número de posts por página. Vá para Menu Configurações> Submenu Leitura, altere a exibição de páginas do blog no máximo valor e salve as alterações .

Também recomendamos limitar a contagem de publicações relacionadas a um número máximo de três ou quatro.

Remova itens desnecessários incluídos no tema padrão do WP

Em alguns casos, pode ser necessário remover certos elementos que acompanham o seu tema WordPress por padrão , como o botão “Adicionar ao carrinho” nas páginas do produto, data de publicação, informações do autor, etc.

Verifique a configuração do tema WordPress para ver se há uma opção para remover esses elementos e, se não, procure o código PHP correspondente para removê-los.

Use temas ou construtores de páginas bem codificados

A qualidade do tema WordPress afeta diretamente o tamanho do DOM. Portanto, é aconselhável usar temas bem codificados, como Astra ou GeneratePress.

Os construtores de páginas também costumam inserir muitas tags div, por isso é importante usar soluções como Oxygen Builders, que não injetam elementos indesejados e permitem mais controle sobre a estrutura HTML.

Ferramentas como o HotJar permitem que você veja o que os usuários estão usando e o que não está funcionando para eles. Executar uma análise detalhada é fundamental para obter o tamanho correto do DOM.

Pensamentos finais

Um Dom Size excessivo prejudica o desempenho da web, diminuindo o tempo de carregamento da página. Mantenha sua estrutura HTML simples sem elementos desnecessários . Verifique sua árvore DOM e livre-se daqueles nós que não agregam valor ao seu site. Você não apenas acelerará seu site, mas também oferecerá um melhor UX.

O Google, sem dúvida, considerará o tamanho do DOM na atualização do Page Experience que será lançada nos próximos meses. Certifique-se de ter um adequado, para que não afete seu desempenho na web.