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”:
Tabela Conteúdo
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.
