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

Flavio Henrique por Flavio Henrique
janeiro 15, 2021
em Blog, performance
0
Como reduzir o tamanho do DOM no WordPress
480
SHARES
1.5k
VIEWS
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?

Como reduzir o tamanho do DOM no WordPress 1

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!

0
Post Anterior

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

Próximo Post

JetEngine – Tutorial Como Criar o Cadastro de Usuários

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
JetEngine – Tutorial Como Criar o Cadastro de Usuários

JetEngine - Tutorial Como Criar o Cadastro de Usuários

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

JetEngine – Calculadora de Orçamentos Completa

JetEngine – Calculadora de Orçamentos Completa

janeiro 20, 2021
Curso Elementor 100% Grátis – Completo e Atualizado – Aula 1

Curso Elementor 100% Grátis – Completo e Atualizado – Aula 1

janeiro 19, 2021
Curso Elementor Avançado – Criando um Site Mobile

Curso Elementor Avançado – Criando um Site Mobile

janeiro 19, 2021
Como criar formulários com JetEngine – Guia Completo

Como criar formulários com JetEngine – Guia Completo

janeiro 18, 2021
Veja conteúdo Exclusivo para cada Usuário no WordPress com Jet Engine

Veja conteúdo Exclusivo para cada Usuário no WordPress com Jet Engine

janeiro 18, 2021
Curso JetEngine – Planejamento Básico

Curso JetEngine – Planejamento Básico

janeiro 15, 2021
Blog Escola Ninja WP

Empresa Especializada em WordPress.

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
  • WordPress

Fique ligado

  • Elementor
  • Loja Virtual
  • Hospedagem

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