Na esfera digital, cada fração de segundo importa. 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 atingir as metas do seu site.
Na esfera digital, cada fração de segundo importa. 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 atingir as metas do seu site.
Um site com uma grande saída DOM 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 vai se aprofundar em como melhorar sites Elementor empregando várias estratégias para minimizar o tamanho do HTML.
Compreendendo o problema do “tamanho extenso do DOM”
O DOM (Document Object Model) representa a estrutura de uma página da web. Um tamanho de DOM extenso geralmente indica uma estrutura de DOM complexa, frequentemente 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 de DOM pode aumentar o tempo de renderização, causando atraso na renderização 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ó DOM requer memória do navegador, o que pode levar ao esgotamento dos recursos do sistema e ao aumento do consumo de memória. Isso pode resultar em degradação do desempenho, especialmente em dispositivos de baixo custo.
Além disso, o tamanho excessivo do DOM pode causar interações lentas do usuário e diminuição da capacidade de resposta durante o uso do site. Um alto número de elementos DOM geralmente inclui muitos ouvintes de eventos, adicionando sobrecarga e tornando as interações do usuário mais lentas. Não mencionaremos todos os motivos, mas a regra geral é que quanto maior o tamanho do HTML, mais lenta 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 DOM e sua profundidade de aninhamento. Use a aba “Performance” para avaliar o desempenho da renderização e identificar potenciais gargalos causados pela manipulação do DOM.
Lighthouse – As auditorias do Lighthouse oferecem insights sobre métricas de tamanho do DOM, como “Tamanho do DOM”, “Profundidade do DOM” e “Profundidade máxima do DOM”, apontando áreas para melhorias.
WebPageTest – Avalie as métricas de tamanho do DOM em gráficos em cascata 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 de DOM grande?
O Lighthouse sinaliza páginas com árvores DOM da seguinte maneira:
- Avisa quando o
<body>elemento tem mais de 818 nós . - Erros quando o
<body>elemento tem mais de 1.400 nós .
No entanto, essas métricas podem mudar no futuro. Além disso, diferentes ferramentas podem definir limites diferentes para alertar sobre tamanho de DOM extenso.
Reduzindo o tamanho do DOM do Elementor
Elementor é um construtor de sites visual de arrastar e soltar que simplifica o processo de adicionar elementos à página. Usar o Elementor normalmente não afeta negativamente o desempenho do seu site. No entanto, há etapas que você pode seguir para otimizar ainda mais as páginas que você cria. 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 produz um impacto maior.
Existem três técnicas recomendadas para otimizar os elementos do seu layout:
- Migrar de seções/colunas para contêineres.
- Achate os recipientes com recipientes aninhados simples.
- Implemente contêineres aninhados de largura total em vez de contêineres de largura em caixa sempre que possível.
Vamos aprender mais sobre como reduzir o tamanho do DOM do Elementor.
Tipos de elementos Elementor
O Elementor tem dois tipos de elementos:
- Widgets – todos os elementos regulares que você usa para construir seu site, como título, imagem, ícone, botão, divisor, etc.
- Elementos de Layout – elementos estruturais como Section/Columns e Containers. 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 <div>tags: uma outer <div>e uma inner <div>. É importante notar isso, pois veremos como podemos reduzir a quantidade de elementos HTML em seus elementos de layout estrutural.
Estrutura HTML da 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 <div>elementos, dois para seções e dois para colunas. No total, nós envolvemos widgets com quatro <div>elementos:
<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 do Container:
O Elementor introduziu os contêineres como uma forma de construir páginas com uma estrutura e DOM mais enxutos.
Ao alternar para contêineres, o HTML resultante consiste em apenas dois <div>elementos, não quatro, o que significa que você obtém o mesmo design com metade dos <div>elementos.
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>Diminuir a 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 atingir a mesma estrutura visual com menos código. Por esse motivo, o Elementor introduziu Containers . Ao converter seus elementos estruturais em containers, você pode simplificar a estrutura HTML e eliminar volume desnecessário.
Enquanto as seções são empilhadas umas sobre as outras, as colunas são posicionadas lado a lado. Por outro lado, os contêineres 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 único contêiner de direção de coluna com vários contêineres de direção de linha. No entanto, se uma seção contiver uma única coluna, você pode otimizar essa estrutura ao converter para contêineres. Você pode eliminar um nível de contêiner sem afetar o design. Ganhando 50% de redução no tamanho do DOM, de quatro <div>elementos para apenas dois. Agora multiplique isso pelo número de elementos de layout que cada página tem, para calcular o impacto em seu site.
Vale a pena 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 <div>elementos antes de exibir o widget. A conversão para contêineres pode reduzir isso de oito níveis de <div>elementos para quatro níveis e, em alguns casos, para apenas dois níveis de <div>elementos.
Se você ainda estiver usando uma estrutura de layout de seção/coluna, é hora de migrar para contêineres. Os benefícios superam o trabalho que você investirá no processo de migração. Para simplificar a migração, o Elementor ainda fornece um botão “Converter” conveniente para esse propósito.
Caixa vs. Largura total
Um método adicional para otimizar o tamanho do DOM é distinguir entre contêineres em caixa e contêineres de largura total.
Um contêiner em caixa tem uma largura máxima, necessitando do uso de um inner <div>no Elementor. Por outro lado, um contêiner de largura total esticado para ambos os lados, portanto, requer apenas um <div>elemento.
Estrutura em caixa:
<div class="e-con">
<div class="e-con-inner">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>
</div>
Estrutura de largura total:
<div class="e-con">
<!-- widget –>
<!-- widget –>
<!-- widget –>
</div>Otimizar a estrutura de contêineres aninhados
Agora que entendemos as diferentes estruturas HTML de contêineres em caixa e de largura total, podemos começar a otimizar a saída DOM do nosso site, especialmente contêineres que aninham outros contêineres dentro deles.
A próxima dica de otimização é a seguinte: se você tem um contêiner pai que usa largura em caixa, você pode fazer todos os contêineres aninhados de largura total. 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 contêiner pai encaixotado. Se os dois contêineres filhos também forem encaixotados, cada um consistirá de dois níveis de <div>elementos. Mas se eles forem de largura total, apenas um <div>será usado.
Mais uma vez, essa otimização é válida somente se o contêiner pai estiver encaixotado.
Conclusões
Como você viu, há três estratégias fáceis para otimizar o tamanho do DOM dos elementos do seu layout: substitua os elementos de layout de seção/coluna por contêineres; contêineres com um único contêiner aninhado podem ser achatados; e se você estiver usando contêineres aninhados e o contêiner pai estiver em caixa, defina todos os contêineres internos para largura total. Essas estratégias podem ajudar a eliminar vários <div>elementos desnecessários do HTML do seu site e melhorar o desempenho geral da sua página da web.
