Résoudre l’avertissement « Éviter une taille excessive du DOM » dans WordPress

Recevez-vous des avertissements de Google PageSpeed Insights ou Lighthouse concernant les performances de votre site WordPress ?

C’est un problème courant pour de nombreux propriétaires de sites WordPress, et il est essentiel de le résoudre rapidement.

Vous ne le savez peut-être pas, mais une taille importante du DOM peut ralentir l’affichage du contenu et des images sur votre site. Elle utilise également plus de mémoire, rend les interactions plus lentes et ralentit les scripts, nuisant aux performances et à l’expérience utilisateur de votre site.

Pour accélérer votre site WordPress et améliorer l’expérience utilisateur, vous devez vous attaquer au problème de la taille importante du DOM. Voyons comment résoudre ce problème.

Éviter une taille excessive du DOM

Comprendre le DOM

Le DOM, ou Document Object Model, représente la structure et le contenu d’un site WordPress. Il organise des éléments comme les en-têtes, le contenu, les visuels et les boutons dans un ordre spécifique, ce qui facilite leur accès et leur modification à l’aide de langages de programmation comme HTML, CSS et JavaScript.

Considérez le DOM comme un arbre généalogique. Comme un arbre généalogique avec des parents, des enfants et des proches, un site WordPress possède divers éléments (nœuds) à différents niveaux (profondeur). Cette hiérarchie continue jusqu’à atteindre le dernier élément (nœud enfant). Un DOM avec trop de nœuds est appelé « Taille excessive du DOM ».

Concepts clés :

  • Nœuds : Également appelés balises HTML, ce sont les éléments essentiels du DOM.
  • Profondeur : Désigne la profondeur atteinte par une branche dans l’arbre DOM.
  • Élément enfant : Un élément listé sous un autre élément, situé entre les balises HTML d’ouverture et de fermeture. Par exemple :
    Hello World

Maintenant que vous comprenez le DOM.

D’où vient une taille excessive du DOM ?

Une taille importante du DOM survient lorsque votre page web contient trop de balises HTML ou lorsqu’elles sont imbriquées trop profondément. Cela oblige le navigateur de l’utilisateur à travailler davantage, ralentissant les temps de chargement et réduisant vos scores de vitesse de page.

L’exécution lente de JavaScript et CSS est souvent due au fait que le navigateur doit traiter davantage de nœuds, ce qui retarde le rendu de la page.

Un DOM volumineux augmente l’utilisation de la mémoire, retarde le traitement des styles et provoque des reflux de mise en page coûteux. En modifiant des objets DOM, vous pouvez contrôler quels éléments de la page sont affichés à l’utilisateur. Vous pouvez le voir dans les DevTools de votre navigateur ou dans les écrans Inspect Element :

D'où vient une taille excessive du DOM ?

Cependant, si vous utilisez un outil comme Google Lighthouse, vous verrez peut-être un avertissement de performance à ce sujet.

Éviter une taille excessive du DOM dans WordPress

Le message est clair : vous devez suivre ‘Avoid an excessive DOM size’. Google Lighthouse signale cet avertissement dans trois domaines :

  1. Nombre total d’éléments : Si votre page contient plus de 800 éléments dans l’arbre DOM, vous verrez un avertissement.
  2. Profondeur maximale du DOM : Cette valeur indique la section de code avec les éléments les plus profondément imbriqués.
  3. Nœud parent avec de nombreux nœuds enfants : Lighthouse signale tout nœud parent avec plus de 60 nœuds enfants.

Bien qu’il s’agisse d’un « Diagnostic » dans Lighthouse, garder une petite taille de DOM améliore les performances du site et l’expérience utilisateur, augmentant votre score Core Web Vitals.

Raisons d’une taille excessive du DOM

Une taille importante du DOM peut considérablement ralentir vos pages web. Voici les facteurs clés contribuant à ce problème :

  1. Pages surchargées : Une page web contenant trop d’éléments en raison de conceptions complexes ou de code redondant entraîne un arbre DOM surchargé. Cela ralentit non seulement la page mais dégrade également l’expérience utilisateur.
  2. Imbrication excessive : Les structures HTML profondément imbriquées créent un arbre DOM complexe, rendant difficile pour les navigateurs le rendu efficace de la page. Cela entraîne un traitement plus lent du CSS et du JavaScript.
  3. Thèmes et plugins surchargés : Les thèmes et plugins ajoutent souvent des éléments inutiles, tels que du JavaScript ou du CSS. De nombreux thèmes sont livrés avec des fonctionnalités par défaut qui alourdissent le DOM, tandis que les plugins peuvent introduire des scripts et styles supplémentaires, augmentant les temps de chargement même lorsque ces fonctionnalités ne sont pas utilisées.

