L'impact des grandes tailles de DOM sur l'interactivité et ce que vous pouvez faire pour y remédier

Les grandes tailles de DOM ont plus d'impact que vous ne le pensez sur l'interactivité. Ce guide vous explique pourquoi et ce que vous pouvez faire.

Jeremy Wagner

Il n'existe aucun moyen de contourner le problème: lorsque vous créez une page Web, celle-ci est associée à un Document Object Model (DOM). Le DOM représente la structure du code HTML de votre page. Il permet aux langages JavaScript et CSS d'accéder à la structure et au contenu de la page.

Cependant, le problème est que la taille du DOM affecte la capacité d'un navigateur à afficher une page rapidement et efficacement. En règle générale, plus un DOM est grand, plus il est coûteux d'effectuer le rendu initial de cette page et de mettre à jour son affichage plus tard dans le cycle de vie de la page.

Cela devient problématique dans les pages comportant des DOM très volumineux, lorsque les interactions qui modifient ou mettent à jour le DOM déclenchent un travail de mise en page coûteux qui affecte la capacité de la page à répondre rapidement. Des tâches de mise en page coûteuses peuvent affecter l'Interaction to Next Paint (INP) d'une page. Si vous souhaitez qu'une page réagisse rapidement aux interactions des utilisateurs, il est important de vous assurer que vos tailles DOM ne sont pas aussi grandes que nécessaire.

Dans quels cas le DOM d'une page est-il trop volumineux ?

Selon Lighthouse, la taille du DOM d'une page est excessive lorsqu'elle dépasse 1 400 nœuds. Lighthouse commencera à générer des avertissements lorsque le DOM d'une page dépasse 800 nœuds. Prenons l'exemple du code HTML suivant:

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

Le code ci-dessus comporte quatre éléments DOM: l'élément <ul> et ses trois éléments enfants <li>. Votre page Web comportera certainement beaucoup plus de nœuds. Il est donc important de comprendre ce que vous pouvez faire pour contrôler les tailles de DOM, ainsi que d'autres stratégies pour optimiser le rendu une fois que le DOM d'une page est aussi petit que possible.

Comment les DOM volumineux affectent-ils les performances des pages ?

Les DOM volumineux affectent les performances des pages de plusieurs façons:

1. Pendant le rendu initial de la page Lorsque du code CSS est appliqué à une page, une structure semblable au DOM, appelée CSS Object Model (CSSOM), est créée. À mesure que les sélecteurs CSS gagnent en spécificité, le CSSOM devient plus complexe, et il faut plus de temps pour exécuter la mise en page, le style, la composition et la peinture nécessaires pour afficher la page Web à l'écran. Ce travail supplémentaire augmente la latence pour les interactions qui se produisent tôt pendant le chargement de la page.
2. Lorsque les interactions modifient le DOM, que ce soit en insérant ou en supprimant des éléments, ou en modifiant le contenu et les styles du DOM, le travail nécessaire à l'affichage de cette mise à jour peut entraîner des coûts de mise en page, de style, de composition et de peinture très coûteux. Comme pour l'affichage initial de la page, l'augmentation de la spécificité du sélecteur CSS peut s'ajouter au travail d'affichage lorsque des éléments HTML sont insérés dans le DOM à la suite d'une interaction.
3. Lorsque JavaScript interroge le DOM, les références aux éléments DOM sont stockées en mémoire. Par exemple, si vous appelez document.querySelectorAll pour sélectionner tous les éléments <div> d'une page, le coût de la mémoire peut être considérable si le résultat renvoie un grand nombre d'éléments DOM.

Tous ces éléments peuvent affecter l'interactivité, mais le deuxième élément de la liste ci-dessus est particulièrement important. Si une interaction entraîne une modification du DOM, cela peut entraîner une grande partie du travail qui peut contribuer à un mauvais INP sur une page.

Comment mesurer la taille du DOM ?

