Table des matières
Comment éviter une taille excessive de DOM
PageSpeed Insights, l’outil de mesure des Core Web Vitals de Google, signale souvent ce problème :
Évitez une taille excessive de DOM
Un grand DOM sollicite davantage la mémoire, et entraîne de plus longs calculs de style et de coûteux ajustements de la mise en page.
Cette analyse est correcte. Un long DOM pose en effet problème, et ralentit l’affichage d’une page web.
Voyons d’abord quelques clés de compréhension de ce problème, puis quelques solutions pour le résoudre.
Le DOM, c’est quoi ?
L’arborescence des éléments HTML
DOM signifie Document Object Model.
En bon français : modèle d’objets du document.
Les objets, ici, sont tous les éléments d’une page en HTML. Chaque balise HTML, comme <html>, <head>, <main>, <content>, <footer>, <div>, <p>, <span>, ou <a>, est un objet du document.
De plus, ces objets sont souvent enchâssés les uns dans les autres, formant une structure arborescente.
Exemple : un document HTML simplifié
Ainsi, la structure d’un document HTML simplifié pourrait être :
On a donc une hiérarchie des éléments. Chaque élément du DOM forme un « noeud », une subdivision.
Dans cet exemple, l’élément <html> contient 2 éléments : <head> et <body>.
<body> contient <header>, <main> et <footer>. Etc.
Dans une vraie page web, ces inclusions peuvent atteindre de grands niveaux de profondeur. Par exemple, 20 niveaux : un élément inclus dans un élément inclus dans un élément… ceci, 20 fois de suite.
Le DOM comme arbre hiérarchique
On peut représenter cette structure sous forme d’arborescence :
Le DOM comme liste hiérarchisée
Ou encore, on peut représenter le DOM comme une liste à puce hiérarchisée :
- <html>
- <head>
- <title>
- <body>
- <header>
- <h1>
- <main>
- <section>
- <h2>
- <p>
- <a>
- <section>
- <footer>
- <p>
- <header>
- <head>
Il suffit de compter les puces pour conclure que dans ce document HTML très simple, le DOM compte 13 nœuds.
Or, chaque nœud est susceptible d’avoir une ou plusieurs classes CSS, chaque ayant plusieurs propriétés de style CSS.
Un long DOM est difficile à calculer par le navigateur
Maintenant, faites preuve d’empathie avec ce pauvre navigateur.
Imaginez que vous êtes le navigateur, et que vous recevez un DOM de 1300 nœuds. Chaque nœud a son style CSS. C’est-à-dire, des marges internes et externes, une couleur, une taille de police et plein d’autres propriétés graphiques. Calculer tout cela est un véritable calvaire.
Par exemple, l’élément html peut avoir un background blanc, une marge interne de 20 pixels. L’élément body peut avoir un fond beige et une marge interne de 15 pixels. Etc etc. Calculer le rendu graphique de l’addition de tous ces styles imbriqués, implique de faire des milliers de calculs.
Je pense que vous comprenez maintenant mieux l’enjeu. PageSpeed Insights considère qu’un DOM de plus de 800 nœuds est un DOM trop complexe.
Pour régler le problème, vous devez donc simplifier le DOM. C’est plus facile à dire qu’à faire !
Comment simplifier le DOM
« On ne peut pas… »
Je vais apporter une première réponse décevante à la question que je viens de poser.
On ne peut pas facilement simplifier le DOM.
On a donc ce paradoxe : PageSpeed nous suggère d »éviter une taille excessive de DOM« , et pourtant on n’en a pas directement le contrôle.
En effet, le DOM résulte principalement du thème WordPress, du constructeur de pages (Elementor etc), et des plugins qui ajoutent des widgets dans les pages (par exemple, WooCommerce).
Donc, pour modifier et simplifier le DOM, il faudrait aller éditer à la main tous les fichiers qui génèrent le HTML des pages. Une tâche rébarbative que même des développeurs mettraient longtemps à faire. C’est comme si PageSpeed vous suggérait de recoder votre thème et vos plugins vous-même.
Donc, on ne peut rien faire ? Si !
Régler le problème d’avance en choisissant un thème économe en DOM
Cette solution ne s’applique bien sûr pas bien aux sites existants. Mais si vous avez un projet de site, soyez attentif à la complexité du DOM dès l’étape de choix du thème.
Faites attention au fait que les vendeurs de thèmes mentent très souvent sur leurs performances.
J’utilise et j’apprécie le thème Astra, mais je constate qu’ils m’ont menti. Leur DOM n’est pas si économe que ça, surtout avec Astra Pro et les divers modules. Pourtant, Astra fait mieux sur ce point que de nombreux autres thèmes, qu’ils se prétendent optimisés ou pas.
Vous pouvez mesurer le DOM des principales pages des démos de chaque thème en les passant dans PageSpeed Insights et en comparant le nombre de nœuds du DOM.
Certains thèmes ont été conçus pour avoir un DOM minimal. Par exemple sur un site j’ai utilisé un thème qui s’appelle « Blank » (« vide »). Ces thèmes minimalistes ont les inconvénients de leurs avantages. Ils sont optimisés pour le chargement… mais graphiquement très pauvres.
Il y a de toute façon une contradiction permanente entre deux enjeux. L’optimisation, et l’esthétique + la fonctionnalité. Plus un thème est splendide et riche, plus il sera lourd à charger.
A vous de faire un choix éclairé.
Remplacez certaines parties du thème par du HTML en dur
Je viens de le dire : beaucoup de thèmes créent un DOM trop lourd.
Sur Astra Pro, j’ai économisé 200 nœuds, par une ruse simple. Il faut un peu de connaissances techniques pour mettre en oeuvre cette solution mais ça reste à la portée des amateurs.
Voici la ruse. J’ai inspecté le code de mes pages, et constaté que la partie footer, pied de page, était remplie de nœuds inutiles.
J’ai copié ce code et je l’ai énormément simplifié. J’ai réécrit le HTML et créé un peu de CSS à la main pour que ce footer reste responsive.
Ensuite, j’ai édité le fichier footer.php de mon child theme. J’ai désactivé le PHP par défaut, et l’ai remplacé par mon HTML réécrit.
En faisant ça, j’ai gagné sur 2 tableaux :
- le DOM a 200 nœuds en moins
- au passage, j’évite aussi des requêtes PHP inutiles vers la base de données
Par exemple, quand le footer original allait générer le copyright en allant chercher le nom du site en base de données, j’ai remplacé ça par le nom du site en dur.
Quand il allait chercher le menu Légal des mentions légales, politique de confidentialité etc, j’ai remplacé cet appel à un menu WordPress par une liste de liens en dur.
Mine de rien, j’ai évité 10 requêtes peu judicieuses.
En effet, par nature un pied de page n’a aucune raison de changer souvent. Il n’affiche que des infos très permanentes.
Limiter les problèmes de DOM causés par les constructeurs de pages (Elementor, Divi…)
Les problèmes de complexité du DOM sont largement aggravés par les constructeurs de pages.
Comme Elementor, outil que j’apprécie pour son ergonomie et le temps qu’il fait gagner en webdesign. Et qui, pourtant, génère un DOM d’une qualité lamentable.
Elementor a en effet de fort mauvaises pratiques. Pour afficher quelques pauvres lignes de texte ou images, il va emboîter des <div> en masse, et leur attribuer de nombreuses classes CSS. Ce qui va rendre le navigateur fou de rage devant l’ampleur de la tâche.
Limiter l’usage des constructeurs de pages
La solution est simple et radicale. Limitez l’usage d’Elementor aux pages principales du site, mais ne l’employez pas pour publier vos contenus de type blog ou magazine. Contentez-vous du « Classic Editor » de WordPress.
Solutions propres à Elementor
Améliorer la gestion du DOM par Elementor
Aussi, il y a dans les réglages d’Elementor une option pour optimiser le DOM. Son existence même est un scandale. A l’évidence, tout développeur qui touche au DOM devrait garantir son caractère optimal par défaut.
Bien concevoir les pages Elementor
Avec Elementor, il y a une bonne et une mauvaise manière de concevoir les pages. La bonne génère un DOM plus simple.
La mauvaise manière consiste à emboîter sans vergogne des éléments dans des éléments. Par exemple :
- une section principale
- dans laquelle on met une sous-section en 2 colonnes
- colonnes dans lesquelles ont met d’autres sous-sections
- dans lesquelles ont place des widgets
Ceci créerait des nœuds par dizaine et un DOM de moins en moins calculable.
La bonne manière fait la même chose avec :
- une section principale
- 2 éléments définis avec une largeur de 50% sur ordi et 100% sur mobile
Ceci créera environ 2 fois moins de nœuds.
De même, enchaîner des tas de sections n’est pas une bonne pratique. Il faut en limiter le nombre autant que le design le permet.
De plus, évitez les pages à rallonge. 20 sections comportant juste 1 paragraphe chacune générerait au moins 60 nœuds (1 pour la section, un pour la colonne, un pour l’élément texte…)
Et enfin, sachez que les widgets pré-construits sont certes bien pratiques, mais fort peu optimisés. Pour afficher une icône, un texte et un lien, Elementor va utiliser des dizaines d’éléments inutiles. On obtient exactement le même rendu en créant son design à la main dans un élément Zone de texte ou en HTML.
Zappez Gutenberg
Ah, un mot sur Gutenberg, l’éditeur de blocs de WordPress dont je ne parle que très rarement, tellement je le méprise.
Cet éditeur est absolument nul. Anti-ergonomique, laid, poussif. Lui aussi génère un DOM inutilement complexe.
Donc, n’utilisez pas Gutenberg, supprimez-le. Rétablissez l’éditeur classique de WordPress en installant le plugin gratuit « Classic Editor ».
Besoin d’aide ?
Si vous préférez déléguer ce travail ingrat, je peux vous aider à optimiser votre DOM :
Service d’optimisation des performances
