Índice
Na esfera digital, cada fração de segundo conta. Portanto, o desempenho de um site é crucial para a satisfação e o engajamento do usuário. Melhorar o desempenho pode aumentar a probabilidade de alcançar os objetivos do seu site.
Um site com uma saída de DOM grande aumenta o tamanho do HTML, o que pode prejudicar o desempenho do site. No entanto, existem técnicas para diminuir o tamanho do DOM do seu site. Este post irá explorar como melhorar sites Elementor empregando várias estratégias para minimizar o tamanho do HTML.
Entendendo o Problema do “Tamanho Extensivo do DOM”
O DOM (Document Object Model) representa a estrutura de uma página web. Um tamanho extensivo do DOM geralmente indica uma estrutura de DOM complexa, muitas vezes causada pelo uso excessivo de elementos HTML, nós aninhados ou injeções de conteúdo dinâmico. Páginas com um grande número de elementos HTML tendem a carregar lentamente e podem impactar animações e outras interações do usuário.
Impacto do Tamanho do DOM no Desempenho da Página
Um tamanho grande do DOM pode aumentar o tempo de renderização, causando renderização atrasada da página e tempos de carregamento mais lentos. Isso ocorre porque os navegadores precisam analisar e renderizar cada nó. Além disso, cada nó do DOM requer memória do navegador, potencialmente levando ao esgotamento de recursos do sistema e aumento do consumo de memória. Isso pode resultar em degradação do desempenho, especialmente em dispositivos de baixo custo.
Além disso, um tamanho excessivo do DOM pode causar interações de usuário lentas e diminuição da responsividade durante o uso do site. Um grande número de elementos do DOM geralmente inclui muitos ouvintes de eventos, adicionando sobrecarga e retardando as interações do usuário. Não mencionaremos todas as razões, mas a regra geral é que quanto maior o tamanho do HTML, mais lenta será a página.
Como Medir o Tamanho do DOM com Ferramentas Externas?
Para medir o impacto do tamanho do DOM no desempenho do site, você pode usar as seguintes ferramentas:
Google Chrome DevTools – Vá para o painel “Elements” para verificar os elementos do DOM e sua profundidade de aninhamento. Use a aba “Performance” para avaliar o desempenho de renderização e identificar possíveis gargalos causados pela manipulação do DOM.
Lighthouse – As auditorias do Lighthouse oferecem insights sobre métricas de tamanho do DOM, como “DOM Size”, “DOM Depth” e “Maximum DOM Depth”, apontando áreas para melhoria.
WebPageTest – Avalie métricas de tamanho do DOM em gráficos de Waterfall e resultados de desempenho para entender a relação entre a complexidade do DOM e os tempos de carregamento da página.
O que é Considerado um Tamanho Grande de DOM?
Lighthouse sinaliza páginas com árvores DOM da seguinte forma:
- Avisa quando o elemento
<body>tem mais de 818 nós. - Erros quando o elemento
<body>tem mais de 1.400 nós.
No entanto, essas métricas podem mudar no futuro. Além disso, diferentes ferramentas podem definir diferentes limites para alertar sobre o tamanho extensivo do DOM.
Reduzindo o Tamanho do DOM no Elementor
O Elementor é um construtor de sites visual de arrastar e soltar que simplifica o processo de adicionar elementos à página. Usar o Elementor geralmente não impacta negativamente o desempenho do seu site. No entanto, existem passos que você pode tomar para otimizar ainda mais as páginas que você constrói. Isso inclui reduzir o número de elementos HTML que podem minimizar o DOM, sem afetar o design.
Para otimizar efetivamente, é útil entender a estrutura dos elementos de layout do Elementor. Vamos nos concentrar nos elementos de layout porque uma página típica contém dezenas desses elementos, então otimizá-los gera um impacto maior.
Existem três técnicas recomendadas para otimizar seus elementos de layout:
- Migrar de seções/colunas para contêineres.
- Achatamento de contêineres com contêineres aninhados únicos.
- Implementar contêineres de largura total em vez de contêineres de largura fixa, sempre que possível.
Vamos aprender mais sobre como reduzir o tamanho do DOM no Elementor.
Tipos de Elementos do Elementor
O Elementor tem dois tipos de Elementos:
- Widgets – todos os elementos regulares que você usa para construir seu site, como cabeçalho, imagem, ícone, botão, divisor, etc.
- Elementos de Layout – elementos estruturais como Seção/Colunas e Contêineres. Esses elementos envolvem os widgets e os agrupam.
Vamos nos concentrar nos elementos de layout em termos de como reduzir o tamanho do DOM.
Estrutura HTML dos Elementos de Layout
No Elementor, cada elemento estrutural consiste em duas tags <div>: uma externa <div> e uma interna <div>.
Isso é importante notar, pois vamos ver como podemos reduzir a quantidade de elementos HTML nos seus elementos de layout estrutural.
Estrutura HTML de Seção/Coluna:
Ao usar seções e colunas, o HTML final consiste em dois níveis de layout, cada um dos quais tem dois elementos <div>, dois para seções e dois para colunas.
No total, envolvemos widgets com quatro elementos <div>:
<div class="elementor-section">
<div class="elementor-container" >
<div class="elementor-column">
<div class="elementor-widget-wrap">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
</div>
</div>Estrutura HTML de Contêiner:
O Elementor introduziu Contêineres como uma forma de construir páginas com uma estrutura e DOM mais enxutos.
Ao mudar para contêineres, o HTML resultante consiste em apenas dois elementos <div>, não quatro, o que significa que você obtém o mesmo design com metade dos elementos <div>.
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Achatamento da Estrutura HTML Usando Contêineres
No passado, seções ou colunas eram usadas para estruturar sites. Hoje em dia, sites modernos usam CSS flex e CSS grid para alcançar a mesma estrutura visual com menos código. Por essa razão, o Elementor introduziu Containers. Ao converter seus elementos estruturais para containers, você pode simplificar a estrutura HTML e eliminar o excesso desnecessário.
Enquanto as seções são empilhadas uma sobre a outra, as colunas são posicionadas lado a lado. Por outro lado, os containers podem empilhar elementos internos em uma linha ou em uma coluna. Podemos usar essas diferenças para otimizar algumas estruturas.
Se uma seção tiver várias colunas, as estruturas convertidas terão um container de direção de coluna com vários containers de direção de linha.
No entanto, se uma seção contiver uma única coluna, você pode otimizar essa estrutura ao converter para containers.
Você pode eliminar um nível de container sem afetar o design.
Obtendo uma redução de 50% no tamanho do DOM, de quatro elementos <div> para apenas dois.
Agora multiplique isso pelo número de elementos de layout que cada página possui, para calcular o impacto no seu site.
Vale notar que você pode realmente diminuir o tamanho do DOM em elementos de seção/coluna que aninham seções internas.
Nesses casos, o elemento emprega oito níveis de elementos <div> antes de exibir o widget.
Converter para containers pode reduzir isso de oito níveis de elementos <div> para quatro níveis, e em alguns casos para apenas dois níveis de elementos <div>.
Se você ainda está usando uma estrutura de layout de seção/coluna, é hora de migrar para containers. Os benefícios superam o trabalho que você investirá no processo de migração. Para simplificar a migração, o Elementor até fornece um conveniente botão “Converter” para esse propósito.
Boxed vs. Full Width
Um método adicional de otimizar o tamanho do DOM é distinguindo entre containers boxed e containers full-width.
Um container boxed tem uma largura máxima, necessitando do uso de um elemento interno <div> no Elementor.
Por outro lado, um container full-width esticado para ambos os lados requer apenas um elemento <div>.
Estrutura Boxed:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Estrutura Full Width:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>Otimizar Estrutura de Containers Aninhados
Agora que entendemos as diferentes estruturas HTML de containers boxed e full-width, podemos começar a otimizar a saída do DOM do nosso site, especialmente containers que aninham outros containers dentro.
A próxima dica de otimização é a seguinte: Se você tiver um container pai que usa largura boxed, você pode fazer com que todos os containers aninhados sejam full-width. Dessa forma, você obtém o mesmo design, mas com menos HTML.
<div class="e-con e-con-parent">
<div class="e-con-inner">
<div class="e-con e-con-child">
…
</div>
<div class="e-con e-con-child">
…
</div>
</div>
</div>A estrutura HTML acima tem um container pai boxed.
Se os dois containers filhos também forem boxed, cada um consistirá em dois níveis de elementos <div>.
Mas se eles forem full-width, apenas um <div> será usado.
Mais uma vez, essa otimização é válida apenas se o container pai for boxed.
Conclusões
Como você viu, existem três estratégias fáceis para otimizar o tamanho do DOM dos seus elementos de layout: substituir elementos de layout de seção/coluna por containers; containers com um único container aninhado podem ser achatados; e se você estiver usando containers aninhados e o container pai for boxed, defina todos os containers internos para full-width.
Essas estratégias podem ajudar a eliminar numerosos elementos <div> desnecessários do HTML do seu site e melhorar o desempenho geral da sua página web.
Procurando por conteúdo novo?
Receba artigos e insights em nossa newsletter semanal.
Ao inserir seu email, você concorda em receber e-mails da Elementor, incluindo e-mails de marketing,
e concorda com nossos Termos e Condições e Política de Privacidade.
