Réduisez la taille de votre DOM

Vous voilà de retour sur le site de l’agence 36 Pixels avec une nouvelle recommandation issue de l’outil Google PageSpeed Insights : « évitez une taille excessive de DOM ». Vous voilà bien ! Ne vous inquiétez pas, nous allons vous aider à faire le point, et mettre en place des solutions pour accélérer le temps de chargement de votre site.

Au fait, on se présente tout de même si vous êtes retrouvé(e) sur notre site pas hasard. Nous sommes l’agence web 36 Pixels, spécialisée dans la réalisation de site sous WordPress et/ou avec Vue.js. Nous aidons les entreprises à améliorer les performances de leur site Internet, afin d’optimiser leur référencement. Si cela vous intéresse, écrivez-nous.

Éviter une taille excessive de DOM est une recommandation usuelle sur Google PageSpeed Insights. On la retrouve aussi sur le plugin LightHouse de Chrome. Très souvent les développeurs n’accordent pas d’importance à ce point très précis. Nous allons faire dans cet article le point sur la situation :

• Qu’est-ce que le DOM ?
• Qu’est-ce qu’une taille excessive de DOM ?
• Pourquoi est-ce que la taille du DOM est importante ?
• Comment réduire une taille excessive de DOM ?
• Comment optimiser la taille du DOM sous WordPress ?
• Taille du DOM et Vue.js, comment l’optimiser ?
• Quel gain espérer en optimisant la taille du DOM ?

Définition du DOM, document object modele ?

C’est avant tout la première question à se poser : qu’est-ce que le DOM ? Le DOM, Document Object Model, ou Modèle de document objet correspond à la structure de votre page. Nous voilà bien…

Si vous avez quelques notions en programmation web, vous savez que le contenu de votre page est écrit en HTML, langage de programmation de balise. Ainsi un paragraphe de texte correspond à une balise <p>, un titre à une balise <h1> et un article à une balise <article>.

Votre article justement, contient un titre et plusieurs paragraphe. Donc votre balise <article> va contenir une balise <h1> et plusieurs balises <p>. On parle de balise enfant et de balise parent. Ainsi, on arrive à reproduire le schéma d’une page web sous forme d’un arbre avec des branches.

Voici un exemple de représentation d’une page web sous forme d’un arbre.

Continuons sur nos explications. A la racine de votre page, il y a le document, le « D » du DOM. Dans notre fameux arbre, c’est ce qui est la tête de toute les balises, le tronc. Bref, le document contient toute la page.

Si vous souhaitez en savoir plus sur le DOM, nous vous conseillons la page wikipedia sur le DOM qui est très bien faite.

Qu’est-ce qu’une taille excessive de DOM ?

Google PageSpeed Insight est très clair la dessus. la taille de votre DOM est considérée comme excessive quand elle contient plus de 1500 éléments, donc 1500 balises. Cela devrait normalement nous laisser un peu de marge. Par ailleurs, au niveau de l’arborescence, la profondeur de votre DOM doit être de 32 éléments maximum, avec moins de 60 éléments enfant / parent, un élément pouvant en effet avoir plusieurs enfants.

Voici donc les raisons qui peuvent rendre votre DOM trop grand :

• Vous pouvez avoir un DOM qui est trop important parce que votre page contient énormément d’informations.
• La taille de votre DOM peut être trop importante parce que vous avez un design compliqué sur votre site, avec des mises en forme différentes, une sidebar, un méga-menu, un footer à rallonge…
• Enfin, vous pouvez aussi avoir un DOM très important parce que votre site a été très mal codé, tout simplement.

Pourquoi est-ce que la taille du DOM est importante ?

La taille du DOM est importante car votre navigateur doit pouvoir à tout moment modifier ce DOM en fonction d’interaction, pour aller afficher un nouveau contenu dans la page par exemple (un message d’erreur ?), passer à la slide suivante sur un carrousel, ou simplement tout ré-afficher correctement quand vous modifier la largeur de la fenêtre de votre navigateur. Ce ne sont que 3 exemples, mais il faut se rendre compte qu’il y des tas d’interaction possible sur votre page et que votre navigateur est tout le temps à l’écoute de vos actions pour savoir quoi faire.

Pour être à l’écoute, votre navigateur va donc utiliser de la mémoire pour votre DOM, et plus le DOM est grand, plus la mémoire allouée va devoir être importante.

Autre information, l’utilisation du CSS va demander beaucoup plus de mémoire avec un DOM important, notamment si la profondeur de l’arbre est importante.

Comment réduire une taille excessive de DOM ?

Le problème, avec la réduction de la longueur et de la profondeur du DOM, c’est qu’il faut simplifier la structure de la page, ce qui n’est pas forcément facile. Dans un monde idéal, il faudrait avoir eu une réflexion stratégique sur ce point lors du développement du site. Réduire le nombre de balise après développement est long et fastidieux. Il implique la refonte du HTML, du CSS et parfois du JS.

Quelques solutions pour réduire la taille du DOM

Si l’on doit mettre en place une stratégie de réduction de la longueur et de la profondeur du DOM, il faut essayer de morceler son code et de l’attaquer zone par zone. Il y a des sections à l’intérieur de la page qui demande plus de balise :

