Comment éviter une taille DOM excessive

Une taille DOM excessive peut nuire aux performances Web. Aujourd'hui, nous allons explorer comment vous pouvez éviter une taille DOM excessive.

Nous verrons également comment réduire la taille du DOM sur diverses plates-formes, CMS et frameworks Web.

Qu'est-ce que le DOM et la taille du DOM ?

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il représente la structure d'un document et permet aux programmes de manipuler le contenu, la structure et les styles du document. Chaque élément du document est un nœud dans l'arborescence DOM, et la taille du DOM fait référence au nombre total de nœuds dans l'arborescence DOM.

Votre navigateur crée une arborescence d'objets appelée DOM (Document Object Model) chaque fois qu'il charge une page Web.

DOM est un diagramme d'arborescence d'objets dans votre code HTML. Affichez chaque élément HTML sous la forme d'un corps ou h1 avec son propre nœud.

DOM représente la nature hiérarchique de différents objets qui peuvent ou non dépendre les uns des autres. Comme mentionné ci-dessus, il affiche la structure HTML de la page Web sous forme d'arborescence, composée d'une série de balises.

Voici comment cela fonctionne : Lorsque votre navigateur Web commence à préparer une page pour l'affichage, il génère un diagramme d'arborescence d'objets de tous les éléments de la page en fonction de sa structure HTML.

Par conséquent, chaque fois qu'il reçoit un fichier HTML, il commence par le convertir en une forme arborescente appelée DOM ou arbre DOM. Vous pouvez accéder au DOM et le modifier à l'aide de JavaScript.

Voici quelques termes clés liés au DOM :

• Noeuds. Chaque élément ou balise du DOM est appelé un nœud ou une feuille dans l'arborescence du DOM.
• Profondeur. Le nombre d'éléments dans une branche d'un DOM s'appelle la profondeur.
• Élément enfant. Le dernier nœud qui ne se branche pas plus loin est appelé un enfant.

Qu'est-ce que cela signifie d'éviter une taille DOM excessive ?

Une taille DOM excessive se produit lorsqu'il y a trop de nœuds DOM (ou de balises HTML) sur votre page ou lorsqu'ils sont imbriqués trop profondément. Cela oblige le navigateur de l'utilisateur à consommer de l'énergie supplémentaire pour traiter votre page Web, ce qui entraîne un chargement lent de la page et des scores de vitesse de page faibles.

L'une des raisons pour lesquelles JavaScript et CSS sont souvent lents à s'exécuter est que le navigateur doit traiter plusieurs nœuds, ce qui entraîne un retard dans le rendu des pages.

Une taille DOM excessive entraîne une utilisation plus élevée de la mémoire, des retards de traitement des styles et crée des dispositions de mise en page coûteuses. La modification des objets DOM vous permet de contrôler les éléments de page que vous souhaitez montrer à votre utilisateur.

En termes simples, garder la petite taille du DOM améliore les performances du site et l'expérience utilisateur. Ceci, à son tour, améliorera votre score Vitaux Web de base .

Avertissement "éviter une taille DOM excessive" expliqué.

Ici, nous parlerons de l'avertissement "éviter une taille DOM excessive" dans Lighthouse.

Vous rencontrerez cette erreur si :

• Il y a plus de 1.500 XNUMX nœuds DOM au total. Il y a plus de 1500 éléments HTML sur votre page Web.

• Vous avez atteint une profondeur de nœud maximale supérieure à 32 nœuds. Un élément est imbriqué dans 32 éléments parents ou plus.

• Il existe un nœud parent avec plus de 60 nœuds enfants. Il y a plus de 60 enfants (éléments de liste ou lignes de tableau) dans un élément parent.

L'avertissement "éviter une taille DOM excessive" n'affecte pas directement les métriques Lighthouse. Alors qu'en théorie, les pages avec un grand DOM peuvent se charger rapidement, mais dans le monde réel, ce n'est généralement pas le cas.

Cependant, une grande taille de DOM affectera certainement d'autres métriques Lighthouse telles que le plus grand contenu de contenu (LCP) et le déplacement de mise en page cumulé (CLS).

Comment mesurer la taille du DOM ?

Vous pouvez mesurer la taille du DOM à l'aide de l'outil Google Lighthouse, intégré à Chrome DevTools. Lighthouse signale les pages qui ont plus de 1.500 32 nœuds DOM au total, une profondeur de nœud maximale supérieure à 60 nœuds ou un nœud parent avec plus de XNUMX nœuds enfants.

Bien qu'une taille DOM excessive n'affecte pas directement vos scores Lighthouse, elle peut avoir un impact négatif sur les performances réelles de votre site, entraînant des temps de chargement lents et une mauvaise expérience utilisateur.

Comment une taille DOM excessive affecte-t-elle la vitesse de la page ?

Bien que l'avertissement de taille DOM excessive n'affecte pas directement les métriques Lighthouse, il affecte d'autres métriques qui conduisent finalement à un score Lighthouse inférieur.

