Optimiser la taille du DOM
L'Insight Optimiser la taille du DOM détecte si une page Web possède un Modèle Objet de Document (Document Object Model en anglais, abrégé DOM) excessivement volumineux et indique le nombre total d'éléments DOM d'une page, la profondeur maximale du DOM de la page et l'élément comportant le plus grand nombre d'éléments enfants.
Un grand DOM peut allonger la durée des calculs de style et des ajustements de la mise en page, ce qui impacte la réactivité de la page. Un grand DOM sollicite davantage la mémoire. Découvrez comment éviter une taille de DOM excessive.
Comprendre Optimiser la taille du DOM
Lorsqu'une page Web est chargée, le navigateur crée un DOM de la page. Le DOM représente la structure HTML d'une page Web sous la forme d'une arborescence de branches et de nœuds, et permet à JavaScript et CSS d'accéder à la structure et au contenu d'une page.
Plus le DOM est volumineux, plus l'impact sur la capacité d'un navigateur à afficher une page rapidement et efficacement est important. Une taille de DOM importante augmente également l'utilisation de la mémoire et peut affecter la métrique Interaction to Next Paint (INP) d'une page.
Chaque fois que vous ajoutez une image, un paragraphe, un lien, un module/widget à partir de votre générateur de pages, etc., vous ajoutez des éléments (nœuds) au DOM et augmentez sa taille.
La distance entre chaque nœud et l'élément racine est appelée profondeur, et tous les éléments situés sous chaque nœud (parent) sont appelés nœuds enfants.
Comment améliorer la taille du DOM
Cette question ne peut être entièrement résolue à l'aide de plugins de mise en cache. Le problème est spécifique à l'architecture de votre site, et vous devrez adopter différentes stratégies pour réduire la taille du DOM.
Vous pourriez essayer :
- Réduire le nombre d'éléments
- Évitez toute manipulation excessive du DOM avec JavaScript.
- Simplifiez le code HTML afin de réduire la profondeur DOM en supprimant les imbrications inutiles.
- Rendu différé automatique est automatiquement activé dans WP Rocket
- Réduire la portée et la complexité des calculs de style
En gros, réduisez la quantité de contenu affiché sur chaque page et simplifiez le code HTML et CSS.