24 juillet 2023

Comment Ă©viter une taille DOM excessive

Comment rĂ©soudre l'avertissement Éviter une taille DOM excessive ?

Une taille DOM excessive peut nuire aux performances Web. Aujourd'hui, nous allons explorer comment vous pouvez Ă©viter une taille DOM excessive.

Nous verrons également comment réduire la taille du DOM sur diverses plates-formes, CMS et frameworks Web.

Qu'est-ce que le DOM et la taille du DOM ?

Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il reprĂ©sente la structure d'un document et permet aux programmes de manipuler le contenu, la structure et les styles du document. Chaque Ă©lĂ©ment du document est un nƓud dans l'arborescence DOM, et la taille du DOM fait rĂ©fĂ©rence au nombre total de nƓuds dans l'arborescence DOM.

Votre navigateur crée une arborescence d'objets appelée DOM (Document Object Model) chaque fois qu'il charge une page Web.

DOM est un diagramme d'arborescence d'objets dans votre code HTML. Affichez chaque Ă©lĂ©ment HTML sous la forme d'un corps ou h1 avec son propre nƓud.

DOM représente la nature hiérarchique de différents objets qui peuvent ou non dépendre les uns des autres. Comme mentionné ci-dessus, il affiche la structure HTML de la page Web sous forme d'arborescence, composée d'une série de balises.

Voici comment cela fonctionne : Lorsque votre navigateur Web commence Ă  prĂ©parer une page pour l'affichage, il gĂ©nĂšre un diagramme d'arborescence d'objets de tous les Ă©lĂ©ments de la page en fonction de sa structure HTML.

Par conséquent, chaque fois qu'il reçoit un fichier HTML, il commence par le convertir en une forme arborescente appelée DOM ou arbre DOM. Vous pouvez accéder au DOM et le modifier à l'aide de JavaScript.

Voici quelques termes clĂ©s liĂ©s au DOM :

  • Noeuds. Chaque Ă©lĂ©ment ou balise du DOM est appelĂ© un nƓud ou une feuille dans l'arborescence du DOM.
  • Profondeur. Le nombre d'Ă©lĂ©ments dans une branche d'un DOM s'appelle la profondeur.
  • ÉlĂ©ment enfant. Le dernier nƓud qui ne se branche pas plus loin est appelĂ© un enfant.

Qu'est-ce que cela signifie d'Ă©viter une taille DOM excessive ?

Une taille DOM excessive se produit lorsqu'il y a trop de nƓuds DOM (ou de balises HTML) sur votre page ou lorsqu'ils sont imbriquĂ©s trop profondĂ©ment. Cela oblige le navigateur de l'utilisateur Ă  consommer de l'Ă©nergie supplĂ©mentaire pour traiter votre page Web, ce qui entraĂźne un chargement lent de la page et des scores de vitesse de page faibles.

L'une des raisons pour lesquelles JavaScript et CSS sont souvent lents Ă  s'exĂ©cuter est que le navigateur doit traiter plusieurs nƓuds, ce qui entraĂźne un retard dans le rendu des pages.

Une taille DOM excessive entraßne une utilisation plus élevée de la mémoire, des retards de traitement des styles et crée des dispositions de mise en page coûteuses. La modification des objets DOM vous permet de contrÎler les éléments de page que vous souhaitez montrer à votre utilisateur.

En termes simples, garder la petite taille du DOM amĂ©liore les performances du site et l'expĂ©rience utilisateur. Ceci, Ă  son tour, amĂ©liorera votre score Vitaux Web de base .

Avertissement "éviter une taille DOM excessive" expliqué.

Ici, nous parlerons de l'avertissement "Ă©viter une taille DOM excessive" dans Lighthouse.

Vous rencontrerez cette erreur si :

  • Il y a plus de 1.500 XNUMX nƓuds DOM au total. Il y a plus de 1500 Ă©lĂ©ments HTML sur votre page Web.
  • Vous avez atteint une profondeur de nƓud maximale supĂ©rieure Ă  32 nƓuds. Un Ă©lĂ©ment est imbriquĂ© dans 32 Ă©lĂ©ments parents ou plus.
  • Il existe un nƓud parent avec plus de 60 nƓuds enfants. Il y a plus de 60 enfants (Ă©lĂ©ments de liste ou lignes de tableau) dans un Ă©lĂ©ment parent.

L'avertissement "éviter une taille DOM excessive" n'affecte pas directement les métriques Lighthouse. Alors qu'en théorie, les pages avec un grand DOM peuvent se charger rapidement, mais dans le monde réel, ce n'est généralement pas le cas.

Cependant, une grande taille de DOM affectera certainement d'autres métriques Lighthouse telles que le plus grand contenu de contenu (LCP) et le déplacement de mise en page cumulé (CLS).

