Le DOM (Modèle Objet de Document) est le nom général de l’arborescence des balises HTML. Son impact sur la vitesse des pages est tel que plus votre structure HTML est complexe lors du rendu de la page, plus votre page sera lente.

Selon Lighthouse, la complexité du La structure du DOM est mesurée à l'aide de trois métriques. Pour fournir à ces métriques leurs points de référence :

  • Le nombre total de balises doit être moins de 1500
  • La profondeur maximale des balises doit être moins de 32
  • Le nombre maximum de balises enfants doit être moins de 60

Dans l'exemple ci-dessus, le nombre total de balises est faible, la profondeur maximale des balises est bonne, mais le nombre maximal de balises enfants est faible.

L’optimisation des éléments DOM relève entièrement de la responsabilité de la partie prenante du frontend. Chaque balise choisie aléatoirement ou arbitrairement lors de la première création du code de la page a un coût une fois le projet terminé. C’est pourquoi nous invitons tous les développeurs frontend à un moment de silence et à ouvrir les yeux.

Les points dans lesquels un DOM gonflé affecte négativement les performances de la page incluent :

  • Les pages avec un grand nombre de nœuds (balises) connaîtront congestion du réseau et difficulté de chargement en raison de leur grande taille, augmentant ainsi le TTFB (Time to First Byte).
  • Rendu des nœuds chargés à créer leurs positions et leurs styles prennent du temps, augmentant ainsi le FCP (First Contentful Paint).
  • À mesure que le nombre de nœuds augmente, la charge nécessaire avec Les manipulations JavaScript surchargent la mémoire, augmentant le TFT (Time to Interactive).

Pour illustrer l'optimisation du DOM avec un exemple très simple, considérons ce qui suit où le nombre et la profondeur du DOM sont réduits :

<div id="nav-element">
 <ul>
 </ul>
</div>

Au lieu de faire ceci :

<ul id="nav-element">
</ul>

Il est nécessaire de faire ceci : Les deux méthodes les plus recommandées pour réduire la taille du DOM sont le chargement paresseux et la pagination. Étant donné que les structures de cartes sur les pages de liste contiennent beaucoup de DOM, un défilement ou une pagination infinie est suggéré. Lors du choix du nombre d'éléments dans la pagination, les critères de mesure DOM doivent absolument être pris en compte. Le temps habituellement considéré pour le nombre de produits en pagination est de 15 à 20 secondes, mais cette partie doit en fait être calculée du côté des parties prenantes du frontend, compte tenu de la taille du DOM.

Une des solutions très simples est de ne pas ajouter d'éléments qui ne sont pas visibles sur la page au HTML sans les cacher avec du CSS. Si un élément doit être affiché, il doit être appelé ultérieurement et montré à l'utilisateur. Vous devez savoir que masquer des éléments avec CSS agrandit le DOM.

Sources: