Escola Ninja WP
  • Elementor
  • Loja Virtual
  • Hospedagem
Consultoria WordPress
Sem resultados
Exibir todos os resultados
Blog Escola Ninja WP
  • Elementor
  • Loja Virtual
  • Hospedagem
Consultoria WordPress
Blog Escola Ninja WP
Sem resultados
Exibir todos os resultados
Home Blog

Como reduzir o tamanho do DOM no WordPress

Como otimizar o WordPress reduzindo o tamanho do DOM

por Flavio Henrique
janeiro 15, 2021
em Blog, performance
0
Como reduzir o tamanho do DOM no WordPress
Compartilhar no FacebookCompartilhar no TwitterCompartilhar no WhatsApp

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?

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.
Nota: Imagens de carregamento lento não reduzem o tamanho do DOM

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!

Post Anterior

WooCommerce Pix – O novo método de pagamento que vai revolucionar o mercado de E-commerce

Próximo Post

Elementor – O grande Problema & Soluções

Flavio Henrique

Flavio Henrique

Sou especialista WordPress com formação em análise e desenvolvimento de sistemas para internet com especialização em Marketing Digital. Meu objetivo com este blog é te ajudar a alavancar o seu negócio com o WordPress.

Próximo Post
Elementor – O grande Problema & Soluções

Elementor - O grande Problema & Soluções

Deixe uma resposta Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Veja também

Cloudflare – Tudo o que precisa saber para começar a usar

Cloudflare – Tudo o que precisa saber para começar a usar

março 9, 2021
Ecommerce – Tudo o que você precisa saber para começar o seu novo negócio

Ecommerce – Tudo o que você precisa saber para começar o seu novo negócio

março 9, 2021
Qual tecnologia um site foi Feito?

Qual tecnologia um site foi Feito?

março 9, 2021
Estratégia Matadora para não dar mais descontos para o seu cliente

Estratégia Matadora para não dar mais descontos para o seu cliente

março 6, 2021
Painel do WordPress lento – Como Bloquear solicitações de API externas no WordPress

Painel do WordPress lento – Como Bloquear solicitações de API externas no WordPress

março 8, 2021
Como vender sites WordPress – 5 Dicas fundamentais dos segredo da venda

Como vender sites WordPress – 5 Dicas fundamentais dos segredo da venda

março 4, 2021

Especialistas WordPress

Está precisando de um especialista WordPress para te ajudar em seu projeto? Entre em contato conosco.

Categorias

  • Add-ons
  • Blog
  • Elementor
  • Ferramentas
  • GDPR no WordPress
  • Hospedagem
  • Loja Virtual
  • Marketing
  • Negócios
  • performance
  • Plugins
  • programacao
  • Segurança WordPress
  • SEO
  • SEO Power Suite
  • Temas
  • Uncategorized
  • vendas
  • WordPress

Fique ligado

  • Elementor
  • Loja Virtual
  • Hospedagem

Sem resultados
Exibir todos os resultados
  • Elementor
  • Loja Virtual
  • Hospedagem