Vous pouvez mesurer la taille du DOM de différentes manières. La première utilise Lighthouse. Lorsque vous exécutez un audit, les statistiques sur le DOM de la page actuelle figurent dans l'audit "Éviter une taille de DOM excessive" sous l'en-tête "Diagnostic". Dans cette section, vous pouvez voir le nombre total d'éléments DOM, l'élément DOM contenant le plus d'éléments enfants, ainsi que l'élément DOM le plus profond.

Une méthode plus simple consiste à utiliser la console JavaScript dans les outils pour les développeurs d'un grand navigateur. Pour obtenir le nombre total d'éléments HTML dans le DOM, vous pouvez utiliser le code suivant dans la console une fois la page chargée:

document.querySelectorAll('*').length;

Vous pouvez également utiliser l'outil de contrôle des performances pour voir la taille du DOM mise à jour en temps réel. Cet outil vous permet de corréler les opérations de mise en page et de style (et d'autres aspects des performances) avec la taille actuelle du DOM.

Si la taille du DOM approche du seuil d'avertissement de la taille du DOM Lighthouse, ou échoue complètement, l'étape suivante consiste à trouver comment réduire la taille du DOM afin d'améliorer la capacité de votre page à répondre aux interactions des utilisateurs afin d'améliorer l'INP de votre site Web.

Comment mesurer le nombre d'éléments DOM affectés par une interaction ?

Si vous profilez dans l'atelier une interaction lente qui, selon vous, est liée à la taille du DOM de la page, vous pouvez déterminer le nombre d'éléments DOM concernés en sélectionnant une activité dans le profileur intitulée "Recalculer le style" et en observant les données contextuelles dans le panneau inférieur.

Dans la capture d'écran ci-dessus, notez que le recalcul du style de la tâche, lorsqu'il est sélectionné, indique le nombre d'éléments concernés. Bien que la capture d'écran ci-dessus montre un cas extrême de l'effet de la taille du DOM sur le rendu du travail sur une page comportant de nombreux éléments DOM, ces informations de diagnostic sont utiles dans tous les cas pour déterminer si la taille du DOM est un facteur limitant le temps nécessaire pour que le frame suivant s'affiche en réponse à une interaction.

Comment réduire la taille du DOM ?

En plus de vérifier le code HTML de votre site Web pour détecter tout balisage inutile, le principal moyen de réduire la taille du DOM consiste à réduire la profondeur du DOM. Si un balisage ressemblant à ceci dans l'onglet Éléments des outils pour les développeurs de votre navigateur indique que votre DOM est peut-être trop profond:

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

Lorsque vous voyez des modèles de ce type, vous pouvez probablement les simplifier en aplatissant votre structure DOM. Cela réduira le nombre d'éléments DOM et vous permettra probablement de simplifier les styles de page.

La profondeur du DOM peut également être un symptôme des frameworks que vous utilisez. Plus spécifiquement, les frameworks basés sur des composants, tels que ceux qui reposent sur JSX, nécessitent d'imbriquer plusieurs composants dans un conteneur parent.

Cependant, de nombreux frameworks vous permettent d'éviter l'imbrication de composants en utilisant ce que l'on appelle des fragments. Les frameworks basés sur des composants qui proposent des fragments comme fonctionnalité incluent (sans s'y limiter) les éléments suivants:

• Réagir
• Préact
• Vue
• Svelte

En utilisant des fragments dans le framework de votre choix, vous pouvez réduire la profondeur du DOM. Si vous craignez l'impact de l'aplatissement de la structure DOM sur le style, vous pouvez utiliser des modes de mise en page plus modernes (et plus rapides), tels que flexbox ou grid.

Autres stratégies à envisager

Même si vous vous efforcez d'aplatir l'arborescence DOM et de supprimer les éléments HTML inutiles afin de réduire au maximum la taille de votre DOM, il peut être assez volumineux et entraîner de nombreuses tâches d'affichage, car il change en réponse aux interactions des utilisateurs. Si vous vous trouvez dans cette situation, vous pouvez envisager d'autres stratégies pour limiter le travail de rendu.