Identifier une taille excessive du DOM : outils et techniques

Comprendre et gérer la taille du DOM de votre site web est essentiel pour des performances optimales. Voici quelques outils et techniques pour vous aider à identifier et résoudre ce problème :

1. Google Lighthouse

Google Lighthouse est un outil gratuit et open source qui aide à identifier les problèmes de performance d’un site web, y compris une taille excessive du DOM. Voici comment l’utiliser :

  • Ouvrez Chrome et accédez à votre page web.
  • Cliquez avec le bouton droit sur la page et sélectionnez « Inspecter » pour ouvrir les Outils de développement.
  • Cliquez sur l’onglet « Lighthouse » puis sur « Analyze page load. »

2. Chrome DevTools

Chrome DevTools offre une vue détaillée du DOM de votre page web. Il aide à compter les nœuds du DOM et à identifier les éléments contribuant à une grande taille du DOM. Suivez ces étapes :

  • Ouvrez votre page web dans Chrome.
  • Cliquez avec le bouton droit et sélectionnez « Inspecter » pour ouvrir les DevTools.
  • Affichez l’arbre DOM dans l’onglet « Elements » et comptez les nœuds.

3. WebPageTest

WebPageTest est un outil en ligne offrant une analyse détaillée des performances de votre page web, y compris une ventilation des éléments DOM. Voici comment l’utiliser :

  • Visitez WebPageTest.org.
  • Saisissez l’URL de votre page web.
  • Cliquez sur « Start Test ».

4. GTmetrix

GTmetrix est un autre outil précieux qui analyse les performances de votre page web, y compris la taille du DOM. Voici comment l’utiliser :

  • Accédez à GTmetrix.com.
  • Saisissez l’URL de votre page web.
  • Cliquez sur « Test your site » et examinez le rapport détaillé, en vous concentrant sur les métriques liées au DOM.

5. PageSpeed Insights

PageSpeed Insights de Google fournit des informations sur les performances de votre page web, y compris les problèmes de taille du DOM. Voici comment l’utiliser :

  • Visitez PageSpeed Insights.
  • Saisissez l’URL de votre page web.
  • Cliquez sur « Analyze » pour obtenir un rapport détaillé sur les performances de votre page web, avec des recommandations spécifiques sur l’optimisation de la taille du DOM.

Grâce à ces outils, vous pouvez diagnostiquer et optimiser efficacement la taille du DOM de votre site web pour de meilleures performances.

Résoudre le problème de la taille excessive du DOM : trucs et astuces

Avant de pouvoir résoudre l’avertissement « avoid excessive-DOM size », vous devez en identifier les causes.

Tout d’abord, utilisez Google Lighthouse pour trouver la Profondeur maximale du DOM et les Éléments enfants maximaux. Ensuite, utilisez l’inspecteur DOM de votre navigateur web pour vérifier le DOM.

Votre objectif est d’identifier ce qui cause le nombre excessif de nœuds DOM.

1. Évitez les plugins et thèmes mal codés

Utiliser un plugin comme une chronologie, un calendrier ou un slider qui crée trop de nœuds DOM peut ralentir votre site web. Pour améliorer les performances, remplacez-le par un plugin plus efficace.

De même, les thèmes et modèles mal codés peuvent nuire à la vitesse de votre site. Vous pouvez améliorer votre site web en éliminant le code inutile à l’aide d’un éditeur épuré ou en modifiant votre modèle.

2. Réduisez les nœuds DOM JavaScript

JavaScript peut parfois ajouter trop de nœuds DOM à une page, ralentissant le site web. Par exemple, un widget de chat peut créer un nombre excessif de nœuds.

Envisagez de supprimer le fichier JavaScript problématique ou de passer à un widget plus efficace. Ce simple changement peut améliorer considérablement les performances et la vitesse de votre site.

3. Évitez les constructeurs de pages qui produisent un HTML excessif

Les constructeurs de pages comme WP Bakery, Elementor et Gutenberg peuvent parfois générer trop de nœuds DOM, ralentissant votre site. Ces outils sont utiles mais peuvent créer du code volumineux et inefficace.

Pour y remédier, nettoyez le code excédentaire et optimisez votre flux de travail. Récemment, les développeurs d’Elementor ont apporté des améliorations pour réduire l’encombrement et améliorer l’efficacité. À l’inverse, Gutenberg a tendance à produire un HTML plus propre, ce qui peut aider à maintenir une structure plus légère.

Évitez les constructeurs de pages qui produisent un HTML excessif

