Como reduzir o tamanho do Document Object Model (DOM) em um site WordPress.

Existem várias maneiras de reduzir o tamanho do Document Object Model (DOM) em um site WordPress. Aqui estão algumas dicas gerais:

• Use um tema otimizado: Escolha um tema WordPress que seja otimizado para desempenho e que não tenha muitos elementos desnecessários no DOM.

• Limpe o código: Remova quaisquer códigos desnecessários, como comentários, espaços em branco e quebras de linha desnecessários.

• Minifique seus arquivos: Utilize ferramentas para minificar seus arquivos CSS e JavaScript para reduzir seu tamanho.

• Use plugins de otimização: Existem vários plugins WordPress que podem ajudar a otimizar o tamanho do DOM, como o Autoptimize e o WP Minify.

• Utilize CDN: Utilize um Content Delivery Network (CDN) para entregar arquivos estáticos, como imagens, CSS e JavaScript, a partir de um servidor próximo ao visitante, reduzindo a latência e melhorando o desempenho.

Ao analisar seu site através do Google PageSpeed Insights, você pode ter notado um erro como “Evitar um excesso de tamanho de DOM”:

Ou no GTmetrix “Reduzir o número de elementos do DOM”:

O que é DOM?

Quando um browser recebe um documento HTML, ele precisa converter esses dados em uma estrutura de árvore para que possa processá-los e exibi-los corretamente. Esta estrutura é conhecida como o DOM (Modelo de Objeto de Documento) e é usada para navegar e manipular os elementos do HTML, bem como aplicar regras de estilo com o CSS e adicionar funcionalidade com o JavaScript. A árvore DOM é construída pelo browser e é o que permite que o conteúdo seja exibido de forma eficiente e interativa para o usuário final.

• Nós – Todos os elementos do HTML no DOM são chamados de Nós. (Também conhecido como “folhas” da árvore).
• Profundidade – A medida do “ramo” em uma árvore é chamada de profundidade. Por exemplo, no diagrama acima, a tag “img” de abertura possuiria uma profundidade de 3 (HTML -> corpo -> div -> img).
• Elementos filhos – Os nós filhos de um nó (sem qualquer ramificação) são chamados de elementos filhos.
• Ferramentas como o Google PageSpeed Insights podem sinalizar problemas quando há mais de 1.500 nós, profundidade maior do que 32 nós ou um nó pai com mais de 60 nós filhos.

Como o tamanho do DOM afeta o desempenho?

Excesso de tamanho do DOM pode afetar o desempenho de diferentes maneiras.

• Análise superior e tempo de renderização (FCP) – Uma grande árvore DOM e regras de estilo complicadas podem exigir muito trabalho do navegador. O navegador precisa analisar o HTML, construir a árvore de renderização e assim por diante. Sempre que o usuário interage ou há alterações no HTML, o navegador precisa recalcular tudo novamente.

• Aumento no uso de memória – O código JavaScript pode ter funções para acessar os elementos DOM. Quanto maior a árvore DOM, mais memória o JavaScript precisa para trabalhar com isso. Um exemplo é uma consulta seletora como document.querySelectorAll(‘img’), que lista todas as imagens e é comumente usada por bibliotecas de carregamento lento.

• Aumento no TTFB – Quanto maior o tamanho do DOM, maior o tamanho do documento HTML (em KB). Isso significa que mais dados precisam sertransferidos através da rede, o que aumenta o TTFB (tempo de transferência do primeiro byte).

Como diminuir tecnicamente o tamanho do DOM?

Por exemplo, a redução técnica do tamanho do DOM é simples, como:

Utilização:

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

em vez de:

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

Basicamente, elimine todos os elementos HTML desnecessários. Além disso, utilizar técnicas como Flexbox ou Grid pode ajudar ainda mais na redução do tamanho do DOM.

No entanto, se você está usando o WordPress, essas técnicas podem não ser tão eficazes.

Como diminuir o tamanho do DOM no WordPress?

Processamento Preguiçoso abaixo da dobra de conteúdo É possível informar ao navegador para processar conteúdo (ou elementos) somente quando eles forem necessários acima da dobra. Isso é semelhante ao carregamento tardio de imagens, mas para elementos HTML.

