Dans la sphère numérique, chaque fraction de seconde compte. Par conséquent, la performance d’un site web est cruciale pour la satisfaction et l’engagement des utilisateurs. Améliorer la performance peut augmenter la probabilité d’atteindre les objectifs de votre site web.

Un site web avec une sortie DOM importante augmente la taille du HTML, ce qui peut nuire à la performance du site. Cependant, il existe des techniques pour diminuer la taille du DOM de votre site. Cet article explorera comment améliorer les sites Elementor en utilisant diverses stratégies pour minimiser la taille du HTML.

Comprendre le problème de la « Taille de DOM étendue »

Le DOM (Document Object Model) représente la structure d’une page web. Une taille de DOM étendue indique généralement une structure DOM complexe, souvent causée par l’utilisation excessive d’éléments HTML, de nœuds imbriqués ou d’injections de contenu dynamique. Les pages avec un grand nombre d’éléments HTML ont tendance à se charger lentement et peuvent affecter les animations et autres interactions utilisateur.

Impact de la taille du DOM sur la performance de la page

Une grande taille de DOM peut augmenter le temps de rendu, provoquant un rendu de page retardé et des temps de chargement plus lents. Cela est dû au fait que les navigateurs doivent analyser et rendre chaque nœud. De plus, chaque nœud DOM nécessite de la mémoire du navigateur, ce qui peut entraîner une épuisement des ressources système et une consommation accrue de mémoire. Cela peut entraîner une dégradation des performances, en particulier sur les appareils bas de gamme.

De plus, une taille de DOM excessive peut provoquer des interactions utilisateur lentes et une réactivité réduite lors de l’utilisation du site web. Un grand nombre d’éléments DOM inclut souvent de nombreux écouteurs d’événements, ajoutant une surcharge et ralentissant les interactions utilisateur. Nous ne mentionnerons pas toutes les raisons, mais la règle générale est que plus la taille du HTML est grande, plus la page est lente.

Comment mesurer la taille du DOM avec des outils externes ?

Pour mesurer l’impact de la taille du DOM sur la performance du site web, vous pouvez utiliser les outils suivants :

Google Chrome DevTools – Allez dans le panneau « Éléments » pour vérifier les éléments DOM et leur profondeur d’imbrication. Utilisez l’onglet « Performance » pour évaluer la performance de rendu et repérer les goulets d’étranglement potentiels causés par la manipulation du DOM.

Lighthouse – Les audits Lighthouse offrent des informations sur les métriques de taille du DOM telles que « Taille du DOM », « Profondeur du DOM » et « Profondeur maximale du DOM », indiquant les domaines à améliorer.

WebPageTest – Évaluez les métriques de taille du DOM dans les graphiques en cascade et les résultats de performance pour comprendre la relation entre la complexité du DOM et les temps de chargement des pages.

Qu’est-ce qui est considéré comme une grande taille de DOM ?

Lighthouse signale les pages avec des arbres DOM comme suit :

  • Avertit lorsque l’élément <body> a plus de 818 nœuds.
  • Erreurs lorsque l’élément <body> a plus de 1 400 nœuds.

Cependant, ces métriques peuvent changer à l’avenir. De plus, différents outils peuvent définir des seuils différents pour avertir d’une taille de DOM étendue.

image 64 Conseil de performance Elementor - Réduisez la taille de votre DOM pour rendre votre site web plus rapide 1

Réduire la taille du DOM d’Elementor

Elementor est un constructeur de site web visuel par glisser-déposer qui simplifie le processus d’ajout d’éléments sur la page. Utiliser Elementor n’impacte généralement pas négativement la performance de votre site. Cependant, il existe des étapes que vous pouvez suivre pour optimiser davantage les pages que vous construisez. Cela inclut la réduction du nombre d’éléments HTML qui peut minimiser le DOM, sans affecter le design.

Pour optimiser efficacement, il est utile de comprendre la structure des éléments de mise en page d’Elementor. Nous nous concentrerons sur les éléments de mise en page car une page typique contient des dizaines de ces éléments, donc les optimiser a un impact plus important.

Il existe trois techniques recommandées pour optimiser vos éléments de mise en page :

  1. Migrer des sections/colonnes vers des conteneurs.
  2. Aplatir les conteneurs avec des conteneurs imbriqués simples.
  3. Implémenter des conteneurs pleine largeur plutôt que des conteneurs imbriqués en largeur fixe lorsque cela est possible.

Apprenons-en plus sur la réduction de la taille du DOM d’Elementor.

Types d’éléments Elementor

Elementor a deux types d’éléments :

  • Widgets – tous les éléments réguliers que vous utilisez pour construire votre site web comme les titres, images, icônes, boutons, séparateurs, etc.
  • Éléments de mise en page – éléments structurels comme les sections/colonnes et les conteneurs. Ces éléments enveloppent les widgets et les regroupent.

Nous allons nous concentrer sur les éléments de mise en page en termes de réduction de la taille du DOM.

