Ou dans GTmetrix "Réduire le nombre d'éléments DOM":
Qu'est-ce que DOM ?
Lorsque votre navigateur reçoit un document HTML, il doit être converti en une structure arborescente, qui est utilisée pour le rendu et le dessin avec CSS et JavaScript.
Cette arborescence est appelée DOM ou Document Object Model.
- Noeuds Tous les éléments HTML du DOM sont appelés nœuds. (alias "feuilles" sur l'arbre).
- Profondeur – La longueur d'une « branche » dans un arbre s'appelle la profondeur. Par exemple, dans le schéma ci-dessus, la balise img a une profondeur de 3. (HTML -> body -> div -> img).
- Éléments enfants – tous les nœuds enfants d'un nœud (sans autre ramification) sont des enfants.
Lighthouse et Google PageSpeed Insights commencent à signaler les pages si l'une des conditions suivantes est remplie :
- Total d'avoir plus de 1500 nœuds.
- Avoir une profondeur de plus de 32 nœuds.
- Le nœud parent a plus de 60 nœuds enfants.
Comment la taille du DOM affecte-t-elle les performances ?
Une taille DOM excessive peut affecter les performances de différentes manières.
- Temps d'analyse et de rendu plus élevé (FCP) . Une grande arborescence DOM et des règles de style complexes font un excellent travail pour le navigateur. Le navigateur doit analyser le HTML, construire l'arborescence de rendu, etc. Chaque fois que l'utilisateur interagit ou que quelque chose dans le HTML change, le navigateur doit le recalculer.
- Augmente l'utilisation de la mémoire - Votre code JavaScript peut avoir des fonctions pour accéder aux éléments DOM. Une arborescence DOM plus grande oblige JavaScript à utiliser plus de mémoire pour les traiter. Un exemple serait un sélecteur de requête, dans
document.querySelectorAll('img')qui répertorie toutes les images couramment utilisées par les bibliothèques à chargement différé. - Augmente le TTFB – Lorsque la taille du DOM augmente, la taille du document HTML augmente (en Ko). Étant donné que davantage de données doivent être transférées sur le réseau, cela augmente le TTFB.
Comment réduire techniquement la taille du DOM ?
Par exemple, il est techniquement facile de réduire la taille du DOM :
usage:
<ul id="navigation-main">etc..</ul>à la place de:
<div id="navigation-main"><ul>etc..</ul></div>Fondamentalement, débarrassez-vous de tous les éléments HTML possibles. Vous pouvez également utiliser Flexbox ou Grid pour réduire davantage la taille du DOM.
Mais puisque vous utilisez WordPress, cela ne vous aidera pas beaucoup !
Comment réduire la taille du DOM dans WordPress ?
Diviser les grandes pages en plusieurs pages
Avez-vous une page avec tout sur le site? Vous aimez les services, les formulaires de contact, les produits, les articles de blog, les témoignages, etc. ?
Essayez de les diviser en plusieurs pages et de les lier à partir de l'en-tête/de la barre de navigation.
Chargement paresseux et pagination de tout ce qui est possible
Chargement paresseux de toutes sortes d'éléments. Voici quelques exemples:
- Chargement paresseux d'une vidéo YouTube - Utilisez WP YouTube Lyte ou Lazy Load de WP Rocket.
- Limiter le nombre d'articles de blog/produits par page – J'essaie généralement de conserver un maximum de 10 articles de blog par page et de paginer le reste.
- Chargement paresseux des articles de blog/produits - Ajoutez un bouton Charger plus ou un défilement infini pour charger plus d'articles de blog ou de produits.
- Chargement paresseux des commentaires - J'utilise le chargement conditionnel Disqus depuis que j'utilise Disqus . Si vous utilisez vos propres commentaires, utilisez des plugins comme Lazy Load for Comments .
- Pagination des commentaires - si vous avez des centaines de commentaires, cela peut également affecter la taille du DOM. Pour paginer les commentaires, allez dans Paramètres -> Discussion -> Paginer les commentaires.
- Limiter le nombre de posts associés – Essayez de limiter le nombre de publications associées à 3 ou 4.
Remarque : le chargement différé des images ne réduira pas la taille du DOM
Ne cachez pas les éléments indésirables avec CSS
Parfois, vous devrez peut-être supprimer des éléments introduits par un thème/concepteur. Par exemple, ajoutez un bouton au panier sur les pages produits, un bouton de tarif, des informations sur l'auteur, la date de publication, etc.
Une solution rapide consiste à les masquer avec CSS :
.cart-bouton {affichage : aucun ;}Même si cette solution semble simple, vous exposez les utilisateurs à du code indésirable (qui inclut à la fois le balisage HTML et le style CSS).
Vérifiez les paramètres de votre thème/plugin pour voir s'il existe une option pour le supprimer. Sinon, trouvez le code PHP pertinent et supprimez-le/commentez-le.
Utilisez des thèmes et des constructeurs de pages bien écrits
Un bon thème joue un rôle important dans la taille du DOM. Utilisez des thèmes bien écrits commeGénérerPresse ouAstra .
Les constructeurs de pages introduisent également trop de divs. Utilisez des constructeurs commeoxygène, qui n'introduisent pas de blocs div indésirables et ont plus de contrôle sur la structure HTML.
Conclusion
Il peut y avoir plus de plugins ou de paramètres de thème qui introduisent trop de divs. Un exemple serait les plugins "méga menu" tels que UberMenu.
Parfois, ils sont essentiels à l'expérience utilisateur de votre site. Mais parfois, ils ne sont jamais utilisés par les utilisateurs.
Peut-être que vos liens de pied de page ne sont jamais cliqués car la plupart des visiteurs ne défilent que jusqu'à 75 %.
Utilisez des outils comme HotJar ou Google Analytics Events pour savoir ce que les visiteurs utilisent réellement et ce qu'ils n'utilisent pas.Analysez, mesurez et répétez.
