Comment corriger une taille de DOM excessive dans WordPress (11 astuces d'experts)

L'avertissement « Éviter une taille de DOM excessive » dans WordPress signifie que votre page contient trop d'éléments HTML, ce qui la ralentit.

Les meilleures façons de résoudre ce problème sont d'utiliser un plugin de performance comme WP Rocket, d'optimiser le chargement des images et des galeries, et de choisir un thème ou un constructeur de page léger.

Cet avertissement peut apparaître dans Google Lighthouse ou d'autres outils de test de vitesse, et il semble technique. Mais le concept est simple : votre site web est une collection de pièces, et en avoir trop peut submerger un navigateur.

Chez WPBeginner, nous avons non seulement optimisé nos propres sites web à fort trafic pour résoudre ce problème exact, mais nous avons également aidé d'innombrables utilisateurs à améliorer la vitesse de leur site.

Dans cet article, nous détaillerons 11 de nos méthodes d'experts pour résoudre le problème et améliorer les performances de votre WordPress.

Que signifie l'avertissement « Éviter une taille de DOM excessive » ?

L'avertissement « Éviter une taille de DOM excessive » apparaît dans les outils de test de vitesse comme Google PageSpeed Insights lorsqu'une page Web contient trop d'éléments HTML pour qu'un navigateur puisse les traiter efficacement.

DOM signifie Document Object Model. C'est une structure arborescente qui représente tous les objets de votre page Web. Chaque élément, tel qu'un en-tête, un paragraphe, une image ou un bouton, est un « nœud » sur cet arbre.

Le nombre total de ces nœuds constitue la taille du DOM. Lorsque ce nombre devient trop important, le navigateur a besoin de plus de temps et de ressources pour afficher la page, ce qui peut ralentir votre site web.

Comment une taille de DOM excessive affecte-t-elle les performances d'un site web ?

Une taille de DOM importante a un impact négatif sur les performances de votre site WordPress de plusieurs manières clés. Chaque élément que vous ajoutez à une page, du texte aux images, en passant par les formulaires et les menus, augmente le nombre de nœuds du DOM.

Cette complexité a les effets suivants :

• Rendu de page plus lent : Un navigateur doit analyser l'intégralité de l'arbre DOM avant de pouvoir afficher la page. Un arbre plus grand prend plus de temps à traiter, ce qui retarde le moment où un visiteur voit votre contenu.
• Utilisation accrue de la mémoire : Une structure DOM complexe nécessite plus de mémoire et de puissance de traitement de la part de l'appareil de l'utilisateur. Cela peut être particulièrement perceptible sur les téléphones mobiles.
• Expérience utilisateur médiocre : Ces problèmes de performance entraînent des temps de chargement plus lents. Cela peut frustrer les visiteurs et les amener à quitter votre site avant même qu'il ne se charge.
• Impact négatif sur le SEO : Les moteurs de recherche comme Google utilisent la vitesse de la page comme facteur de classement. Les pages à chargement lent peuvent nuire à votre SEO WordPress et réduire les conversions de votre site web.

Combien d'éléments DOM sont trop nombreux pour Google ?

Les outils de test comme Google Lighthouse n'utilisent pas un seul chiffre pour signaler une taille de DOM excessive. Au lieu de cela, ils examinent trois critères spécifiques :

• Total de nœuds DOM : Un avertissement est déclenché si le nombre total d'éléments HTML (nœuds) sur la page dépasse 1 500. C'est la raison la plus fréquente de l'avertissement.
• Profondeur DOM maximale : Un avertissement est déclenché si les éléments sont imbriqués trop profondément les uns dans les autres. Lighthouse signale une page si l'imbrication dépasse 32 niveaux.
• Nombre maximal d'éléments enfants : Un avertissement est déclenché si un seul élément parent a plus de 60 éléments enfants directement à l'intérieur. Cela se produit souvent avec des méga menus ou des galeries mal codés.

Les pages avec plusieurs sliders, des mises en page complexes avec de nombreuses sections imbriquées, ou de nombreux éléments intégrés sont plus susceptibles de dépasser ces limites. Cependant, vous n'avez pas à sacrifier votre design pour résoudre ce problème.

Nous avons préparé un guide complet pour vous aider à résoudre ce problème. Voici 11 méthodes éprouvées pour réduire la taille du DOM et améliorer les performances de WordPress :

1. Utiliser un plugin d'optimisation de la vitesse WordPress
2. Vérifier votre thème et vos plugins
3. Utiliser un constructeur de page optimisé
4. Optimiser vos images et vidéos
5. Implémenter le chargement différé
6. Paginer les commentaires ou les articles avec beaucoup de contenu
7. Minifier les fichiers CSS et JavaScript
8. Réduire le JavaScript et le CSS bloquant le rendu
9. Activer la mise en cache WordPress
10. Utiliser un CDN WordPress
11. Optimiser votre base de données WordPress

N'hésitez pas à utiliser les liens rapides ci-dessus pour en savoir plus sur une méthode d'optimisation spécifique.

1. Utiliser un plugin d'optimisation de vitesse WordPress

Notre première recommandation est d'installer un plugin d'optimisation de vitesse WordPress puissant. Ces plugins gèrent les optimisations techniques nécessaires pour rendre votre site Web plus rapide.

Cela vous permet de vous concentrer sur la gestion et la création de votre contenu pendant que le plugin fonctionne en arrière-plan.

Chez WPBeginner, nous utilisons et recommandons WP Rocket. Nous l'avons utilisé sur nos propres sites Web pour gérer la mise en cache, l'optimisation des fichiers et le chargement différé, dont vous pouvez en savoir plus dans notre article sur comment nous améliorons la vitesse de chargement des pages sur WPBeginner.

Bien que WP Rocket soit principalement connu comme un plugin de mise en cache, bon nombre de ses fonctionnalités aident à résoudre les problèmes causés par un DOM volumineux. Celles-ci incluent l'optimisation des fichiers, le chargement différé et le report du JavaScript.

Nous expliquerons ces fonctionnalités plus tard dans l'article. Vous pouvez également lire notre avis complet sur WP Rocket pour plus d'informations, ou utiliser notre guide d'installation pour commencer.

2. Vérifiez votre thème et vos plugins

Bien que les plugins et les thèmes WordPress ajoutent des fonctionnalités et du style à votre site Web WordPress, ils peuvent également contribuer à une taille de DOM excessive.

Des thèmes et plugins mal codés peuvent ajouter des éléments HTML inutiles, gonflant la structure de votre page. De même, les plugins et thèmes avec des fonctionnalités supplémentaires que vous n’utilisez pas peuvent toujours charger leur code, augmentant le DOM.

Pour vérifier si un plugin ou un thème spécifique est le coupable, vous pouvez désactiver les plugins un par un ou passer temporairement à un thème WordPress par défaut. Après chaque changement, effectuez un test de vitesse pour voir si l’avertissement de taille du DOM disparaît.

Pour éviter ce problème, choisissez toujours des thèmes et des plugins provenant de sources réputées comme le répertoire officiel de WordPress ou des développeurs bien connus. Ces ressources ont généralement des normes de codage plus strictes.

Pour des recommandations fiables, consultez le WPBeginner Solution Center, où nous testons et examinons les logiciels WordPress.

3. Utilisez un constructeur de page optimisé

Les constructeurs de page sont d’excellents outils pour concevoir des mises en page personnalisées sans code, mais certains peuvent contribuer à une taille de DOM excessive. Ils encapsulent souvent votre contenu dans des éléments HTML supplémentaires pour contrôler le style et la mise en page.

Par exemple, un constructeur de page mal optimisé pourrait encapsuler un seul bouton dans plusieurs conteneurs <div> imbriqués pour l’alignement et le style. Chacun de ces conteneurs ajoute un nœud supplémentaire au DOM, augmentant rapidement le nombre total.

Si vous suspectez que votre constructeur de pages est à l'origine du problème, vous pouvez le tester en le désactivant sur un site de staging et en vérifiant à nouveau la taille du DOM. Vous pouvez utiliser des outils intégrés comme l'Éditeur de site complet, mais ils peuvent manquer de flexibilité.

Pour le meilleur équilibre entre flexibilité et performance, nous recommandons d'utiliser un constructeur de pages optimisé pour la vitesse comme SeedProd. Lors de nos tests, il surpasse constamment les autres constructeurs populaires.

Vous pouvez voir comment il se compare aux autres dans notre analyse Elementor vs. Divi vs. SeedProd.

De nombreuses marques partenaires, y compris WPForms et Duplicator, utilisent SeedProd pour construire leurs sites Web.

4. Optimisez vos images et vidéos

Il est important de clarifier comment les images sont liées à la taille du DOM. La taille du fichier d'une image (en Ko ou Mo) n'affecte pas le nombre de nœuds DOM. Une balise <img> est un nœud unique, quelle que soit la taille du fichier image.

Cependant, la manière dont les images sont affichées peut augmenter la taille du DOM. Certains thèmes et plugins de galerie encapsulent chaque image dans plusieurs conteneurs <div> pour le style, les lightboxes ou les légendes. Ce sont ces éléments d'encapsulation supplémentaires qui augmentent le nombre de nœuds DOM, et non l'image elle-même.

Bien que l'optimisation des images par compression soit cruciale pour la vitesse de la page, vous devriez également choisir des plugins de galerie qui génèrent un code propre. Un plugin comme Optimole peut aider à la compression des images et au chargement différé.

Pour les vidéos, nous recommandons de ne jamais les télécharger directement sur WordPress.

Hébergez-les plutôt sur des services comme YouTube ou Vimeo et intégrez-les. Cela réduit la charge sur votre serveur et maintient votre DOM plus propre.

5. Configuration du chargement différé

Le chargement différé est une technique qui retarde le chargement des éléments non critiques, tels que les images et les vidéos, jusqu'à ce qu'ils soient sur le point d'entrer dans la zone de visualisation de l'utilisateur. Cela permet au navigateur de rendre la partie initiale et visible de la page beaucoup plus rapidement.

En ne chargeant pas tout en même temps, le chargement différé réduit le travail de traitement initial pour le navigateur et crée une expérience utilisateur beaucoup plus fluide.

La mise en place du chargement différé est facile avec un plugin comme WP Rocket. Dans votre tableau de bord WordPress, naviguez vers Paramètres » WP Rocket et ouvrez l'onglet « Média ». Ici, vous pouvez activer le chargement différé pour les images, les vidéos et les iframes en un seul clic.

Pour les galeries, nous recommandons d'utiliser un plugin de galerie avec chargement différé intégré, tel que Envira Gallery.

Vous pouvez même charger en différé votre section de commentaires en utilisant un plugin comme Thrive Comments pour améliorer davantage les performances.

6. Pagination des commentaires ou des articles avec beaucoup de contenu

Les articles ou sections de commentaires très longs peuvent considérablement augmenter la taille du DOM et ralentir les temps de chargement. La pagination résout ce problème en divisant ce contenu en plusieurs pages plus petites.

Cela rend le contenu plus gérable pour le navigateur et le lecteur. Vous pouvez facilement diviser les articles longs en ajoutant le bloc « Saut de page » dans l'éditeur WordPress. Pour des instructions détaillées, consultez notre guide sur comment diviser les articles WordPress en plusieurs pages.

De même, vous pouvez paginer vos commentaires. Allez dans Réglages » Discussion dans votre espace d'administration WordPress, cochez la case à côté de « Diviser les commentaires en pages », et définissez le nombre de commentaires par page.

Vous pouvez en savoir plus dans notre guide sur comment paginer les commentaires dans WordPress.

Nous suggérons d'éviter le défilement infini, car il ajoute continuellement de nouveaux éléments au DOM, ce qui peut entraîner des problèmes de performance.

7. Minifier les fichiers CSS et JavaScript

Bien que cette technique ne réduise pas directement le nombre de nœuds DOM, elle améliore considérablement les performances et atténue l'impact négatif d'un DOM volumineux.

La minification supprime les caractères inutiles tels que les commentaires, les espaces et les sauts de ligne de vos fichiers CSS et JavaScript. Cela réduit leur taille de fichier, ce qui permet à un navigateur de les télécharger et de les traiter plus rapidement.

Un plugin comme WP Rocket simplifie cela. Allez dans Paramètres » WP Rocket, accédez à l'onglet « Optimisation des fichiers », et activez les fonctionnalités pour minifier les fichiers CSS et JavaScript. Pour plus de détails, consultez notre guide sur comment minifier les fichiers CSS et JavaScript.

Avant de minifier, nous vous recommandons de créer une sauvegarde de votre site. Dans de rares cas, la minification peut causer des problèmes avec certains thèmes ou plugins.

8. Réduire le JavaScript et le CSS bloquant le rendu

C'est une autre technique qui ne réduit pas directement les nœuds DOM mais améliore considérablement les performances perçues en modifiant la façon dont les fichiers sont chargés.

Imaginez qu'un navigateur charge votre page comme s'il peignait un tableau. Les ressources bloquant le rendu forcent le navigateur à arrêter de peindre la page Web jusqu'à ce qu'elles soient entièrement chargées. Le report de celles-ci permet au contenu principal d'être peint en premier, de sorte que l'utilisateur voit votre site plus rapidement.

WP Rocket dispose de fonctionnalités pour résoudre ce problème. Il peut combiner les fichiers pour réduire les requêtes HTTP et reporter le chargement du JavaScript non critique. Cela signifie que les utilisateurs voient votre contenu plus rapidement, même si les scripts d'arrière-plan n'ont pas fini de se charger.

Vous pouvez en apprendre davantage dans notre article sur comment corriger les ressources bloquant le rendu dans WordPress.

9. Activer la mise en cache WordPress

Bien que la mise en cache ne réduise pas directement le nombre de nœuds DOM, elle accélère considérablement les temps de chargement des pages, en particulier pour les visiteurs récurrents. Cela rend le chargement et l'affichage du DOM beaucoup plus rapides.

La mise en cache stocke une version statique de votre site. Lorsqu'un utilisateur revisite votre site, son navigateur peut charger cette version enregistrée au lieu de reconstruire la page à partir de zéro, ce qui est beaucoup plus rapide. Cela réduit également la charge sur votre serveur, le libérant pour traiter le DOM plus rapidement.

La mise en place de la mise en cache est simple avec un plugin comme WP Rocket, qui active automatiquement les paramètres de mise en cache optimaux lors de l'activation. Vous pouvez en apprendre davantage sur ses fonctionnalités de mise en cache dans notre guide d'installation de WP Rocket.

10. Utiliser un CDN WordPress

Un CDN (Content Delivery Network) aide également à atténuer les effets d'un DOM volumineux sans le modifier directement. Un CDN est un réseau mondial de serveurs qui stocke des copies des fichiers statiques de votre site Web (images, CSS, JavaScript).

Lorsqu'un utilisateur visite votre site, le CDN livre ces fichiers depuis le serveur le plus proche de sa localisation physique. Cela réduit considérablement les temps de téléchargement et permet au navigateur de commencer à traiter le DOM beaucoup plus rapidement.

Nous utilisons le CDN de Cloudflare sur WPBeginner. Vous pouvez découvrir pourquoi nous l'avons choisi dans notre article sur le passage de Sucuri à Cloudflare.

Pour d'autres options, consultez notre liste des meilleurs services CDN pour WordPress.

11. Optimisez votre base de données WordPress

C'est une autre optimisation indirecte. Bien que votre base de données ne fasse pas partie du DOM, une base de données volumineuse peut ralentir le temps de réponse de votre serveur. Ce délai rend le chargement de votre site plus long, ce qui peut donner l'impression que même un DOM volumineux est encore plus lent.

Au fil du temps, votre base de données peut se remplir de données inutiles telles que les révisions de publications, les commentaires spam et les anciennes données de plugins. Nettoyer cela aide votre site web à fonctionner plus efficacement.

Notre guide sur comment optimiser votre base de données WordPress vous montre comment utiliser un plugin pour nettoyer votre base de données en toute sécurité et rapidement.

Concentrez-vous sur les performances globales de WordPress, pas seulement sur la taille du DOM

Bien qu'il soit important de résoudre l'avertissement « Éviter une taille de DOM excessive » dans WordPress pour la vitesse du site, ce n'est pas le seul facteur à considérer.

Un site web avec beaucoup de fonctionnalités ou un formatage unique peut naturellement avoir un DOM plus grand, et c'est normal. L'essentiel est de trouver le bon équilibre entre les performances du site et les fonctionnalités.

Ainsi, en dehors de la taille du DOM, vous voudrez peut-être prêter attention à d'autres métriques comme les Core Web Vitals. Ce sont des métriques spécifiques que Google utilise pour mesurer l'expérience utilisateur d'un site web.

Foire aux questions sur la taille excessive du DOM

Voici les réponses à certaines des questions les plus courantes que nous recevons concernant la correction des problèmes de taille de DOM dans WordPress.

Quelle est une bonne taille de DOM pour une page web ?

Selon les directives de Google, un bon objectif est de maintenir la taille de votre DOM en dessous de 1 500 nœuds au total, avec une profondeur d'imbrication maximale de 32 niveaux, et aucun élément unique n'ayant plus de 60 enfants.

L'utilisation d'un constructeur de pages augmentera-t-elle toujours la taille du DOM ?

Pas nécessairement. Les constructeurs de pages modernes axés sur la performance comme SeedProd sont conçus pour générer un code propre et efficace. Cependant, certains constructeurs de pages plus anciens ou mal codés peuvent ajouter de nombreux éléments d'encapsulation inutiles qui augmentent la taille du DOM.

Comment puis-je vérifier gratuitement la taille du DOM de mon site web ?

Vous pouvez utiliser des outils en ligne gratuits comme Google PageSpeed Insights ou GTmetrix. Vous pouvez également le vérifier directement dans votre navigateur. Dans Google Chrome, faites un clic droit sur votre page, choisissez « Inspecter », allez dans l'onglet « Console » et tapez la commande document.querySelectorAll('*').length puis appuyez sur Entrée.

Ressources supplémentaires pour la performance WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment corriger une taille de DOM excessive dans WordPress.

Vous pourriez également consulter ces guides connexes sur l'amélioration des performances de votre site web :

• Le guide ultime pour améliorer la vitesse et les performances de WordPress
• Comment accélérer les performances de WooCommerce
• Façons éprouvées de réduire le taux de rebond et d'augmenter les conversions

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.