Corriger l'avertissement Lighthouse avoid excessive-DOM size

Qu'est-ce que l'avertissement Lighthouse 'excessive-DOM size' ?

Qu'est-ce que l'avertissement avoid excessive-DOM size dans Lighthouse ? Lighthouse signale les pages qui ont soit :

• plus de 1 500 nœuds DOM au total.
  Cela signifie qu'il y a plus de 1500 éléments HTML sur notre page.
• une profondeur de nœud maximale supérieure à 32 nœuds.
  Cela se produit lorsqu'un élément est imbriqué dans au moins 32 éléments parents.
• un nœud parent avec plus de 60 nœuds enfants.
  Cela peut se produire lorsqu'un élément parent (comme un tableau ou une liste) a plus de 60 enfants (lignes de tableau ou éléments de liste)

L'avertissement 'avoid excessive DOM size' n'impacte pas directement les métriques Lighthouse. En théorie, les pages avec une grande taille de DOM pourraient se charger assez rapidement. En pratique, ce n'est souvent pas le cas. Une taille de DOM excessive affectera très probablement indirectement des métriques Lighthouse importantes comme le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS).

Un petit rappel : Qu'est-ce que le DOM ?

DOM signifie Document Object Model. Le DOM est une représentation objet structurée en arbre de votre HTML où chaque élément HTML (par exemple : le body ou h1) est représenté par son propre nœud.

Quelles sont les causes d'une taille de DOM excessive ?

Une taille de DOM excessive peut avoir de nombreuses raisons. Une taille de DOM excessive est généralement causée par :

• Des plugins mal codés dans votre CMS.
• Des nœuds DOM créés par un JavaScript.
• Des constructeurs de pages (Page Builders) qui génèrent du HTML gonflé (par exemple : Elementor ou WP Bakery).
• Du texte copié et collé dans un éditeur WYSIWYG (comme TinyMCE).
• Un mauvais codage de modèle (template).

Comment 'excessive-DOM size' affecte-t-il la vitesse de la page

Un grand DOM n'impacte pas directement les métriques Lighthouse. Il rend le rendu d'une page web inutilement compliqué, rendant presque impossible l'obtention de ce score Lighthouse élevé. Votre navigateur devra travailler davantage avant que la page web puisse être affichée à l'écran. Il y a 3 problèmes avec un grand DOM.

• La taille de votre HTML est plus grande car votre code est gonflé. Cela augmentera le temps nécessaire pour télécharger votre page.
• Une grande taille de DOM ralentira les performances de rendu. Votre navigateur doit effectuer plus de calculs (DOM) lors du premier chargement et chaque fois qu'un utilisateur ou un script interagit avec votre page.
• Votre navigateur peut utiliser beaucoup plus de mémoire lors de l'interaction avec le DOM via JavaScript.

Comment corriger 'avoid excessive-DOM size'

Pour corriger l'avertissement 'avoid excessive-DOM size', vous devrez d'abord tracer ses origines. Lighthouse vous donnera une indication de l'endroit où se trouvent la profondeur maximale du DOM et le nombre maximum d'éléments enfants. De là, vous devez faire un peu de recherche. Utilisez l'inspecteur DOM de votre navigateur web et vérifiez le DOM. Essayez de comprendre ce qui crée un grand nombre de nœuds DOM. Il y a 5 suspects habituels :

1. Des plugins mal codés dans votre CMS.
   Lorsqu'un plugin, par exemple un curseur ou un plugin de calendrier, crée une grande quantité de nœuds DOM, vous pourriez envisager de remplacer ce plugin par un plugin plus rationalisé.
2. Des nœuds DOM créés par un JavaScript.
   Un JavaScript, par exemple un widget de chat, pourrait injecter un grand nombre de nœuds DOM dans le DOM. Dans ce cas, supprimez le fichier JavaScript ou trouvez un remplaçant avec la même fonctionnalité
3. Des constructeurs de pages qui génèrent du HTML gonflé
   Les constructeurs de pages comme Elementor ou WP Bakery créent souvent du code gonflé qui a un grand nombre de nœuds DOM. Il n'y a pas de solution facile pour cela. Les PageBuilders font souvent partie du flux de travail. La solution inclut le nettoyage de votre code gonflé et le changement de votre flux de travail.
4. Du texte copié et collé dans un éditeur WYSIWYG
   La plupart des éditeurs WYSIWYG comme TinyMCE font un mauvais travail de nettoyage du code collé, surtout lorsqu'il est collé depuis une autre source de texte riche comme Microsoft Word. Il ne copiera pas seulement le texte mais aussi les styles. Ces styles peuvent être intégrés dans un grand nombre de nœuds DOM. La solution à ce problème est simple. Arrêtez de coller du contenu dans votre éditeur et nettoyez les pages qui ont déjà du texte collé et gonflé.
5. Mauvais codage (modèle).
   Lorsqu'une grande taille de DOM est créée par votre éditeur ou causée par votre modèle, les choses peuvent devenir laides. Cela signifie que le code gonflé fait partie du cœur de votre site web. Vous devrez changer d'éditeur, réécrire des parties de votre modèle ou même recommencer à zéro.

Solution de contournement pour 'avoid excessive-DOM size'

Parfois, il n'est pas possible de supprimer la taille excessive du DOM sans réécrire de grandes parties de votre site et changer tout votre flux de travail. Il existe quelques solutions de contournement pour réduire l'impact d'une taille excessive du DOM. Ces solutions sont loin d'être parfaites et pourraient introduire une toute nouvelle série de défis qui pourraient impacter votre SEO ou votre indexation dans certains cas.

• Charger paresseusement (Lazy load) des parties de votre page web.
  Pour accélérer le rendu initial, vous pourriez envisager le chargement paresseux de parties de votre site web. Par exemple, le pied de page.
• Améliorer le rendu de la page avec content-visibility.
  La propriété CSS content-visibility indique à un navigateur de sauter le style, la mise en page et la peinture jusqu'à ce que vous en ayez besoin, ce qui pourrait réduire l'impact de la taille excessive des nœuds.
• Diviser les grandes pages en plusieurs pages.
  Diviser les grandes pages en plusieurs pages pourrait réduire le nombre de nœuds DOM lorsque le contenu lui-même a créé de nombreux nœuds DOM.
• Implémenter le défilement infini.
  Le défilement infini est essentiellement un chargement paresseux, lors du défilement à travers des éléments répétés comme des images (Pinterest) ou de grands tableaux de données, le défilement infini pourrait accélérer considérablement votre page.
• Éviter le JavaScript gourmand en mémoire.
  Lorsque vous traitez une grande quantité de nœuds DOM sur votre page, soyez très prudent avec le JavaScript. document.getElementsByTagName('div'); pourrait charger un grand nombre de nœuds DOM, ce qui augmente l'utilisation de la mémoire.
• Éviter les déclarations compliquées.
  Lorsque vous traitez une grande quantité de nœuds DOM sur votre page, soyez très prudent avec les déclarations CSS compliquées. div:last-child; doit vérifier le statut last-child pour chaque div sur votre page.