Comment mesurer la taille du DOM ?

Vous pouvez mesurer la taille du DOM Ă  l'aide de l'outil Google Lighthouse, intĂ©grĂ© Ă  Chrome DevTools. Lighthouse signale les pages qui ont plus de 1.500 32 nƓuds DOM au total, une profondeur de nƓud maximale supĂ©rieure Ă  60 nƓuds ou un nƓud parent avec plus de XNUMX nƓuds enfants.

Bien qu'une taille DOM excessive n'affecte pas directement vos scores Lighthouse, elle peut avoir un impact négatif sur les performances réelles de votre site, entraßnant des temps de chargement lents et une mauvaise expérience utilisateur.

Comment une taille DOM excessive affecte-t-elle la vitesse de la page ?

Bien que l'avertissement de taille DOM excessive n'affecte pas directement les métriques Lighthouse, il affecte d'autres métriques qui conduisent finalement à un score Lighthouse inférieur.

Par exemple, une grande taille de DOM complique inutilement la lecture et l'analyse d'une page Web par un navigateur. Par conséquent, le navigateur mettra plus de temps à charger la page à l'écran.

Chaque fois qu'une page se charge, le navigateur Web doit télécharger et analyser le code HTML avant de pouvoir commencer à générer l'arborescence DOM.

Voici quelques-unes des façons dont une taille DOM excessive peut affecter les performances de votre page :

  • Augmentez le nombre d'octets transfĂ©rĂ©s. Inclut plusieurs nƓuds qui ne sont pas affichĂ©s Ă  l'utilisateur lors du premier chargement. Cela ralentit la vitesse de chargement des pages et nuit Ă  l'efficacitĂ© du rĂ©seau, entraĂźnant une augmentation des coĂ»ts de donnĂ©es et une mauvaise expĂ©rience de la page pour les utilisateurs.
  • Ralentir le rendu des pages. Le navigateur consomme plus de ressources car il doit continuellement recalculer la position et le style des diffĂ©rents nƓuds. De mĂȘme, les performances du site souffrent Ă©galement de rĂšgles de style compliquĂ©es.
  • DĂ©borde les ressources mĂ©moire de la machine de l'utilisateur. L'interaction continue avec les requĂȘtes JavaScript entraĂźne de mauvaises performances d'exĂ©cution et un rendu de page lent. Cela se traduit par une mauvaise expĂ©rience de page pour les utilisateurs de votre site.

Le fait est qu'une grande taille de DOM affecte nĂ©gativement les performances d'une page Web. Voici un aperçu des autres Ă©lĂ©ments concernĂ©s :

  • EfficacitĂ© du rĂ©seau et performances de charge
  • Performances d'exĂ©cution
  • Performances de la mĂ©moire

Comment rĂ©duire la taille du DOM ?

Réduire la taille du DOM implique d'optimiser la structure et le code de votre site Web. Voici quelques stratégies à considérer :

Évitez les plugins et les thĂšmes mal codĂ©s : Ceux-ci peuvent alourdir le code de votre site, augmenter la taille du DOM et nuire Ă  la vitesse et aux performances globales de votre site. VĂ©rifiez toujours les avis, mettez Ă  jour les dates et envisagez d'investir dans des options premium.

Minimisez les nƓuds DOM basĂ©s sur JavaScript : Les Ă©lĂ©ments dynamiques de votre site Web peuvent le gonfler avec des nƓuds JavaScript supplĂ©mentaires. Vous pouvez rĂ©soudre ce problĂšme en identifiant et en supprimant les fichiers JS problĂ©matiques ou en trouvant des alternatives optimisĂ©es.

Soyez prudent avec les constructeurs de pages : Les constructeurs de pages peuvent parfois produire du code gonflĂ© avec trop de nƓuds DOM. Certains constructeurs de pages prennent des mesures pour rĂ©soudre ces problĂšmes, mais il est toujours recommandĂ© de vĂ©rifier et de nettoyer manuellement votre code HTML.

Ne copiez/collez pas de texte dans l'Ă©diteur WYSIWYG : La plupart des Ă©diteurs ne parviennent pas Ă  nettoyer le code collĂ©, en particulier lorsqu'il est collĂ© Ă  partir d'une autre source de texte enrichi telle que Microsoft Word. Cela peut intĂ©grer de nombreux nƓuds DOM. Pour Ă©viter cela, collez en texte brut ou nettoyez le code aprĂšs le collage.

Divisez votre site Web Ă  page unique en plusieurs pages : Si votre site Web Ă  page unique contient beaucoup de contenu, envisagez de le diviser en pages distinctes. Cela peut rĂ©duire le nombre de nƓuds DOM.