Envisager une approche cumulative

Il se peut que vous vous trouviez à un endroit où de grandes parties de votre page ne sont pas visibles par l'utilisateur lors de son premier affichage. Il peut s'agir d'une opportunité de chargement différé du code HTML en omettant ces parties du DOM au démarrage. Ajoutez-les lorsque l'utilisateur interagit avec les parties de la page qui nécessitent les aspects initialement masqués.

Cette approche est utile à la fois pendant le chargement initial et peut-être même après le chargement. Le chargement initial de la page implique moins de travail de rendu, ce qui signifie que votre charge utile HTML initiale sera plus légère et s'affiche plus rapidement. Les interactions au cours de cette période cruciale auront ainsi plus d'occasions de s'exécuter tout en limitant la concurrence pour attirer l'attention du fil de discussion principal.

Si de nombreuses parties de la page sont initialement masquées au chargement, cela peut également accélérer d'autres interactions qui déclenchent l'affichage de nouveau. Toutefois, à mesure que d'autres interactions ajoutent de l'espace au DOM, le travail de rendu augmente à mesure que le DOM augmente tout au long du cycle de vie de la page.

L'ajout au DOM au fil du temps peut s'avérer délicat et implique des compromis. Si vous suivez cette route, vous effectuerez probablement des requêtes réseau pour obtenir des données afin de remplir le code HTML que vous souhaitez ajouter à la page en réponse à une interaction de l'utilisateur. Bien que les requêtes réseau en cours ne soient pas comptabilisées dans l'INP, cela peut augmenter la latence perçue. Si possible, affichez une icône de chargement ou un autre indicateur indiquant que les données sont en cours de récupération afin que les utilisateurs comprennent qu'il se passe quelque chose.

Limiter la complexité du sélecteur CSS

Lorsque le navigateur analyse des sélecteurs dans votre code CSS, il doit parcourir l'arborescence DOM pour comprendre comment ces sélecteurs s'appliquent à la mise en page actuelle, et si ces sélecteurs s'appliquent. Plus ces sélecteurs sont complexes, plus le navigateur doit effectuer de tâches pour effectuer l'affichage initial de la page, ainsi que des recalculs de style et de mise en page plus importants si la page change à la suite d'une interaction.

Utiliser la propriété content-visibility

CSS propose la propriété content-visibility, qui permet d'afficher en différé les éléments DOM hors écran. Lorsque les éléments s'approchent de la fenêtre d'affichage, ils sont affichés à la demande. content-visibility permet non seulement de réduire considérablement le travail d'affichage sur le rendu initial de la page, mais également d'ignorer l'opération de rendu des éléments hors écran lorsque le DOM de la page est modifié à la suite d'une interaction de l'utilisateur.

Conclusion

Réduire la taille de votre DOM à ce qui est strictement nécessaire est un bon moyen d'optimiser l'INP de votre site Web. Cela vous permet de réduire le temps nécessaire au navigateur pour effectuer les tâches de mise en page et d'affichage lorsque le DOM est mis à jour. Même si vous ne pouvez pas réduire de manière significative la taille du DOM, vous pouvez utiliser certaines techniques pour isoler le travail de rendu dans une sous-arborescence DOM, comme le confinement CSS et la propriété CSS content-visibility.

Quelle que soit la méthode employée, créez un environnement dans lequel les tâches de rendu sont réduites et réduisez la quantité de travail d'affichage de votre page en réponse aux interactions. Ainsi, votre site Web sera plus réactif aux utilisateurs lorsqu'ils interagissent avec eux. Ainsi, votre site Web aura un INP plus faible, ce qui se traduira par une meilleure expérience utilisateur.

Image principale de Unsplash, de Louis Reed.