Elementor – Como reduzir tamanho do DOM

Olá, Kangaroozito! Conseguir reduzir o tamanho do DOM é um problema recorrente que muitos enfrentam quando tentam otimizar a performance de seus sites, sobretudo para SEO. Para reduzir essa dificuldade, o plugin Elementor criou meios que ajudam a tornar esse processo mais fácil.

Com mais facilidades, o processo de otimização se torna muito mais acessível, o que não somente permite que mais usuários se interessem pelo assunto, como também facilita a rotina daqueles que diariamente trabalham com essas otimizações de alta performance visando o SEO.

Por isso, no nosso artigo de hoje, mostraremos como você poderá hoje mesmo começar a tornar o seu site ainda mais rápido e melhor avaliado ao reduzir o tamanho do DOM com o Elementor.

Sumário

1. O problema
2. Como corrigir
3. Conclusão

O problema do DOM

Ao ter uma página com excesso de elementos DOM, é bastante comum que isso gere um tempo de carregamento mais lento na página, já que ela terá mais itens, o que a deixará mais complexa e pesada, dificultando a renderização por parte do navegador dos visitantes. É válido, ainda, dizer que isso independe do Elementor, já que todo site terá DOM.

Isso pode acontecer não somente pelo excesso de elementos, como também por aninhamentos complexos e injeção de conteúdos dinâmicos. Páginas que possuem muitos elementos HTML sempre tenderão a ter tempos de carregamento maiores, além de possíveis impactos em animações e outras formas de interação do usuário.

Esses itens que descrevemos são particularmente importantes porque essa questão é entendida como crítica também por motores de avaliação de performance de sites, como é o caso do Google PageSpeed, que tem a diminuição do tamanho do DOM como uma das pautas para melhoria da pontuação.

Como não é segredo a ninguém, a pontuação dos motores de teste de otimização não necessariamente representam a velocidade real do site, mas ainda assim são usados pelos motores de busca como um dos vários critérios que compõem o SEO, onde sites que possuem melhores avaliações nesses testes podem ter melhores colocações nas pesquisas.

Diminuir o DOM com Elementor

A diminuição dos elementos totais vem de um conjunto de fatores, por isso não existe um único ajuste simples que se possa fazer para uma solução imediata, mas sim todo um conjunto de técnicas e boas práticas que ajudarão seu site a ter um resultado final muito melhor, que são as seguintes:

1- Utilize contêineres, evite seções/colunas

Ao utilizar seções e colunas, o código HTML final acaba apresentando o dobro de elementos <div> código, com relação a um código de mesmo design usando o sistema de contêineres, como podemos ver nos seguintes exemplos:

Utilizando seções:

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget -->
				<!-- widget -->
				<!-- widget -->

			</div>
		</div>

	</div>
</div>

Utilizando contêineres:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget -->
		<!-- widget -->
		<!-- widget -->

	</div>
</div>

Como pudemos ver nos códigos de exemplo acima, o resultado final ao usar um container é um HTML muito mais enxuto, com apenas 2 elementos <div> em vez dos 4 da versão anterior. Isso é fantástico, pois é um resultado que diretamente significa um impacto considerável na redução do DOM, o que gera um HTML menor, menos completo e, portanto, mais simples e rápido de se renderizar para o visitante.

É importante mencionar ainda que essa redução de quatro para dois <div> ocorre em cada seção de seu site, o que mostra que é uma redução exponencial ao substituir completamente as seções por contêineres, gerando um impacto significativo.

2- Aninhe elementos dentro de contêineres

Como mostramos no item acima, o uso dos contêineres ajuda a reduzir consideravelmente a quantidade final de elementos HTML em uma página, e isso pode gerar uma redução ainda maior ao utilizar suas seções internas dentro dos contêineres.

Nesses casos, a redução total pode ser não somente de oito para quatro <div>, como em alguns casos esse número pode chegar a apenas dois, gerando uma economia de código muito maior.

3- Priorize contêineres de largura total

Enquanto um contêiner em caixa precisaria de mais elementos HTML por ter uma largura máxima, utilizar um contêiner de largura total esticado aos lados reduziria esse número de elementos pela metade, o que resultaria em uma redução significativa de elementos, como podemos ver nos exemplos abaixo:

Elementos em caixa:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget -->
		<!-- widget -->
		<!-- widget -->

	</div>
</div>

Elementos em largura total:

<div class="e-con">

    <!-- widget -->
		<!-- widget -->
		<!-- widget -->

</div>

Ao adotar essa estratégia, você poderá diminuir ainda mais o DOM gerado por sua página. Uma outra dica muito interessante é para quando se tem um contêiner de largura de caixa, em que você poderá aninhar outros contêineres dentro dele, mas com largura total.

Isso permitirá que você tenha a mesma aparência, mas usando menos código.

Conclusão

Como pudemos ver, reduzir o DOM do Elementor não precisa ser algo difícil, mas que requer um certo esforço, já que é um trabalho que precisa ser feito com paciência para atingir os resultados desejados, já que boa parte dessa otimização passa pela adoção dos sistemas de contêineres, como falamos ao longo do artigo.

Por isso, replique seu site e comece a fazer testes para conferir a diferença e entender o quanto esses ajustes podem impactar positivamente o seu projeto e o desempenho dele para performance e SEO e veja seu site decolar ainda mais!