Ou no GTmetrix "Reduza o número de elementos DOM":
O que é DOM?
Quando seu navegador recebe um documento HTML, ele deve ser convertido em uma estrutura de árvore, que é usada para renderização e desenho com CSS e JavaScript.
Essa estrutura em á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 um “galho” vai em uma árvore é chamado de profundidade. Por exemplo, no diagrama acima, a tag img tem uma profundidade de 3. (HTML -> body -> div -> img).
- Elementos filhos – todos os nós filhos de um nó (sem ramificações adicionais) são filhos.
O Lighthouse e o Google PageSpeed Insights começam a sinalizar páginas se uma das seguintes condições for atendida:
- Total para ter mais de 1500 nós.
- Ter uma profundidade de mais de 32 nós.
- O nó pai tem mais de 60 nós filho.
Como o tamanho do DOM afeta o desempenho?
O tamanho excessivo do DOM pode afetar o desempenho de diferentes maneiras.
- Maior tempo de análise e renderização (FCP) . Uma grande árvore DOM e regras de estilo complexas fazem um ótimo trabalho para o navegador. O navegador tem que analisar o HTML, construir a árvore de renderização, etc. Toda vez que o usuário interage ou algo no HTML muda, o navegador tem que calcular novamente.
- Aumenta o uso de memória - Seu código JavaScript pode ter funções para acessar elementos DOM. Uma árvore DOM maior força o JavaScript a usar mais memória para processá-los. Um exemplo seria um seletor de consulta, em
document.querySelectorAll('img')que lista todas as imagens comumente usadas por bibliotecas de carregamento lento. - Aumenta o TTFB – À medida que o tamanho do DOM aumenta, o tamanho do documento HTML aumenta (em KB). Como mais dados precisam ser transferidos pela rede, isso aumenta o TTFB.
Como reduzir o tamanho do DOM tecnicamente?
Por exemplo, é tecnicamente fácil reduzir o tamanho do DOM:
uso:
<ul id="navigation-main">etc..</ul>em vez 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 no site? Como serviços, formulários de contato, produtos, postagens em blogs, depoimentos, etc.?
Tente dividi-los em várias páginas e vinculá-los a partir do cabeçalho/barra de navegação.
Lazy loading e paginação de tudo o que é possível
Carregamento preguiçoso de todos os tipos de elementos. aqui estão alguns exemplos:
- Carregamento lento de vídeo do YouTube - Use WP YouTube Lyte ou Lazy Load por WP Rocket.
- Limite o número de postagens/produtos do blog por página – Eu costumo manter no máximo 10 posts por página e paginar o resto.
- Carregamento lento de postagens/produtos do blog – Adicione um botão Carregar mais ou rolagem infinita para carregar mais postagens ou produtos do blog.
- Comentários de carregamento lento - Estou usando o carregamento condicional do Disqus já que estou usando o Disqus . Se você estiver usando seus próprios comentários, use plugins como Lazy Load for Comments .
- Paginação de comentários - se você tiver centenas de comentários, isso também pode afetar o tamanho do DOM. Para paginar comentários, vá para Configurações -> Discussão -> Paginar comentários.
- Limite o número de postagens relacionadas – Tente limitar o número de posts relacionados a 3 ou 4.
Nota: imagens de carregamento lento não reduzirão o tamanho do DOM
Não esconda elementos indesejados com CSS
Às vezes você pode precisar remover elementos introduzidos por um tema/designer. Por exemplo, adicione um botão ao carrinho nas páginas do produto, um botão de taxa, informações do autor, data de publicação etc.
Uma solução rápida é ocultá-los com CSS:
botão .cart {exibir:nenhum;}Embora essa solução pareça simples, você está expondo os usuários a código indesejado (que inclui marcação HTML e estilo CSS).
Verifique as configurações do seu tema/plugin para ver se há uma opção para removê-lo. Caso contrário, encontre o código PHP relevante e remova/comente-o.
Use temas e construtores de páginas bem escritos
Um bom tema desempenha um papel importante no tamanho do DOM. Use temas bem escritos comoGerar Imprensa ouAstra .
Os construtores de páginas também introduzem muitas divs. Use construtores comooxigênio, que não introduzem blocos div indesejados e têm mais controle sobre a estrutura HTML.
Conclusão
Pode haver mais plugins ou configurações de tema que introduzam muitos divs. Um exemplo seria plugins de "mega menu" como o UberMenu.
Às vezes, eles são críticos 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 só rola até 75%.
Use ferramentas como HotJar ou Google Analytics Events para descobrir o que os visitantes estão realmente usando e o que não estão usando.Analise, meça e repita.