Par exemple, une grande taille de DOM complique inutilement la lecture et l'analyse d'une page Web par un navigateur. Par conséquent, le navigateur mettra plus de temps à charger la page à l'écran.

Chaque fois qu'une page se charge, le navigateur Web doit télécharger et analyser le code HTML avant de pouvoir commencer à générer l'arborescence DOM.

Voici quelques-unes des façons dont une taille DOM excessive peut affecter les performances de votre page :

• Augmentez le nombre d'octets transférés. Inclut plusieurs nœuds qui ne sont pas affichés à l'utilisateur lors du premier chargement. Cela ralentit la vitesse de chargement des pages et nuit à l'efficacité du réseau, entraînant une augmentation des coûts de données et une mauvaise expérience de la page pour les utilisateurs.

• Ralentir le rendu des pages. Le navigateur consomme plus de ressources car il doit continuellement recalculer la position et le style des différents nœuds. De même, les performances du site souffrent également de règles de style compliquées.

• Déborde les ressources mémoire de la machine de l'utilisateur. L'interaction continue avec les requêtes JavaScript entraîne de mauvaises performances d'exécution et un rendu de page lent. Cela se traduit par une mauvaise expérience de page pour les utilisateurs de votre site.

Le fait est qu'une grande taille de DOM affecte négativement les performances d'une page Web. Voici un aperçu des autres éléments concernés :

• Efficacité du réseau et performances de charge
• Performances d'exécution
• Performances de la mémoire

Comment réduire la taille du DOM ?

Réduire la taille du DOM implique d'optimiser la structure et le code de votre site Web. Voici quelques stratégies à considérer :

Évitez les plugins et les thèmes mal codés : Ceux-ci peuvent alourdir le code de votre site, augmenter la taille du DOM et nuire à la vitesse et aux performances globales de votre site. Vérifiez toujours les avis, mettez à jour les dates et envisagez d'investir dans des options premium.

Minimisez les nœuds DOM basés sur JavaScript : Les éléments dynamiques de votre site Web peuvent le gonfler avec des nœuds JavaScript supplémentaires. Vous pouvez résoudre ce problème en identifiant et en supprimant les fichiers JS problématiques ou en trouvant des alternatives optimisées.

Soyez prudent avec les constructeurs de pages : Les constructeurs de pages peuvent parfois produire du code gonflé avec trop de nœuds DOM. Certains constructeurs de pages prennent des mesures pour résoudre ces problèmes, mais il est toujours recommandé de vérifier et de nettoyer manuellement votre code HTML.

Ne copiez/collez pas de texte dans l'éditeur WYSIWYG : La plupart des éditeurs ne parviennent pas à nettoyer le code collé, en particulier lorsqu'il est collé à partir d'une autre source de texte enrichi telle que Microsoft Word. Cela peut intégrer de nombreux nœuds DOM. Pour éviter cela, collez en texte brut ou nettoyez le code après le collage.

Divisez votre site Web à page unique en plusieurs pages : Si votre site Web à page unique contient beaucoup de contenu, envisagez de le diviser en pages distinctes. Cela peut réduire le nombre de nœuds DOM.

Évitez de masquer les éléments indésirables en utilisant display:none : Cette propriété CSS masque les éléments mais ne les supprime pas de votre balisage HTML, ce qui oblige les utilisateurs à charger des éléments indésirables.

Évitez les déclarations CSS compliquées et JavaScript : Ceux-ci peuvent augmenter l'utilisation de la mémoire et ralentir votre site. Il vaut mieux les éviter si vous avez affaire à trop de nœuds DOM.

Recommandations spécifiques aux différentes plateformes et CMS

Voici diverses recommandations spécifiques à la plate-forme pour éviter un grand DOM.

Outils de gestion

WordPress, étant un CMS dynamique, peut parfois générer une grande taille de DOM s'il n'est pas géré correctement. Voici quelques recommandations :

Utiliser un thème clair : Les thèmes avec un design minimaliste et moins de JavaScript ont tendance à avoir une taille DOM plus petite.

Limiter le nombre de publications sur une page : Avoir trop de messages sur une seule page peut augmenter la taille de votre DOM. Limitez le nombre de messages par page dans vos paramètres de lecture.

Apprenez-en plus sur WordPress Speed ​​Optimization en suivant cette liste de contrôle.

Réagir

React est une bibliothèque JavaScript pour la création d'interfaces utilisateur, et elle utilise un DOM virtuel pour améliorer les performances. Voici quelques conseils pour éviter une taille DOM excessive dans React :

Réutilisation des composants : Réutilisez les composants autant que possible. Non seulement cela rendra votre code plus propre, mais cela réduira également la taille globale de votre DOM.

Évitez les fonctions en ligne dans le rendu : Les fonctions en ligne peuvent provoquer des rendus inutiles et augmenter la taille du DOM. Au lieu de cela, définissez la fonction en dehors de la méthode de rendu et référencez-la dans le rendu.