Évitez de masquer les Ă©lĂ©ments indĂ©sirables en utilisant display:none : Cette propriĂ©tĂ© CSS masque les Ă©lĂ©ments mais ne les supprime pas de votre balisage HTML, ce qui oblige les utilisateurs Ă  charger des Ă©lĂ©ments indĂ©sirables.

Évitez les dĂ©clarations CSS compliquĂ©es et JavaScript : Ceux-ci peuvent augmenter l'utilisation de la mĂ©moire et ralentir votre site. Il vaut mieux les Ă©viter si vous avez affaire Ă  trop de nƓuds DOM.

Recommandations spécifiques aux différentes plateformes et CMS

Voici diverses recommandations spécifiques à la plate-forme pour éviter un grand DOM.

WordPress

WordPress, étant un CMS dynamique, peut parfois générer une grande taille de DOM s'il n'est pas géré correctement. Voici quelques recommandations :

Utiliser un thĂšme clair : Les thĂšmes avec un design minimaliste et moins de JavaScript ont tendance Ă  avoir une taille DOM plus petite.

Limiter le nombre de publications sur une page : Avoir trop de messages sur une seule page peut augmenter la taille de votre DOM. Limitez le nombre de messages par page dans vos paramĂštres de lecture.

Apprenez-en plus sur WordPress Speed ​​Optimization en suivant cette liste de contrîle.

RĂ©agir

React est une bibliothĂšque JavaScript pour la crĂ©ation d'interfaces utilisateur, et elle utilise un DOM virtuel pour amĂ©liorer les performances. Voici quelques conseils pour Ă©viter une taille DOM excessive dans React :

RĂ©utilisation des composants : RĂ©utilisez les composants autant que possible. Non seulement cela rendra votre code plus propre, mais cela rĂ©duira Ă©galement la taille globale de votre DOM.

Évitez les fonctions en ligne dans le rendu : Les fonctions en ligne peuvent provoquer des rendus inutiles et augmenter la taille du DOM. Au lieu de cela, dĂ©finissez la fonction en dehors de la mĂ©thode de rendu et rĂ©fĂ©rencez-la dans le rendu.

Utiliser les clĂ©s dans les listes : Lors du rendu des listes dans React, utilisez toujours des clĂ©s. Les clĂ©s aident React Ă  identifier les Ă©lĂ©ments qui ont Ă©tĂ© modifiĂ©s, ajoutĂ©s ou supprimĂ©s, et aident Ă  rĂ©duire la taille du DOM en Ă©vitant un nouveau rendu inutile.

Shopify

Shopify est une plate-forme de commerce Ă©lectronique populaire, voici quelques moyens d'Ă©viter une taille DOM excessive :

Minimiser l'utilisation de l'application : Chaque application que vous ajoutez Ă  votre boutique Shopify peut augmenter la taille de votre DOM. Utilisez uniquement les applications dont vous avez besoin et dĂ©sinstallez toutes les applications que vous n'utilisez pas.

Limitez le nombre de produits sur une page : Semblable Ă  WordPress, avoir trop de produits sur une seule page peut augmenter la taille de votre DOM.

Limitez le nombre de produits par page dans les paramĂštres de votre thĂšme.

Utiliser un thĂšme clair : Certains thĂšmes Shopify sont optimisĂ©s pour les performances plus que d'autres. Un thĂšme lĂ©ger et bien codĂ© aura une taille DOM plus petite. Vous pouvez trouver le guide d'optimisation dĂ©taillĂ© de Shopify ici.

Angulaire

Angular est une plate-forme pour crĂ©er des applications Web et utilise un vĂ©ritable DOM. Voici quelques conseils pour Ă©viter une taille DOM excessive dans Angular :

Utilisez le chargement diffĂ©rĂ© : Lazy Loading est un modĂšle de conception qui retarde le chargement des objets jusqu'Ă  ce qu'ils soient nĂ©cessaires. Cela peut rĂ©duire considĂ©rablement la taille initiale du DOM de votre application. Utiliser TrackBy avec ngFor : Lorsque vous utilisez ngFor pour parcourir un tableau dans Angular, utilisez la fonction trackBy. Cela aidera Angular Ă  garder une trace de chaque Ă©lĂ©ment et Ă  Ă©viter toute manipulation inutile du DOM. Évitez les expressions complexes dans les modĂšles : les expressions complexes dans vos modĂšles peuvent augmenter la taille du DOM et rĂ©duire les performances. Essayez de limiter la complexitĂ© de vos expressions, ou mieux encore, dĂ©placez la logique dans la classe du composant.

svelte Svelte est un framework JavaScript plus rĂ©cent qui compile votre code en un code impĂ©ratif minimal qui manipule directement le DOM. Voici quelques conseils pour Ă©viter une taille DOM excessive dans Svelte :

