Elementor Performance Tip : Shrink DOM Size for Faster Websites - Photon Flux | Professional WordPress Repair Service, Global Reach, Fast Response

Les sites qui contiennent beaucoup de données DOM augmentent la taille du code HTML, ce qui peut nuire aux performances du site. Cependant, il existe des techniques pour réduire la taille du DOM d'un site web. Cet article examinera comment vous pouvez améliorer votre site Elementor en utilisant diverses stratégies pour minimiser la taille du HTML.

Comprendre le problème du "DOM oversize

Le DOM (Document Object Model) représente la structure d'une page web, et une taille importante du DOM est généralement le signe d'une structure DOM complexe, souvent due à l'utilisation d'un trop grand nombre d'éléments HTML, de nœuds imbriqués ou d'injection de contenu dynamique. Les pages comportant un grand nombre d'éléments HTML ont tendance à se charger lentement et peuvent interférer avec les animations et autres interactions avec l'utilisateur.

Impact de la taille du DOM sur la performance des pages

Une taille plus importante du DOM augmente le temps de rendu, ce qui entraîne des retards dans le rendu des pages et des temps de chargement plus lents. En effet, le navigateur doit analyser et rendre chaque nœud. En outre, chaque nœud du DOM requiert la mémoire du navigateur, ce qui peut entraîner l'épuisement des ressources du système et une augmentation de la consommation de mémoire. Cela peut entraîner une dégradation des performances, en particulier sur les appareils bas de gamme.

En outre, un DOM volumineux peut entraîner des interactions lentes avec l'utilisateur et une réactivité réduite lors de l'utilisation du site. Les éléments DOM de grande taille contiennent souvent de nombreux récepteurs d'événements, ce qui augmente la charge de travail et ralentit l'interaction avec l'utilisateur. Nous ne citerons pas toutes les raisons, mais la règle de base est que plus le code HTML est grand, plus la page est lente.

Comment mesurer la taille des DOM à l'aide d'outils externes ?

Pour mesurer l'impact de la taille du DOM sur les performances du site, vous pouvez utiliser les outils suivants :

Google Chrome DevToolsÉléments : Allez dans le panneau Éléments pour inspecter les éléments du DOM et leur profondeur d'imbrication. Utilisez l'onglet Performance pour évaluer les performances de rendu et découvrir les goulets d'étranglement potentiels causés par la manipulation du DOM.

PhareL'audit Lighthouse a fourni des informations sur les mesures de la taille du DOM, telles que la "taille du DOM", la "profondeur du DOM" et la "profondeur maximale du DOM", et a mis en évidence les domaines susceptibles d'être améliorés. domaines à améliorer.

WebPageTest Les résultats de l'évaluation de la taille du DOM dans les diagrammes en cascade et les résultats de performance afin de comprendre la relation entre la complexité du DOM et les temps de chargement des pages.

Qu'est-ce qui est considéré comme une taille de DOM plus importante ?

PhareUtilisez l'arbre DOM pour marquer la page, comme indiqué ci-dessous :

<body>Avertit lorsqu'un élément dépasse 818 nœuds.
(coll.) échouer (un étudiant)<body>Une erreur se produit lorsque l'élément a plus de 1 400 nœuds.

Toutefois, ces paramètres peuvent changer à l'avenir. En outre, différents outils peuvent fixer des seuils différents pour avertir d'une taille excessive du DOM.

Réduire la taille du DOM d'Elementor

Elementor est un constructeur visuel de sites web par glisser-déposer qui simplifie le processus d'ajout d'éléments à une page. L'utilisation d'Elementor n'a généralement pas d'impact négatif sur les performances de votre site web. Cependant, un certain nombre de mesures peuvent être prises pour optimiser davantage les pages construites. Il s'agit notamment de réduire le nombre d'éléments HTML qui minimisent le DOM sans affecter la conception.

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 parce qu'une page typique contient des dizaines de ces éléments, de sorte que leur optimisation aura un impact plus important.

Trois techniques sont recommandées pour optimiser vos éléments de mise en page :

Migration des sections/colonnes vers les conteneurs.
Utiliser un seul conteneur imbriqué pour aplatir le conteneur.
Dans la mesure du possible, mettre en place des conteneurs imbriqués de pleine largeur plutôt que de largeur de boîte.

Voyons comment réduire la taille du DOM d'Elementor.

Type d'élément Elementor

Elementor propose deux types d'éléments :

widgetsLes éléments réguliers utilisés pour construire un site web, tels que les titres, les images, les icônes, les boutons, les séparateurs, etc.
Éléments de mise en pageLes éléments structurels tels que les sections/colonnes et les conteneurs. Ces éléments enveloppent les widgets et les regroupent.

Concentrez-vous sur les éléments de mise en page pour voir comment réduire la taille du DOM.

Structure HTML des éléments de présentation

Dans Elementor, chaque élément de structure se compose de deux éléments<div>Composition de l'étiquette : une étiquette extérieure<div>et d'une partie intérieure <div>Ceci est important car nous allons apprendre à réduire le nombre d'éléments HTML dans l'élément de mise en page structurelle. Ceci est important car nous allons apprendre à réduire le nombre d'éléments HTML dans un élément de présentation structurelle.

La structure HTML de la section/colonne :

Lorsque l'on utilise des sections et des colonnes, le code HTML final se compose de deux niveaux de mise en page, chacun avec deux<div>deux pour les parties et deux pour les colonnes. Au total, nous utilisons quatre<div>Widget d'emballage des éléments :

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

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

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

			</div>
		</div>

	</div>
</div>

La structure HTML du conteneur :

Elementor présente les conteneurs comme un moyen de construire des pages avec une structure et un DOM allégés.

Lorsque l'on passe au conteneur, le code HTML généré ne contient que deux éléments<div>au lieu de quatre, ce qui signifie que le même dessin peut être obtenu en utilisant la moitié des éléments.<div>.

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

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

	</div>
</div>

Aplatir la structure HTML avec des conteneurs

Dans le passé, les sites web étaient souvent structurés à l'aide de sections ou de colonnes. Aujourd'hui, les sites web modernes utilisent CSS flex et CSS grid pour obtenir la même structure visuelle tout en réduisant la quantité de code. C'est pourquoi Elementor a introduitconteneurs. En convertissant les éléments structurels en conteneurs, vous pouvez simplifier la structure HTML et éliminer les redondances inutiles.

Les colonnes sont placées côte à côte, tandis que les sections sont empilées ensemble. En revanche, les conteneurs peuvent avoir des éléments internes empilés en ligne ou en colonne. Ces différences peuvent être utilisées pour optimiser certaines structures.

Si une section comporte plusieurs colonnes, la structure convertie comportera un seul conteneur de direction de colonne et plusieurs conteneurs de direction de ligne. Toutefois, si une section ne contient qu'une seule colonne, la structure peut être optimisée lorsqu'elle est convertie en conteneurs. Un niveau de conteneur peut être éliminé sans affecter la conception. La taille du DOM est réduite de 50%, passant de quatre à cinq.<div>à seulement deux éléments. Multipliez ensuite ce chiffre par le nombre d'éléments de mise en page par page pour calculer l'impact sur votre site.

Il convient de noter qu'il est possible de réduire la taille DOM des éléments de section/colonne dans les sections intérieures imbriquées. Dans ce cas, l'élément<div>Les éléments à huit niveaux sont utilisés avant l'affichage des widgets. La conversion en conteneur le fait passer d'un élément à huit niveaux à un élément à huit niveaux.<div>à quatre niveaux, qui peuvent être réduits à seulement deux éléments dans certains cas<div>.

Si vous utilisez encore une structure de mise en page en sections/colonnes, il est temps de migrer vers des conteneurs. Les avantages de cette migration l'emportent sur le travail qu'elle implique. Pour simplifier la migration, Elementor fournit même un bouton "Convertir" très pratique.

Encadré et pleine largeur

Une autre façon d'optimiser la taille du DOM consiste à faire la distinction entre les conteneurs encadrés et les conteneurs pleine largeur.

Les conteneurs encadrés ont une largeur maximale et nécessitent donc des éléments internes dans la fenêtre Elementor<div>. D'autre part, les conteneurs pleine largeur tendus sur les côtés ne nécessitent qu'un espace d'un mètre.<div>Éléments.

Construction en boîte :

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

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

	</div>
</div>

Construction pleine largeur :

<div class="e-con">

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

</div>

Optimisation des structures de conteneurs imbriqués

Maintenant que nous comprenons les différentes structures HTML des conteneurs boxed et full-width, nous pouvons commencer à optimiser la sortie DOM de notre site, en particulier les conteneurs qui imbriquent d'autres conteneurs.

L'astuce d'optimisation suivante est la suivante : si vous avez un conteneur parent qui utilise des largeurs encadrées, vous pouvez faire en sorte que tous les conteneurs imbriqués aient une largeur complète. Vous obtenez ainsi 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 comporte un conteneur parent avec une boîte. Si les deux conteneurs enfants sont également encadrés, chaque conteneur sera composé de deux couches de<div>sont composés. Toutefois, s'ils sont de pleine largeur, ils seront seulement<div>Utilisez-en un.

Là encore, cette optimisation ne fonctionne que si le conteneur parent est encadré.

rendre un verdict

Comme vous pouvez le constater, il existe trois stratégies simples pour optimiser la taille du DOM des éléments de mise en page : remplacer les éléments de mise en page en partie/colonne par des conteneurs ; les conteneurs avec un seul conteneur imbriqué peuvent être étalés ; et si des conteneurs imbriqués sont utilisés et que le conteneur parent est encadré, définir tous les conteneurs internes en pleine largeur. Ces stratégies peuvent aider à<div>Éliminez un grand nombre d'éléments inutiles du code HTML de votre site web et améliorez les performances globales de vos pages web.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.