Éviter une taille de DOM excessive

Lorsqu'une page web est chargée, le navigateur crée un Document Object Model (DOM) de la page.

Le modèle DOM HTML est construit comme un arbre d'Objets :

Source: https://www.w3schools.com/whatis/whatis_htmldom.asp

Tous les objets qui constituent la structure HTML de la page, c'est-à-dire toutes les balises qui y sont incluses (HTML, BODY, DIV, H1, H2, etc.), sont appelés nœuds et la somme de ceux-ci constitue la taille DOM.

Comment la taille des DOM est-elle augmentée ?

Chaque fois que vous ajoutez une image, un paragraphe, un lien, un module/widget de votre page builder etc, vous ajoutez des éléments (nœuds) supplémentaires au DOM et vous augmentez sa taille.

La distance entre chaque nœud et l'élément racine est connue sous le nom de profondeur, et tous les éléments situés sous chaque nœud (parent) sont appelés nœuds enfants.

Lighthouse vous met en garde concernant les arbres des DOM qui :

Ont plus de 1 500 nœuds au total (d'autres outils comme GTmetrix vous avertiront si la taille du DOM dépasse 818).
Ont une profondeur supérieure à 32 nœuds.
On un nœud parent avec plus de 60 nœuds enfants.

Quel est l'impact de la taille du DOM sur la performance des pages ?

Il existe différentes façons dont une taille de DOM excessive peut affecter négativement la performance de votre page :

Quantité de données transférées :

Les arbres DOM de taille importante comportent souvent des nœuds qui sont invisibles à la premier chargement. Cela augmentera le coût des données pour vos utilisateurs et ralentira le temps de chargement des pages.

Temps de rendu :

Lorsque des règles de style compliquées sont en place avec un arbre DOM de taille importante, le navigateur devra recalculer la position et le style de chaque nœud chaque fois que l'utilisateur ou un script interagissent avec votre page, ce qui peut considérablement ralentir le processus de rendu.

Utilisation de la mémoire de l'appareil du visiteur

Selon le mode de codage du JavaScript sur le site (par exemple s'il comprend plusieurs sélecteurs de requêtes générales), il pourrait submerger les capacités de mémoire des appareils de vos utilisateurs.

Comment y remédier

Malheureusement, ni WP Rocket ni aucune autre extension de mise en cache ne peut aider à réduire le nombre d'éléments DOM. Ce problème ne peut être résolu que directement par la conception de votre site.

Vous pourriez essayer :

Réduire le nombre de sections de la page.
Supprimer les éléments cachés.
Passer à un thème plus simple ou moins surchargé.
Limiter le nombre de messages/produits affichés sur une page, etc.

En gros, il s'agit de réduire la quantité de contenu affiché sur chaque page.

Gardez également à l'esprit que certains thèmes/constructeurs de pages peuvent ajouter plus d'éléments DOM que d'autres pour le même type de contenu/blocs :

Dans cet exemple, le nœud <div> pourrait être facilement retiré :

<div id="premier-paragraphe">
<p>C'est le premier paragraphe.</p>
</div>

Resulting in:

<p id="premier-paragraphe">C'est le premier paragraphe.</p>

Si vous avez des connaissances avancées en HTML, et que vous souhaitez le vérifier, vous pouvez passer à l'affichage HTML d'un bloc en le sélectionnant dans l'écran d'édition de la page et en cliquant sur Modifier comme HTML :

Attention ! Toute modification apportée au HTML doit être appliquée avec précaution. Nous vous recommandons de le tester minutieusement dans un environnement staging/développement avant d'appliquer les modifications au site en direct.More information:

https://web.dev/dom-size/
https://gtmetrix.com/avoid-an-excessive-dom-size.html