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 clair, limiter la taille du DOM améliore les performances du site et l'expérience utilisateur. Cela contribue à améliorer votre score Core Web Vitals.

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 Lighthouse de Google, intégré aux outils de développement de Chrome. Lighthouse signale les pages comportant plus de 1 500 nœuds DOM au total, une profondeur maximale de nœuds supérieure à 32 ou un nœud parent ayant plus de 60 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 thèmes mal conçus : ils peuvent surcharger le code de votre site, augmenter la taille du DOM et impacter sa vitesse et ses performances globales. Consultez toujours les avis et les dates de mise à jour, et envisagez d'investir dans des options premium.

Réduisez le nombre de nœuds DOM basés sur JavaScript : les éléments dynamiques de votre site web peuvent l’alourdir avec des nœuds JavaScript superflus. Pour y remédier, identifiez et supprimez les fichiers JS problématiques ou trouvez des alternatives optimisées.

Attention aux constructeurs de pages : ils peuvent parfois générer un code trop volumineux avec un nombre excessif de nœuds DOM. Certains constructeurs de pages prennent des mesures pour corriger ces problèmes, mais il est toujours conseillé de vérifier et de nettoyer manuellement votre code HTML.

Évitez de copier-coller du texte dans un éditeur WYSIWYG : la plupart des éditeurs ne nettoient pas le code collé, surtout lorsqu'il provient d'une autre source de texte enrichi comme Microsoft Word. Cela peut insérer de nombreux nœuds DOM. Pour éviter ce problème, collez le texte brut ou nettoyez le code après l'avoir collé.

Divisez votre site web monopage en plusieurs pages : si votre site web monopage contient beaucoup de contenu, envisagez de le diviser en plusieurs pages. Cela peut réduire le nombre de nœuds DOM.

Évitez de masquer les éléments indésirables à l'aide de display:none : cette propriété CSS masque les éléments mais ne les supprime pas de votre balisage HTML, ce qui peut entraîner le chargement d'éléments indésirables par les utilisateurs.

Évitez les déclarations CSS et JavaScript complexes : elles peuvent augmenter la consommation de mémoire et ralentir votre site. Il est préférable de les éviter si vous manipulez un grand nombre 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.

WordPress

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 :

Utilisez un thème léger : les thèmes au design minimaliste et utilisant moins de JavaScript ont tendance à avoir une taille DOM plus petite.

Limitez le nombre d'articles par page : un trop grand nombre d'articles sur une même page peut augmenter la taille du DOM. Limitez le nombre d'articles par page dans vos paramètres de lecture.

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

React

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. Cela permettra non seulement d’améliorer la clarté de votre code, mais aussi de réduire la taille globale de votre DOM.

Évitez les fonctions en ligne dans la méthode `render` : elles peuvent entraîner des rendus inutiles et augmenter la taille du DOM. Définissez plutôt la fonction en dehors de la méthode `render` et référencez-la à l’intérieur de celle-ci.

Utilisez des clés dans les listes : lors du rendu de listes dans React, utilisez toujours des clés. Les clés permettent à React d’identifier les éléments modifiés, ajoutés ou supprimés, et contribuent à réduire la taille du DOM en évitant les rendus inutiles.

Shopify

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

Réduisez le nombre d'applications : chaque application ajoutée à votre boutique Shopify peut augmenter la taille de votre DOM. Utilisez uniquement les applications nécessaires et désinstallez celles que vous n'utilisez pas.

Limitez le nombre de produits par page : comme pour WordPress, un trop grand nombre de produits sur une seule page peut augmenter la taille du DOM.

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

Utilisez un thème léger : certains thèmes Shopify sont optimisés pour la performance plus que d’autres. Un thème léger et bien codé aura une taille DOM réduite. Vous trouverez un guide détaillé sur l’optimisation 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é : le chargement différé 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. Utilisez `trackBy` avec `ngFor` : lorsque vous utilisez `ngFor` pour parcourir un tableau dans Angular, utilisez la fonction `trackBy`. Cela permettra à Angular de suivre chaque élément et d’éviter les manipulations inutiles du DOM. Évitez les expressions complexes dans les modèles : les expressions complexes dans vos modèles peuvent augmenter la taille du DOM et diminuer les performances. Essayez de limiter la complexité de vos expressions, ou mieux encore, déplacez la logique dans la classe du composant.

Svelte est un framework JavaScript récent qui compile votre code en un minimum de code impératif manipulant directement le DOM. Voici quelques conseils pour éviter une taille de DOM excessive avec Svelte :

Utilisez la gestion d'état intégrée de Svelte : conçue pour être efficace et minimiser la taille du DOM, elle est optimisée. Évitez d'utiliser des bibliothèques de gestion d'état externes, sauf nécessité absolue. Évitez les composants superflus : si les composants facilitent l'organisation du code, les composants inutiles peuvent alourdir considérablement le DOM. Privilégiez des composants simples 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 par page : comme pour WordPress et Shopify, avoir trop de produits sur une seule page peut augmenter la taille du DOM.

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

Utilisez le catalogue plat : 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. Fusionnez les fichiers JavaScript et CSS : Magento intègre une fonctionnalité permettant de fusionner les fichiers JavaScript et CSS en un seul fichier. Cela réduit le nombre de requêtes HTTP et contribue à alléger 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 différé permet de réduire considérablement la taille initiale du DOM en ne chargeant les composants que lorsque cela est nécessaire. Évitez d’enregistrer les composants globalement : enregistrez-les uniquement là où c’est nécessaire afin d’éviter d’encombrer inutilement le DOM.