Examinez et simplifiez régulièrement votre HTML pour garder votre site web rapide et convivial. Cela garantira des temps de chargement plus rapides et une meilleure expérience pour vos visiteurs.

4. Optimisez le HTML de votre site WordPress

Pour optimiser l’organisation du HTML de votre site WordPress, voici ce que vous pouvez faire :

Choisissez un thème simple comme Hello Elementor ou Elementor, qui garde vos pages propres sans éléments inutiles.

Examinez vos pages et articles dans l’éditeur WordPress. Supprimez les shortcodes inutilisés, les balises div supplémentaires ou les éléments vides.

Cliquez avec le bouton droit sur votre site WordPress et choisissez « View Page Source » ou appuyez sur « CTRL + U ». Recherchez les sections de code répétitives, telles que plusieurs balises div avec la même classe ou les mêmes attributs de style.

Évitez les constructeurs de pages qui produisent un HTML excessif
Avertissement : Faites d’abord une sauvegarde de votre site web avant d’initier toute modification. Essayez WP Staging !

Accédez au tableau de bord WordPress → « Apparence » → « Éditeur de thème. » Vous pouvez y modifier les fichiers PHP de votre thème.

Évitez les constructeurs de pages qui produisent un HTML excessif

Éliminez tout code imbriqué inutile.

Après avoir effectué les modifications, enregistrez le fichier et testez votre site pour vous assurer que tout fonctionne correctement.

Cliquez avec le bouton droit sur votre site et sélectionnez « Inspecter ». Accédez à l’onglet Lighthouse et cliquez sur « Analyze page load » pour générer un rapport. Cela vérifiera les avertissements concernant « Avoid an Excessive DOM Size ».

5. Réduisez la charge du site web en gérant les scripts

Pour réduire efficacement la taille du DOM de votre site web, il est essentiel de gérer soigneusement les scripts et plugins que vous utilisez. Voici une approche étape par étape :

Auditez vos plugins : Examinez tous les plugins installés sur votre site web. Identifiez ceux qui sont essentiels et ceux qui ne sont pas utilisés. Les plugins inutilisés ou qui ralentissent considérablement votre site doivent être désactivés ou complètement supprimés pour rationaliser les performances de votre site.

Optimisez les scripts : Envisagez d’utiliser des plugins comme WP Rocket ou Asset CleanUp. Ces outils aident en minifiant et combinant les scripts. Minifier supprime les caractères inutiles du code sans changer sa fonctionnalité.

En revanche, combiner les scripts réduit le nombre total de fichiers que le navigateur de l’utilisateur doit télécharger, réduisant ainsi les requêtes et minimisant la taille du DOM.

Conseils pour réduire la taille du DOM pour de meilleures performances

Êtes-vous curieux de réduire la taille du DOM de votre site web ? Voici quelques conseils pratiques :

  • Utilisez le chargement paresseux et le défilement infini – Le chargement paresseux retarde le chargement de certaines parties de votre site, comme les images sur les pages de catégorie, jusqu’à ce qu’elles soient nécessaires. Limiter le nombre d’articles de blog ou d’éléments sur les pages de produits à environ dix peut également accélérer les temps de chargement.
  • Divisez les pages longues en plusieurs pages – Au lieu d’avoir une page longue avec beaucoup de contenu (comme des blogs, des formulaires de contact et des produits), créez des pages séparées pour chacun. Utilisez une barre de navigation pour les relier.
  • Améliorez le rendu de page avec CSS – Essayez la propriété CSS ‘content-visibility’. Elle permet au navigateur d’ignorer le rendu des éléments jusqu’à ce qu’ils soient nécessaires, ce qui peut améliorer les performances.
  • Simplifiez CSS et JavaScript – Évitez les styles CSS complexes et le code JavaScript lourd. Ils peuvent augmenter la taille du DOM et ralentir votre site. Les simplifier peut faire une grande différence.

Conclusion

Voilà comment traiter l’avertissement « Avoid Excessive DOM Size » dans WordPress ! Vous avez appris à connaître le problème et exploré des moyens de le résoudre, rendant votre site web plus rationalisé et réactif.

Chaque optimisation rend votre site plus rapide, plus efficace et plus facile à utiliser. Gardez ces conseils à l’esprit à mesure que vous développez vos compétences web.

Articles connexes

Rene Hermenau

Auteur : Rene Hermenau

À propos de l'auteur : René Hermenau est le fondateur de WP STAGING. Il travaille sur les sauvegardes WordPress, les environnements de staging, les migrations, la gestion des bases de données et les workflows de déploiement sécurisés.