Uma forma de implementar o processamento preguiçoso é utilizando o plugin FlyingPress.

Fragmentar páginas grandes em várias páginas menores.

Se você tem uma página com uma variedade de conteúdos, como serviços, formulários de contato, produtos, postagens de blogs e depoimentos, é recomendável dividi-los em várias páginas e vinculá-los a partir do cabeçalho ou barra de navegação.

Melhorando o desempenho com a divisão de conteúdo em páginas

• Carregamento lento de imagens – Utilizar ferramentas como o Lazy Load para carregar as imagens somente quando elas estiverem visíveis na tela.
• Limitar o número de elementos por página – Tentar manter um número limitado de elementos, como produtos ou postagens, por página e paginar o restante deles.
• Carregamento lento de widgets – Utilizar o plugin “Lazy Load for Widgets” para carregar os widgets somente quando eles estiverem visíveis na tela.
• Carregamento lento de comentários – Utilizar ferramentas como o Disqus Conditional Load para carregar comentários somente quando a seção de comentários estiver visível na tela.
• Paginação de comentários – Se você tem centenas de comentários, isso pode afetar o tamanho do DOM. Paginar os comentários: vá para Configurações -> Discussão -> Quebra de comentários em páginas.
• Limite de elementos relacionados – Tente limitar a contagem de elementos relacionados para 3 ou 4.

Nota: Não reduzirá o tamanho do DOM o carregamento lento de imagens.

Evitar ocultar elementos indesejados com CSS

“Removendo elementos indesejados usando CSS: Por que evitá-lo?”

É tentador usar CSS para esconder elementos indesejados em sua página, como botões de compra em páginas de produtos, avaliações, informações de autor e data de publicação. No entanto, essa abordagem pode ter efeitos negativos no desempenho da sua página.

Quando você usa CSS para esconder elementos, eles ainda estão presentes no HTML, o que significa que o navegador ainda precisa processá-los. Isso pode aumentar o tamanho do DOM e afetar o tempo de carregamento da página.

Em vez de esconder elementos indesejados com CSS, é melhor removê-los completamente do HTML. Isso pode ser feito usando plugins ou editando o código-fonte do tema. Além de melhorar o desempenho da página, essa abordagem também pode ajudar a manter o código limpo e organizado.

Uma solução rápida é escondê-los usando CSS:

.cart-button {
  display:none;
}

Ao esconder elementos indesejados usando CSS, você pode pensar que está resolvendo o problema de forma rápida e fácil. No entanto, essa solução pode trazer problemas, pois você ainda estará servindo código indesejado para os usuários, incluindo tanto a marcação HTML quanto os estilos CSS.

Em vez disso, é recomendado verificar as configurações do seu tema ou plugin para ver se há uma opção para remover esses elementos indesejados. Se não houver, busque o código PHP correspondente e remova ou comente-o.

Temas e construtores de páginas bem estruturados

Para garantir uma boa performance, é importante escolher um tema bem codificado.

Alguns exemplos de temas recomendados são o GeneratePress ou Astra. Além disso, os construtores de página também podem adicionar muitos elementos desnecessários ao DOM.

É importante escolher um construtor que não adicione elementos indesejados e dê mais controle sobre a estrutura HTML, como o Oxigênio. Se você é novo no Oxygen, recomendamos assistir ao tutorial “Construindo um Site do Zero com Oxygen“.

Concussão

Existem muitos plugins e configurações de tema que podem adicionar elementos desnecessários ao seu site, como por exemplo, um menu “mega” como o UberMenu.

Embora esses elementos possam ser importantes para a experiência do usuário, às vezes eles nunca são realmente utilizados. É importante analisar como os visitantes estão interagindo com seu site para identificar esses elementos e decidir se eles são realmente necessários ou não.

Ferramentas como o HotJar ou o Google Analytics podem ajudar nesta análise.

Se você tiver alguma dúvida ou comentário, deixe um comentário abaixo e faremos o possível para responder em até 8 horas.