7 stratégies éprouvées pour corriger l'avertissement "Éviter une taille DOM excessive"

Publié: 2022-11-23
TL; DR : La correction de l'avertissement "Éviter une taille DOM excessive" n'améliorera pas vos scores Lighthouse, mais cela a un impact direct sur les performances réelles de votre site. Une grande taille de DOM ralentit votre site, augmente le temps de rendu et les coûts de données pour vos utilisateurs et surcharge la mémoire de leurs appareils. Il existe de nombreuses solutions au problème de taille excessive du DOM, comme éviter les thèmes et plugins mal codés, diviser votre site Web d'une seule page en plusieurs pages et utiliser les constructeurs de pages avec prudence.

La plupart des suggestions d'amélioration de Google PageSpeed ​​Insights sont assez simples.

Qu'il s'agisse de "différer les images hors écran", "d'éliminer les ressources bloquant le rendu" ou de "réduire les CSS inutilisés", vous pouvez comprendre les prochaines étapes à suivre pour résoudre les problèmes.

Cependant, lorsque vous faites défiler un peu plus loin, vous êtes soudainement frappé par l'avertissement « Évitez une taille DOM excessive » :

Première réaction :

Qu'est-ce que la taille du DOM, et comment puis-je résoudre ce problème ? !

Vous êtes au bon endroit.

Dans les paragraphes suivants, vous apprendrez tout ce que vous devez savoir sur la taille du DOM et comment gérer cet avertissement :

  • Qu'est-ce que le DOM (Document Object Model) ?
  • Quel est l'impact de la taille du DOM sur les performances de la page ?
  • Pourquoi l'avertissement "Éviter une taille DOM excessive" s'affiche-t-il ?
  • Comment corriger l'avertissement "Éviter une taille DOM excessive"

Obtenez un score de 90+ PSI en un clic. Visualisez votre site avec NitroPack !

Qu'est-ce que DOM ?

Votre site Web comprend des ressources telles qu'un document HTML, des fichiers CSS et JavaScript.

Chaque fois qu'un utilisateur charge votre site Web, son navigateur établit une connexion et reçoit les ressources. Une fois le premier bloc de données reçu, le processus d'analyse commence.

L'analyse est l'étape que le navigateur prend pour transformer les données (balisage HTML) dans l'arborescence DOM.

Le DOM est un modèle de document représentant HTML comme un arbre de branches et de nœuds.

Chaque branche de l'arbre se termine par un nœud, et chaque nœud contient des objets. Un nœud représente une partie du document, comme un élément, une chaîne de texte ou un commentaire.

En termes plus simples, lorsque vous entendez DOM, cela signifie la structure des objets que le navigateur construit chaque fois qu'une page Web est chargée.

Mots clés:

  • Nœuds. Chaque élément ou balise du DOM est appelé nœud ou feuille.
  • Profondeur. Le nombre d'éléments dans une branche d'un DOM.
  • Élément enfant. Le dernier nœud qui ne se ramifie plus.

Quel est l'impact de la taille du DOM sur les performances de la page ?

Plus votre DOM a de branches et de nœuds, plus sa taille sera grande.

Respectivement, plus la taille du DOM est grande, plus vous pourriez rencontrer de problèmes de performances négatifs.

Voici quelques-uns des problèmes liés à une taille de DOM plus grande :

1. Augmentation des coûts de données et ralentissement des temps de chargement

Une grande arborescence DOM comprend souvent de nombreux nœuds qui ne sont pas visibles lorsque l'utilisateur charge la page pour la première fois. Cela augmentera inutilement les coûts de données, car ils devront charger plus d'éléments, pour vos utilisateurs et ralentir le temps de chargement.

2. Submerge les ressources mémoire de l'appareil de votre utilisateur

L'interaction continue avec les requêtes JavaScript entraîne des performances médiocres et un rendu lent. Cela se traduit par une expérience de page négative pour les utilisateurs de votre site.

3. Augmentation du temps de rendu

Lorsque les utilisateurs interagissent avec votre page, le navigateur doit constamment recalculer la position et le style des nœuds. Un arbre DOM volumineux et compliqué peut considérablement ralentir le rendu.

