Como reduzir o tamanho do DOM no WordPress

Avalie este artigo post

Ao analisar seu site por meio do Google PageSpeed ​​Insights, você pode ter visto um erro como “Evite um tamanho DOM excessivo”:

O que é DOM?

Render Tree Construction

Quando seu navegador recebe um documento HTML, ele deve ser convertido em uma estrutura semelhante a uma árvore que é usada para renderizar e pintar com a ajuda de CSS e JavaScript.

Essa estrutura semelhante a uma ‘árvore’ é chamada de DOM ou Document Object Model.

  • Nós – todos os elementos HTML no DOM são chamados de nós. (também conhecido como “folhas” na árvore).
  • Profundidade – Quanto tempo dura o “galho” em uma árvore é chamado de profundidade. Por exemplo, no diagrama acima, a tag “img” tem uma profundidade de 3. (HTML -> corpo -> div -> img).
  • Elementos filho – Todos os nós filhos de um nó (sem qualquer ramificação adicional) são elementos filhos.

O Lighthouse e o Google PageSpeed ​​Insights começam a sinalizar páginas se qualquer uma das seguintes condições for atendida:

  • Possui mais de 1.500 nós no total.
  • Ter uma profundidade maior que 32 nós.
  • Ter um nó pai com mais de 60 nós filhos.

Como o tamanho do DOM afeta o desempenho?

O tamanho excessivo do DOM pode afetar o desempenho de maneiras diferentes.

  • Maior tempo de análise e renderização (FCP) – Uma grande árvore DOM e regras de estilo complicadas fazem um trabalho enorme para o navegador. O navegador precisa analisar o HTML, construir a árvore de renderização, etc. Cada vez que o usuário interage ou algo no HTML muda, o navegador precisa computar isso novamente.
  • Aumenta o uso de memória – Seu código JavaScript pode ter funções para acessar elementos DOM. Uma árvore DOM maior faz com que o JavaScript use mais memória para processá-los. Um exemplo seria um seletor de consulta document.querySelectorAll('img')que lista todas as imagens, comumente usado por bibliotecas de carregamento lento .
  • Aumenta TTFB – À medida que o tamanho do DOM aumenta, o tamanho do documento HTML aumenta (em KBs). Visto que mais dados precisam ser transferidos pela rede, isso aumenta o TTFB .

Como reduzir o tamanho do DOM tecnicamente?

Por exemplo, reduzir tecnicamente o tamanho do DOM é simples como:

usar:

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

ao invés de:

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

Basicamente, livre-se de todos os elementos HTML possíveis. Você também pode usar Flexbox ou Grid para reduzir ainda mais o tamanho do DOM.

Mas como você está usando o WordPress, isso não vai te ajudar muito!

Como reduzir o tamanho do DOM no WordPress?

Divida páginas grandes em várias páginas

Você tem uma página com tudo o que você tem no site? Como serviços, formulários de contato, produtos, postagens em blogs, depoimentos, etc?

Tente dividi-los em várias páginas e criar um link para eles no cabeçalho / barra de navegação.

Carregue preguiçosamente e pagine tudo o que for possível

Carregue preguiçosamente todos os elementos possíveis. Alguns exemplos podem ser:

  • Vídeos Lazy load do YouTube – use WP YouTube Lyte ou Lazy Load da WP Rocket .
  • Limite o número de postagens / produtos de blog por página – geralmente tento manter no máximo 10 postagens de blog por página e paginar o restante.
  • Carregamento lento de postagens / produtos de blog – Adicione o botão “carregar mais” ou role infinita para carregar mais postagens de blog ou produtos.
  • Comentários de carregamento lento – Eu uso a seção de comentários de carregamento lento usando o Disqus Condicional, já que uso o Disqus . Se você estiver usando comentários nativos, use plug-ins como Lazy Load for Comments .
  • Comentários da paginação – se você tiver centenas de comentários, isso também pode afetar o tamanho do DOM. Pagine os comentários acessando Configurações -> Discussão -> Divida os comentários em páginas.
  • Limitar a contagem de postagens relacionadas – Tente limitar a contagem de postagens relacionadas a 3 ou 4.

Não esconda elementos indesejados usando CSS

Às vezes, pode ser necessário remover elementos injetados pelo tema / construtor. Por exemplo, adicione ao botão do carrinho nas páginas do produto, botão de classificação, informações do autor, data de publicação etc.

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

.cart-button {
  display:none;
}

Embora essa solução pareça fácil, você está servindo código indesejado aos usuários (o que inclui marcação HTML e estilos CSS).

Verifique as configurações do tema / plugin para ver se há uma opção para removê-lo. Caso contrário, encontre o respectivo código PHP e remova / comente-o.

Use temas e construtores de páginas bem codificados

Um bom tema tem um papel importante no tamanho do DOM. Use temas bem codificados como GeneratePress ou Astra .

Conclusão

Pode haver mais plug-ins ou configurações de tema que injetam muitos divs. Um exemplo podem ser plug-ins de “mega menu” como o UberMenu .

Às vezes, eles são cruciais para a experiência do usuário do seu site. Mas às vezes eles nunca são usados ​​pelos usuários.

Talvez seus links de rodapé nunca sejam clicados porque a maioria dos visitantes está rolando apenas até 75%.

Use ferramentas como HotJar ou Microsoft Clarity eventos do Google Analytics para ver o que os visitantes estão realmente usando ou não. Analise, meça e repita.

Comente abaixo se você tiver alguma dúvida ou feedback. Eu li e respondo a cada um deles em 8 horas!

Adicionar comentário

O seu endereço de e-mail não será publicado.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.