Structure HTML des éléments de mise en page

Dans Elementor, chaque élément structurel se compose de deux balises <div> : une balise extérieure <div> et une balise intérieure <div>. C’est important à noter car nous allons voir comment nous pouvons réduire le nombre d’éléments HTML dans vos éléments de mise en page structurelle.

Structure HTML des sections/colonnes :

Lors de l’utilisation des sections et des colonnes, le HTML final se compose de deux niveaux de mise en page, chacun ayant deux éléments <div>, deux pour les sections et deux pour les colonnes. Au total, nous enveloppons les widgets avec quatre éléments <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>

Structure HTML des conteneurs :

Elementor a introduit les conteneurs comme un moyen de construire des pages avec une structure et un DOM plus légers.

Lors du passage aux conteneurs, le HTML résultant se compose de seulement deux éléments <div>, et non quatre, ce qui signifie que vous obtenez le même design avec la moitié des éléments <div>.

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

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

	</div>
</div>

Aplatir la structure HTML en utilisant des conteneurs

Dans le passé, des sections ou des colonnes étaient utilisées pour structurer les sites web. De nos jours, les sites web modernes utilisent CSS flex et CSS grid pour obtenir la même structure visuelle avec moins de code. Pour cette raison, Elementor a introduit Containers. En convertissant vos éléments structurels en conteneurs, vous pouvez simplifier la structure HTML et éliminer les éléments superflus.

Alors que les sections sont empilées les unes sur les autres, les colonnes sont positionnées côte à côte. En revanche, les conteneurs peuvent empiler les éléments internes en ligne ou en colonne. Nous pouvons utiliser ces différences pour optimiser certaines structures.

Si une section a plusieurs colonnes, les structures converties auront un conteneur en direction de colonne unique avec plusieurs conteneurs en direction de ligne. Cependant, si une section contient une seule colonne, vous pouvez optimiser cette structure lors de la conversion en conteneurs. Vous pouvez éliminer un niveau de conteneur sans affecter le design. Obtenant une réduction de 50 % de la taille du DOM, passant de quatre éléments <div> à seulement deux. Multipliez maintenant cela par le nombre d’éléments de mise en page que chaque page contient pour calculer l’impact sur votre site web.

Il est important de noter que vous pouvez vraiment réduire la taille du DOM sur les éléments de section/colonne qui imbriquent des sections internes. Dans ces cas, l’élément utilise huit niveaux d’éléments <div> avant d’afficher le widget. La conversion en conteneurs peut réduire cela de huit niveaux d’éléments <div> à quatre niveaux, et dans certains cas à seulement deux niveaux d’éléments <div>.

Si vous utilisez encore une structure de mise en page section/colonne, il est temps de migrer vers des conteneurs. Les avantages l’emportent sur le travail que vous investirez dans le processus de migration. Pour simplifier la migration, Elementor fournit même un bouton « Convertir » pratique à cet effet.

Encadré vs. Pleine largeur

Une méthode supplémentaire pour optimiser la taille du DOM consiste à distinguer les conteneurs encadrés des conteneurs pleine largeur.

Un conteneur encadré a une largeur maximale, nécessitant l’utilisation d’un élément interne <div> dans Elementor. En revanche, un conteneur pleine largeur étiré des deux côtés nécessite donc seulement un élément <div>.

Structure encadrée :

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

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

	</div>
</div>

Structure pleine largeur :

<div class="e-con">

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

</div>

Optimiser la structure des conteneurs imbriqués

Maintenant que nous comprenons les différentes structures HTML des conteneurs encadrés et pleine largeur, nous pouvons commencer à optimiser la sortie DOM de notre site web, en particulier les conteneurs qui imbriquent d’autres conteneurs à l’intérieur.

Le prochain conseil d’optimisation est le suivant : Si vous avez un conteneur parent qui utilise une largeur encadrée, vous pouvez rendre tous les conteneurs imbriqués pleine largeur. De cette façon, vous obtenez le même design, mais avec moins de 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>

La structure HTML ci-dessus a un conteneur parent encadré. Si les deux conteneurs enfants sont également encadrés, chacun consistera en deux niveaux d’éléments <div>. Mais s’ils sont pleine largeur, seulement un élément <div> sera utilisé.

Encore une fois, cette optimisation est valable uniquement si le conteneur parent est encadré.

Conclusions

Comme vous l’avez vu, il existe trois stratégies simples pour optimiser la taille du DOM de vos éléments de mise en page : remplacer les éléments de mise en page section/colonne par des conteneurs ; les conteneurs avec un seul conteneur imbriqué peuvent être aplatis ; et si vous utilisez des conteneurs imbriqués et que le conteneur parent est encadré, définissez tous les conteneurs internes en pleine largeur. Ces stratégies peuvent aider à éliminer de nombreux éléments <div> inutiles du HTML de votre site web et améliorer les performances globales de votre page web.