4. Augmentation du temps jusqu'au premier octet (TTFB)

Le TTFB mesure le temps qu'il faut au navigateur d'un client pour recevoir le premier octet de la réponse du serveur. Un DOM excessif indique un document HTML plus volumineux. Par conséquent, il y a plus de données à transporter, ce qui peut prendre plus de temps.

Pourquoi l'avertissement "Éviter une taille DOM excessive" s'affiche-t-il dans PageSpeed Insights ?

PSI utilise Lighthouse pour analyser les URL dans un environnement contrôlé (c'est-à-dire en utilisant des données de laboratoire) pour présenter les performances, l'accessibilité, les meilleures pratiques et le score SEO.

Pour que Lighthouse signale votre page et affiche respectivement l'avertissement « Éviter une taille DOM excessive » dans votre rapport PSI, l'une des erreurs suivantes doit être vraie pour son arbre DOM :

  • Il compte plus de 1 500 nœuds DOM au total.
  • Il a une profondeur de nœud maximale supérieure à 32 nœuds .
  • Un nœud parent a plus de 60 nœuds enfants .

Bon à savoir : la taille du DOM n'affecte pas directement vos scores Lighthouse (c'est-à-dire les performances, l'accessibilité, les meilleures pratiques et le référencement). Cependant, une taille DOM excessive affectera négativement les performances réelles de votre site, entraînant des temps de chargement lents et une mauvaise expérience utilisateur pour vos utilisateurs.

Rejoignez les 31 % de sites Web qui réussissent leurs Core Web Vitals ! Visualisez votre site avec NitroPack

 

Comment réparer Éviter une taille DOM excessive

Une bonne règle de base de Google est :

 "En général, recherchez des moyens de créer des nœuds DOM uniquement lorsque cela est nécessaire et détruisez les nœuds lorsqu'ils ne sont plus nécessaires."

Bien sûr, c'est plus facile à dire qu'à faire, et il y aura des moments où vous devrez vous pencher sur les détails de l'optimisation de votre site Web.

Ensuite, nous vous suggérons d'appliquer certains des correctifs suivants :

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

Ils vont essentiellement gonfler le code de votre site, augmenter la taille de votre DOM et nuire à la vitesse et aux performances globales de votre site.

Comment savoir si un thème/plugin a été mal codé ?

Excellente question. Et la réponse est :

  • Lisez les critiques. S'il y a des problèmes, quelqu'un les a probablement déjà rencontrés et les a commentés.
  • Ne soyez pas timide pour dépenser de l'argent. Comme pour toute autre chose, vous en avez pour votre argent. Économiser de l'argent en obtenant un thème/plugin gratuit peut sembler formidable, mais les effets à long terme vous coûteront beaucoup plus cher.
  • Vérifiez quand il a été mis à jour pour la dernière fois. Vous voulez absolument éviter les thèmes et plugins obsolètes.

Si vous êtes un utilisateur de WooCommerce ou envisagez de créer une boutique, vous devez absolument consulter nos recherches approfondies sur les thèmes Woo les plus performants en 2022.

Voici une liste de contrôle des choses que vous devriez surveiller/éviter lors de la sélection d'un thème :

  1. Thèmes polyvalents. Ils viennent avec beaucoup d'options que vous n'utiliserez jamais et, en même temps, gonfleront votre code.
  2. Versions gratuites. Encore une fois, ils sont parfaits pour un essai routier, mais souvent, ils sont sous-performants et peuvent vous causer beaucoup de problèmes.
  3. Thèmes annulés. N'utilisez jamais une version crackée d'un thème payant, car elle peut contenir des scripts malveillants qui pourraient nuire à votre site Web.

 

2. Minimisez les nœuds DOM basés sur JavaScript

L'ajout d'éléments dynamiques sur votre site Web a un prix, car ils pourraient le gonfler avec des nœuds JavaScript supplémentaires.

Pour commencer, vous pouvez le résoudre en allouant les fichiers JS qui causent des problèmes et en les supprimant. S'il s'agit d'un widget tiers (par exemple, un widget de chat), vous devez rechercher une alternative optimisée.

3. Les constructeurs de pages qui génèrent du HTML gonflé

La facilité d'utilisation des constructeurs de pages en a fait une partie intégrante du processus de création de sites Web pour de nombreux utilisateurs.

Malheureusement, les constructeurs de pages peuvent parfois produire du code gonflé avec un nombre excessif de nœuds DOM. Ils le font en injectant trop de balises div.

Pour y faire face, vous pouvez accéder à votre code HTML et le corriger manuellement.

La bonne nouvelle est que certains constructeurs de pages prennent des mesures pour résoudre ces problèmes bien connus. Par exemple, Elementor a annoncé qu'Elementor 3.0 est livré avec des améliorations DOM significatives pour augmenter la vitesse et les performances des nouveaux sites Web.

4. Ne copiez/collez pas de texte dans l'éditeur WYSIWYG

La plupart des éditeurs WYSIWYG (What You See Is What You Get) ne parviennent pas à nettoyer le code collé. Surtout lorsqu'il est collé à partir d'une autre source de texte enrichi comme Microsoft Word. Le problème est qu'il copiera non seulement le texte, mais également ses styles. Et ils sont les principaux coupables car ils peuvent intégrer de nombreux nœuds DOM.

Vous avez plusieurs options pour y faire face :

  • Évitez de coller du texte dans votre éditeur
  • Utilisez l'option Coller en tant que texte brut
  • (Si votre éditeur le permet) Utilisez les fonctionnalités avancées pour nettoyer le code après l'avoir collé

Et enfin, revenez à vos anciennes pages et nettoyez-les.

5. Divisez votre site Web d'une page en plusieurs pages

Un site Web d'une seule page est une excellente idée lorsque son seul but est de présenter votre entreprise.

Au contraire, si vous décidez d'ajouter des informations commerciales, des articles de blog, des produits, des formulaires de contact, etc., divisez-les en pages distinctes et reliez-les via le menu de navigation.

Le fractionnement de pages volumineuses en plusieurs pages peut réduire le nombre de nœuds DOM.

6. Ne cachez pas les éléments indésirables en utilisant display:none

display : none est couramment utilisé avec JavaScript pour masquer et afficher des éléments sans les supprimer ni les recréer. Cependant, cela ne signifie pas qu'ils disparaissent de votre balisage HTML, laissant les visiteurs charger des éléments indésirables.

7. Évitez d'utiliser des déclarations CSS compliquées et JavaScript

Des déclarations CSS compliquées et JavaScript peuvent également augmenter l'utilisation de la mémoire et ralentir votre site. Il est préférable de les ignorer si vous avez affaire à un nombre excessif de nœuds DOM.

Corrigez automatiquement les problèmes CSS et JavaScript ! Visualisez votre site avec NitroPack

En conclusion

Il est vrai que la résolution de vos problèmes DOM n'entraînera pas d'amélioration de vos scores PageSpeed ​​Insights.

Cependant, les avantages cachés de s'efforcer de gérer l'avertissement "éviter une taille DOM excessive" sont bien plus importants :

  • Augmentez le temps de chargement de votre site
  • Améliorez les performances perçues de votre page
  • Offrir aux visiteurs une meilleure expérience utilisateur

Surtout, ces trois choses sont récompensées par Google ! En plus de cela, ils sont un moyen infaillible de réduire les taux de rebond, d'augmenter le temps moyen passé et, enfin et surtout, d'augmenter les conversions.

Si vous cherchez des moyens de corriger d'autres suggestions PSI, assurez-vous de consulter nos autres articles :

  • Servez facilement des images dans des formats de nouvelle génération (WordPress, OpenCart et Magento)
  • Comment charger paresseusement des images hors écran (5 techniques éprouvées)
  • Optimisation des images pour le Web : 2022 SEO et techniques de vitesse du site
  • 8 stratégies de chargement de polices pour améliorer vos principaux éléments vitaux Web (2022)
  • Comment éliminer les ressources bloquant le rendu (CSS et JavaScript)
  • Réduire l'impact du code tiers (avec/sans plugins)
  • 7 façons de minimiser le travail du fil principal