• Les menus : si vous utilisez un mega-menu, vous avez sans doute une profondeur de DOM importante et cela pénalise votre site. Par ailleurs, il est souvent mal optimisé et ralenti votre site plus globalement. Supprimez votre mega menu.
• Les sidebars : les sidebars servent souvent de fourre-tout et génèrent un grand nombre de balise. Alléger votre sidebar !
• Le footer : encore une fois, le footer peut aussi servir de fourre-tout et il est facile de le simplifier pour réduire le DOM

Plus globalement, si vous avez des sections dans votre page qui vous paraissent chargées en terme de design avec beaucoup d’éléments, il est sans doute possible de l’optimiser.

Comment optimiser la taille du DOM sous WordPress ?

WordPress est souvent sujet à une grandeur excessive du DOM. Il n’existe pas de plugin ou de solutions particulières pour l’optimiser sur cette recommandation Google PageSpeed Insight. Il est donc nécessaire d’appliquer une stratégie d’effort sur la taille du DOM dès la conception et le développement du site WordPress.

Si cela n’a pas été le cas, voici au moins quelques éléments qui peuvent alourdir votre site WordPress :

• Les thèmes premium : les thèmes premium WordPress sont conçus pour répondre au plus grand nombre et ne sont pas optimisés pour la web performance. Pour avoir un design attractif, les thèmes premium sont gourmand en balise.
• Les page-builder : n’utilisez pas de page builder sur WordPress. Ils créent un nombre important de balises pour arriver à concevoir la mise en forme que vous souhaitez.
• Les plugins et widgets : les plugins et widgets peuvent aussi générer du DOM sans se soucier des conséquences. Pensez à réduire le nombre de plugins que vous utilisez ou les widgets présents dans vos sidebars ou footer pour diminuer la taille du DOM.

DOM et Vue.js, comment l’optimiser ?

Vous ne le savez peut être pas, mais nous sommes aussi une agence experte en Vue.js. Nous préconisons ce framework front-end JS en couplage avec WordPress pour nos clients qui sont très attentifs au temps de chargement de leur site, souvent avec une volonté d’optimisation SEO très forte, par exemple sur un secteur d’activité très concurrentiel. Les résultats sont excellents !

Bref, vis à vis des recommandations Google PageSpeed Insights, Vue.js ne permet pas particulièrement d’optimiser la taille du DOM, ce n’est pas ce que l’on attend de lui. Sans vouloir être trop technique, sa structure CSR (Client Side Rendering), rendu côté client permet cependant d’économiser de la bande passante lors de la navigation sur le site, d’une page à une autre, en ne rechargeant pas tout le DOM.

Il existe aussi avec Vue.js des solutions pour faire du Lazy-loading de balise. L’idée est de charger le contenu de la page au fur et à mesure du scroll sur la page. Là on est très très performant ! Malheureusement, cette solution n’est pas encore bien prise en compte par les robots de Google lors de leur indexation des pages.

Bonne nouvelle tout de même, Google vient cependant de faire l’annonce de son prochain support lors de leur dernière convention de développeur en novembre 2019. C’est donc prévu pour 2020. Le Client Side Rendering de Vue.js pourra alors permettre de pousser encore plus loin l’optimisation du temps de chargement des sites tout en restant parfaitement optimisé pour le référencement. A suivre donc…

Optimiser le DOM pour obtenir un site plus rapide

N’espérez pas que votre site se chargera beaucoup plus rapidement en réduisant la taille de votre DOM. Cela a bien sur une influence sur le temps de chargement, mais cela reste sans comparaison avec l’optimisation des images ou des fichiers CSS ou JS.

Optimiser la taille du DOM vous permettra en revanche de rendre votre page interactive plus rapidement en réduisant la mémoire allouée par votre navigateur. On parle alors de ressenti utilisateur. Cela agira donc sur l’indice de vitesse, le délai avant interactivité, le premier processeur inactif et le Max Potential First Input Delay. Bref, 4 indicateurs sur 6, ce qui est pas mal.

Dernier point concernant le gain potentiel, plutôt orienté SEO cette fois-ci. La consommation issue d’Internet est un sujet qui est de plus en plus au coeur des débats. Google qui veut se donner une image d’entreprise responsable, s’intéresse beaucoup à la consommation des serveurs et des appareils (ordinateur, smartphone) lors de l’utilisation d’Internet. Les dernières annonces faites nous montrent que l’optimisation du DOM, et donc l’éco-conception des sites Internet, sera sans doute bientôt pris en compte comme un critère de référencement.

Conclusion sur l’optimisation de la taille du DOM

Vous l’aurez compris, on vous conseille grandement de réfléchir à l’optimisation du DOM de votre page dès la conception du site Internet. La corriger plus tard aura des répercutions sur l’ensemble des fichiers de votre site et s’avérera plus complexe.

Il faut aussi faire attention car de nombreux développeurs ne prêtent pas attention à la taille du DOM et même si cela n’a pas d’impact visible sur le temps de chargement de votre page, c’est notamment son délai avant interactivité qui en sera impacté.

Enfin dernier point, N’hésitez pas à nous contacter si vous avez des problèmes de DOM.