Le DOM (Document Object Model) est une interface de programmation pour les documents HTML et XML et le nom donné à la structure d'un document HTML, composé de branches et de nœuds contenant des objets.
L'histoire du modèle de document objet remonte à la "guerre des navigateurs" de la fin des années 1990 entre Netscape Navigator et Microsoft Internet Explorer, ainsi qu'à JavaScript et JScript, les premiers langages de script à être largement mis en œuvre dans les moteurs JavaScript des navigateurs web.
La structure DOM dans WordPress : arbre, branches et nœuds
Le DOM de WordPress n'est pas très différent de celui de n'importe quel autre site web.
<html> <-- Árbol (nodo raíz)
│
├── <head> <-- Rama
│ ├── <title> <-- Nodo (hoja)
│ └── <meta> <-- Nodo (hoja)
│
└── <body> <-- Rama
├── <header> <-- Rama
│ └── <h1> <-- Nodo (hoja)
│
├── <div> <-- Rama
│ ├── <p> <-- Nodo (interno)
│ └── <img> <-- Nodo (hoja)
│
└── <footer> <-- Rama
└── <a> <-- Nodo (hoja)
- Arbre: la page entière est représentée sous la forme d'un arbre avec un nœud racine
(<html>)et ses éléments enfants. - Branches: chaque élément d'un
<div>,<header>,<footer>,etc. représente une branche de l'arbre. - Nœuds: tous les éléments HTML, tels que
<p>,<img>ou<a>,sont des nœuds suspendus à des branches. Ces nœuds peuvent être internes (contenant d'autres nœuds) ou externes (les "feuilles" de l'arbre qui n'ont pas d'autres enfants).
Ainsi, la densité des branches dépendra du type et du nombre d'éléments qui la composent. Par exemple, un menu de navigation complexe dans WordPress peut générer plusieurs niveaux de branches et des dizaines de nœuds en raison du nombre de liens et de sous-menus.
Les nœuds sont tous les éléments HTML d'une page. Plus il y a d'éléments, plus le processus est long, ce qui se traduit par un temps de blocage total(TBT) plus élevé.
Il s'agit d'un aspect délicat à optimiser dans WordPress, car il n'est pas possible de supprimer les éléments du DOM qui constituent la structure d'une page. Cependant, nous pouvons afficher ces éléments de manière sélective et charger une chaîne d'objets sous le pli, réduisant ainsi la taille globale du DOM.
Pourquoi réduire la taille du DOM ?
Un arbre DOM volumineux peut ralentir le temps de chargement de votre site de plusieurs façons, en augmentant l'utilisation de la mémoire par des calculs de style plus longs et plus lents, ainsi qu'en entraînant des coûts de données inutiles pour les utilisateurs.
Ces différents scénarios peuvent inclure le chargement inutile de nœuds qui ne sont pas visibles lorsque l'utilisateur charge la page pour la première fois, la répétition constante des calculs de position et de style des nœuds, et le stockage d'un nombre excessif de références aux nœuds qui surchargent la mémoire des appareils des utilisateurs.
Les avantages à court et à long terme de l'optimisation de la vitesse de chargement des pages ont déjà été expliqués dans mille et un articles. En résumé, à court terme, vous évitez que les internautes quittent votre site, lassés d'attendre, et il est fort probable qu'ils y passent plus de temps. La vitesse de chargement est l'un des facteurs reconnus par Google dans le positionnement SEO et je crois savoir qu'il en est de même pour les autres moteurs de recherche, donc à long terme le précieux trafic organique augmentera.
Qu'est-ce qui provoque l'augmentation de la taille du DOM ?
La taille finale du DOM est influencée par de nombreux facteurs tels que le modèle lui-même, ce que les différents plugins que vous utilisez ajoutent et le type de contenu que vous ajoutez tels que des blocs complexes ou les infâmes "sliders" d'images, etc. De même, le code généré par exemple par les "constructeurs".
Par exemple, jusqu'en 2022, année au cours de laquelle j'ai abandonné Elementor parce qu'il résistait à l'optimisation et qu'il était rare qu'il ne casse pas quelque chose à chaque mise à jour, plus quelques mauvaises expériences avec leur support technique, ce constructeur a transformé le code web en une véritable soupe d'alphabet et un cauchemar avec des milliers d'erreurs de programmation.
En avril de la même année, Elementor a intégré le "conteneur" Flexbox comme une nouveauté révolutionnaire, alors que le conteneur était déjà à la base de GenerateBlocks depuis des années .
Comment mesurer les DOM ?
Pour la mesure, j'ai choisi un article qui n'est pas encore très optimisé, un peu long et avec différents types d'éléments.
Commençons par le plus connu et le plus populaire : PageSpeed Insights . Google y indique un avertissement(en orange) lorsque l'élément body a plus de 800 nœuds et un avertissement d'erreur(en rouge) lorsque l'élément body a plus de 1 400 nœuds et un message avec cette recommandation :"Avoid excessive DOM size"(Évitez la taille excessive du DOM).
En fonction du contenu et de la structure de chaque page analysée, vous trouverez plus ou moins d'indices sur les éléments que vous pouvez attaquer. L'avantage est qu'il montre généralement une image pointant vers l'élément en question.
Une fois de plus, je voudrais vous rappeler que toutes ces alertes ne sont que des recommandations et que vous ne devez pas paniquer ou devenir obsédé par ces mesures. Il y a des pages qui offrent une bonne expérience utilisateur et une bonne vitesse perçue avec des scores PageSpeed bas.
Avec GTmetrix, nous obtiendrons généralement les mêmes résultats sur le DOM.
Toutefois, son graphique en cascade des demandes est très utile pour inspecter d'un coup d'œil tous les éléments triés par type et par temps de chargement.
Mais la méthode la plus simple et la plus rapide consiste à utiliser n'importe quel navigateur. Ouvrez la page à analyser et faites un clic droit / "inspecter" et dans l'onglet "Réseau" vous trouverez une cascade beaucoup plus détaillée car vous pouvez la compléter en faisant défiler la page et tous les fichiers qu'elle contient seront ajoutés. Vous pouvez ensuite les trier par poids, type, temps, etc.
Sous cette fenêtre, vous trouverez un résumé des résultats. À gauche, le nombre de requêtes. À droite, en bleu, l'heure de l'événement DOMContentLoaded et en rouge le temps de chargement de cette page.
Réduire la taille du DOM avec les "Lazy Elements" de Perfmatters.
Perfmatters, ce plugin indispensable que je ne me lasse pas de recommander, a ajouté dans sa version 2.3.3 du 28 août 2024 une option appelée Lazy Elements qui, bien qu'encore en Beta, fonctionne très bien pour faciliter le travail d'allègement du DOM.
Cette fonction permet d'ajouter le mal nommé"Lazy Load" à des éléments spécifiques et à leurs descendants (enfants) en ajoutant n'importe quelle portion d'une chaîne d'attributs (class="exemple") d'un conteneur parent.
Dans la documentation fournie par Perfmatters sur cette nouvelle fonctionnalité, nous sommes avertis de ne pas essayer d'appliquer le "Lazy Load" aux éléments qui sont au-dessus du pli. C'est-à-dire ce qui se charge sur l'écran et la première chose que l'utilisateur voit sans défiler vers le bas.
En outre, si vous constatez que quelque chose est visuellement cassé, assurez-vous que vous avez utilisé une chaîne unique sur la page, qui n'est pas partagée avec d'autres éléments.
Comme pour les images à chargement lent, le contenu est placé à l'intérieur d'un fichier . Cela signifie que tout ce qui se charge paresseusement est toujours techniquement crawlable et indexable par Google. Cependant, ils ne peuvent pas dire avec certitude comment Google traitera les éléments avec Lazy Load dans une chaîne. Ils recommandent donc, en termes de référencement, de tester d'abord.
Il prévient également de ne pas essayer d'appliquer Lazy Load aux éléments contenant des images qui démarrent une "lightbox". Et c'est ainsi, j'ai pu vérifier que la fonction native de lightbox de WordPress cesse de fonctionner lorsque la classe d'un élément qui l'implémente est ajoutée à la liste.
Sinon, "Lazy Elements" fonctionne parfaitement. Grâce à cette fonctionnalité, j'ai gagné beaucoup de temps en amincissant le DOM avec de bons résultats. J'espère que Perfmatters continuera son développement pour améliorer et étendre ses options.
