Évitez une taille de DOM excessive

Une arborescence DOM volumineuse peut ralentir les performances de votre page de plusieurs manières :

• Efficacité du réseau et performances de charge

  Un grand arbre DOM inclut souvent de nombreux nœuds qui ne sont pas visibles lorsque l'utilisateur charge la page pour la première fois, ce qui augmente inutilement les coûts de données pour vos utilisateurs et ralentit le temps de chargement.

• Performances d'exécution

  Lorsque les utilisateurs et les scripts interagissent avec votre page, le navigateur doit constamment recalculer la position et le style des nœuds. Une arborescence DOM volumineuse associée à des règles de style complexes peut ralentir considérablement le rendu et l'interactivité.

• Performances de la mémoire

  Si votre code JavaScript utilise des sélecteurs de requête généraux tels que document.querySelectorAll('li'), vous pouvez stocker sans le savoir des références à un très grand nombre de nœuds, ce qui peut saturer la mémoire des appareils de vos utilisateurs.

Échec de l'audit Lighthouse sur la taille du DOM

Lighthouse indique le nombre total d'éléments DOM d'une page, la profondeur DOM maximale de la page et le nombre maximal d'éléments enfants :

Lighthouse signale les pages dont les arborescences DOM :

• Avertit lorsque l'élément "body" comporte plus de 800 nœuds.
• Erreurs lorsque l'élément "body" comporte plus de 1 400 nœuds environ.

Optimiser la taille du DOM

En général, faites tout votre possible pour créer des nœuds DOM seulement là où ils sont nécessaires, puis détruisez-les lorsqu'ils ne sont plus requis.

Si vous expédiez une arborescence DOM volumineuse, essayez de charger votre page et de noter manuellement les nœuds affichés. Vous pouvez peut-être supprimer les nœuds non affichés du document chargé initialement et ne les créer qu'après une interaction utilisateur pertinente, comme un défilement ou un clic sur un bouton.

Si vous créez des nœuds DOM au moment de l'exécution, les points d'arrêt de modification de sous-arborescence DOM peuvent vous aider à identifier le moment où les nœuds sont créés.

Si vous ne pouvez pas éviter une arborescence DOM volumineuse, une autre approche pour améliorer les performances de rendu consiste à simplifier vos sélecteurs CSS. Pour en savoir plus, consultez Réduire le champ d'application et la complexité des calculs de style de Google.

Pour en savoir plus, consultez l'article Comment la taille du DOM affecte l'interactivité et comment y remédier.

Conseils spécifiques à la pile

Angular

Si vous affichez de longues listes, utilisez le défilement virtuel avec le Component Dev Kit (CDK).

React

• Utilisez une bibliothèque de fenêtrage comme react-window pour réduire au maximum le nombre de nœuds DOM créés si vous affichez de nombreux éléments répétés sur la page.
• Limitez autant que possible les nouveaux rendus inutiles avec shouldComponentUpdate, PureComponent ou React.memo.
• Ignorez les effets jusqu'à ce que certaines dépendances aient changé si vous utilisez le hook Effect pour améliorer les performances d'exécution.

Ressources

• Code source de l'audit Évitez une taille excessive de DOM
• Réduire le champ d'application et la complexité des calculs de style