Corriger l'avertissement Lighthouse avoid excessive-DOM size

Dernière révision par Arjen Karel en février 2026

Qu'est-ce que l'avertissement Lighthouse 'avoid 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 1 500 éléments HTML sur votre page.
• une profondeur maximale de nœud supérieure à 32 nœuds.
  Cela se produit lorsqu'un élément est imbriqué à 32 niveaux de profondeur.
• un nœud parent avec plus de 60 nœuds enfants.
  Cela peut arriver lorsqu'un élément parent (comme une table ou une liste) a plus de 60 enfants (lignes de table, ou éléments de liste).

Pour mettre ces chiffres en perspective : selon le chapitre Markup du Web Almanac 2024, la page médiane compte 594 éléments DOM. Au 90ème centile, ce nombre bondit à 1 716, ce qui dépasse déjà le seuil de Lighthouse. Environ 10 % de toutes les pages sur le web déclenchent cet avertissement.

Depuis Lighthouse 13 (octobre 2025), cet audit a évolué vers l'aperçu "Optimiser la taille du DOM". Il se déclenche désormais en fonction des recalculs de style réels et du travail de mise en page (layout) qui dépassent 40 ms, et pas seulement des comptages de nœuds statiques. Les seuils ci-dessus sont toujours signalés comme points de référence.

Un rappel rapide : 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.

Qu'est-ce qui cause 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 JavaScript.
• Des constructeurs de pages (page builders) qui génèrent du HTML gonflé (par exemple : Elementor ou WP Bakery).
• Du texte qui est copié et collé dans un éditeur WYSIWYG (comme TinyMCE).
• Un mauvais codage de template.

Le chapitre Markup du Web Almanac 2024 a révélé que les éléments <div> constituent à eux seuls 28,7 % de tous les éléments de page. Cette "divite" (divitis) est un contributeur majeur aux tailles excessives du DOM, en particulier dans les sorties des constructeurs de pages.

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

Un grand DOM n'a pas d'impact direct sur les métriques de Lighthouse. Cependant, cela rend le rendu d'une page web inutilement compliqué, rendant presque impossible l'obtention d'un score Lighthouse élevé. Votre navigateur devra faire plus de travail avant que la page web ne puisse être affichée à l'écran. Il y a 4 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 faire 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 lorsqu'il interagit avec le DOM via JavaScript.
• Un grand DOM a un impact direct sur l'Interaction to Next Paint (INP). Chaque fois qu'un utilisateur clique, tape ou saisit, le navigateur doit recalculer les styles et la mise en page (layout) pour les éléments affectés. Plus il y a de nœuds DOM sur la page, plus cela prend du temps. Lorsque le recalcul du style affecte plus de 300 éléments ou prend plus de 40 ms, cela devient un problème mesurable pour l'INP. C'est pourquoi les pages contenant des milliers de nœuds DOM échouent souvent à l'INP même lorsque leur JavaScript est rapide.

L'avertissement 'avoid excessive DOM size' affectera très probablement indirectement les Core Web Vitals importants comme le Largest Contentful Paint (LCP) et le Cumulative Layout Shift (CLS). Mais le plus grand impact est sur l'INP, qui est le Core Web Vital échoué le plus couramment.

Comment corriger 'avoid excessive-DOM size'

Pour corriger l'avertissement 'avoid excessive-DOM size', vous devrez d'abord retracer ses origines. Lighthouse vous donnera une indication de l'emplacement de la profondeur maximale du DOM (Maximum DOM Depth) et des éléments enfants maximum (Maximum Child Elements). À partir de là, vous devez faire un peu de recherche. Utilisez l'inspecteur DOM dans les Chrome DevTools 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 plugin de slider ou 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 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 (page builders) 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 constructeurs de pages font souvent partie du flux de travail. La solution consiste à nettoyer votre code gonflé et à changer votre flux de travail.
4. Du texte qui est copié et collé dans un éditeur WYSIWYG.
   La plupart des éditeurs WYSIWYG comme TinyMCE font un mauvais travail de nettoyage du code collé, en particulier lorsqu'il est collé à partir d'une autre source de texte riche comme Microsoft Word. Cela 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. Un mauvais codage (de template).
   Lorsqu'une grande taille de DOM est créée par votre éditeur ou causée par votre template, les choses pourraient se gâter. 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 template ou même recommencer à zéro.

Techniques pour réduire l'impact d'un grand DOM

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 plusieurs techniques pour atténuer l'impact d'une taille excessive du DOM :

.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

• Chargez paresseusement des parties de votre page web.
  Pour accélérer le rendu initial, vous pourriez envisager de charger paresseusement des parties de votre site Web. Par exemple le footer.
• Utilisez content-visibility: auto pour ignorer le rendu du contenu hors écran.
  La propriété CSS content-visibility indique au navigateur d'ignorer le style, la mise en page (layout) et la peinture (paint) des éléments hors écran jusqu'à ce que l'utilisateur défile près d'eux. Elle est désormais prise en charge par 93 % des navigateurs (Chrome 85+, Firefox 125+, Safari 18+). Associez-la toujours à contain-intrinsic-size pour éviter les décalages de mise en page (layout shifts) :
• Divisez 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 crée de nombreux nœuds DOM.
• Implémentez le défilement virtuel (virtual scrolling).
  Pour les longues listes, les tableaux de données ou les galeries d'images, le défilement virtuel ne rend que les éléments visibles dans la viewport. Des bibliothèques comme react-window (React) et le module CDK Virtual Scrolling (Angular) maintiennent le nombre de nœuds DOM juste aux éléments visibles (généralement 10 à 30 nœuds) au lieu de milliers.
• Évitez le JavaScript gourmand en mémoire.
  Lorsque vous traitez avec un grand nombre de nœuds DOM sur votre page, soyez extrêmement prudent avec JavaScript. document.getElementsByTagName('div'); pourrait charger un grand nombre de nœuds DOM ce qui augmente l'utilisation de la mémoire.
• Évitez les déclarations CSS compliquées.
  Lorsque vous traitez avec un grand nombre de nœuds DOM sur votre page, soyez extrêmement prudent avec des déclarations CSS compliquées. div:last-child; doit vérifier le statut last-child pour chaque div sur votre page. Des sélecteurs plus simples signifient moins de travail de parcours pour le navigateur. Cela compte le plus pour l'INP, où chaque milliseconde de recalcul de style compte.

Après avoir réduit la taille de votre DOM, suivez l'impact sur les utilisateurs réels avec Real User Monitoring. Dans nos données CoreDash, la réduction du nombre de nœuds DOM en dessous de 1 500 améliore généralement l'INP de 35 % sur les appareils mobiles.