Utilisez la gestion d'Ă©tat intĂ©grĂ©e de Svelte : La gestion d'Ă©tat intĂ©grĂ©e de Svelte est conçue pour ĂȘtre efficace et minimiser la taille du DOM. Évitez d'utiliser des bibliothĂšques de gestion d'Ă©tat externes, sauf si nĂ©cessaire. Évitez les composants inutiles : bien que les composants soient utiles pour organiser votre code, les composants inutiles peuvent augmenter la taille de votre DOM. Gardez vos composants aussi simples que possible et Ă©vitez les imbrications inutiles.

Drupal

Drupal est un CMS puissant qui permet de nombreuses personnalisations. Voici quelques conseils pour Ă©viter une taille DOM excessive dans Drupal :

Utilisez les vues Ă  bon escient : les vues dans Drupal peuvent gĂ©nĂ©rer beaucoup de code HTML, ce qui augmente la taille de votre DOM. Limitez le nombre de champs et de rĂ©sultats dans vos vues Ă  ce qui est nĂ©cessaire. Utilisez des modĂšles personnalisĂ©s pour les champs complexes : si vous avez des champs contenant beaucoup de donnĂ©es, envisagez d'utiliser un modĂšle personnalisĂ© pour rationaliser le code HTML gĂ©nĂ©rĂ©. DĂ©sactiver les modules inutilisĂ©s : chaque module activĂ© peut augmenter la taille de votre DOM. DĂ©sactivez et dĂ©sinstallez tous les modules que vous n'utilisez pas. En savoir plus sur l'optimisation des performances Drupal ici.

Magento

Magento est une plate-forme de commerce Ă©lectronique robuste. Voici quelques conseils pour Ă©viter une taille DOM excessive dans Magento :

Limitez le nombre de produits sur une page : Semblable Ă  WordPress et Shopify, avoir trop de produits sur une seule page peut augmenter la taille de votre DOM.

Limitez le nombre de produits par page dans les paramĂštres de votre catalogue.

Utilisez le catalogue de plaques : Activez le catalogue plat pour les produits et les catĂ©gories afin de rĂ©duire la taille de votre base de donnĂ©es et d'accĂ©lĂ©rer votre site. Fusionner les fichiers JavaScript et CSS : Magento a une fonction intĂ©grĂ©e pour fusionner les fichiers JavaScript et CSS en un seul fichier. Cela rĂ©duit le nombre de requĂȘtes HTTP et peut aider Ă  rĂ©duire la taille de votre DOM.

Vue.js

Vue est un framework JavaScript populaire pour la création d'interfaces utilisateur. Voici quelques conseils pour éviter une taille DOM excessive dans Vue :

Utilisez v-if au lieu de v-show : v-if rend l'Ă©lĂ©ment dans le DOM uniquement si la condition est vraie, tandis que v-show rend tous les Ă©lĂ©ments du DOM et utilise CSS pour masquer ceux qui ne satisfont pas la condition. L'utilisation de v-if peut rĂ©duire la taille initiale du DOM.

Utilisez le chargement diffĂ©rĂ© avec Vue Router : Comme avec Angular, le chargement paresseux peut rĂ©duire considĂ©rablement la taille initiale du DOM en ne chargeant les composants que lorsqu'ils sont nĂ©cessaires. Évitez d'enregistrer les composants globalement : enregistrez les composants uniquement lĂ  oĂč ils sont nĂ©cessaires pour Ă©viter des ajouts inutiles au DOM.

Vous avez des doutes ? Vous ne savez pas par oĂč commencer ? Contactez-nous


Nous avons toutes les réponses à vos questions pour vous aider à faire le bon choix.

Discute avec nous

Discutez directement avec notre support avant-vente.

0256569681

Contactez-nous par téléphone pendant les heures de bureau 9h30 - 19h30

Contactez-nous en ligne

Ouvrez une demande directement dans l'espace contact.

INFORMATIONS

ManagedServer.it est le premier fournisseur italien de solutions d'hébergement hautes performances. Notre modÚle d'abonnement est abordable et prévisible, afin que les clients puissent accéder à nos technologies d'hébergement fiables, à nos serveurs dédiés et au cloud. ManagedServer.it offre également d'excellents services d'assistance et de conseil sur l'hébergement des principaux CMS Open Source tels que WordPress, WooCommerce, Drupal, Prestashop, Magento.

JUSTE UN MOMENT !

Souhaitez-vous voir comment votre WooCommerce fonctionne sur nos systĂšmes sans avoir Ă  migrer quoi que ce soit ? 

Entrez l'adresse de votre site WooCommerce et vous obtiendrez une démonstration navigable, sans avoir à faire absolument quoi que ce soit et entiÚrement gratuite.

Non merci, mes clients préfÚrent le site lent.
Retour en haut de page