Utiliser les clés dans les listes : Lors du rendu des listes dans React, utilisez toujours des clés. Les clés aident React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés, et aident à réduire la taille du DOM en évitant un nouveau rendu inutile.

Shopify

Shopify est une plate-forme de commerce électronique populaire, voici quelques moyens d'éviter une taille DOM excessive :

Minimiser l'utilisation de l'application : Chaque application que vous ajoutez à votre boutique Shopify peut augmenter la taille de votre DOM. Utilisez uniquement les applications dont vous avez besoin et désinstallez toutes les applications que vous n'utilisez pas.

Limitez le nombre de produits sur une page : Semblable à WordPress, avoir trop de produits sur une seule page peut augmenter la taille de votre DOM.

Limitez le nombre de produits par page dans les paramètres de votre thème.

Utiliser un thème clair : Certains thèmes Shopify sont optimisés pour les performances plus que d'autres. Un thème léger et bien codé aura une taille DOM plus petite. Vous pouvez trouver le guide d'optimisation détaillé de Shopify ici.

Angulaire

Angular est une plate-forme pour créer des applications Web et utilise un véritable DOM. Voici quelques conseils pour éviter une taille DOM excessive dans Angular :

Utilisez le chargement différé : Lazy Loading est un modèle de conception qui retarde le chargement des objets jusqu'à ce qu'ils soient nécessaires. Cela peut réduire considérablement la taille initiale du DOM de votre application. Utiliser TrackBy avec ngFor : Lorsque vous utilisez ngFor pour parcourir un tableau dans Angular, utilisez la fonction trackBy. Cela aidera Angular à garder une trace de chaque élément et à éviter toute manipulation inutile du DOM. Évitez les expressions complexes dans les modèles : les expressions complexes dans vos modèles peuvent augmenter la taille du DOM et réduire les performances. Essayez de limiter la complexité de vos expressions, ou mieux encore, déplacez la logique dans la classe du composant.

svelte Svelte est un framework JavaScript plus récent qui compile votre code en un code impératif minimal qui manipule directement le DOM. Voici quelques conseils pour éviter une taille DOM excessive dans Svelte :

Utilisez la gestion d'état intégrée de Svelte : La gestion d'état intégrée de Svelte est conçue pour être efficace et minimiser la taille du DOM. Évitez d'utiliser des bibliothèques de gestion d'état externes, sauf si nécessaire. Évitez les composants inutiles : bien que les composants soient utiles pour organiser votre code, les composants inutiles peuvent augmenter la taille de votre DOM. Gardez vos composants aussi simples que possible et évitez les imbrications inutiles.

Drupal

Drupal est un CMS puissant qui permet de nombreuses personnalisations. Voici quelques conseils pour éviter une taille DOM excessive dans Drupal :

Utilisez les vues à bon escient : les vues dans Drupal peuvent générer beaucoup de code HTML, ce qui augmente la taille de votre DOM. Limitez le nombre de champs et de résultats dans vos vues à ce qui est nécessaire. Utilisez des modèles personnalisés pour les champs complexes : si vous avez des champs contenant beaucoup de données, envisagez d'utiliser un modèle personnalisé pour rationaliser le code HTML généré. Désactiver les modules inutilisés : chaque module activé peut augmenter la taille de votre DOM. Désactivez et désinstallez tous les modules que vous n'utilisez pas. En savoir plus sur l'optimisation des performances Drupal ici.

Magento

Magento est une plate-forme de commerce électronique robuste. Voici quelques conseils pour éviter une taille DOM excessive dans Magento :

Limitez le nombre de produits sur une page : Semblable à WordPress et Shopify, avoir trop de produits sur une seule page peut augmenter la taille de votre DOM.

Limitez le nombre de produits par page dans les paramètres de votre catalogue.

Utilisez le catalogue de plaques : Activez le catalogue plat pour les produits et les catégories afin de réduire la taille de votre base de données et d'accélérer votre site. Fusionner les fichiers JavaScript et CSS : Magento a une fonction intégrée pour fusionner les fichiers JavaScript et CSS en un seul fichier. Cela réduit le nombre de requêtes HTTP et peut aider à réduire la taille de votre DOM.

Vue.js

Vue est un framework JavaScript populaire pour la création d'interfaces utilisateur. Voici quelques conseils pour éviter une taille DOM excessive dans Vue :

Utilisez v-if au lieu de v-show : v-if rend l'élément dans le DOM uniquement si la condition est vraie, tandis que v-show rend tous les éléments du DOM et utilise CSS pour masquer ceux qui ne satisfont pas la condition. L'utilisation de v-if peut réduire la taille initiale du DOM.

Utilisez le chargement différé avec Vue Router : Comme avec Angular, le chargement paresseux peut réduire considérablement la taille initiale du DOM en ne chargeant les composants que lorsqu'ils sont nécessaires. Évitez d'enregistrer les composants globalement : enregistrez les composants uniquement là où ils sont nécessaires pour éviter des ajouts inutiles au DOM.