Comment √©viter une taille DOM excessive - ūüŹÜ Serveur g√©r√©

BLOG

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.

Outils de gestion

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

Managed Server Srl est un acteur italien leader dans la fourniture de solutions syst√®me GNU/Linux avanc√©es orient√©es vers la haute performance. Avec un mod√®le d'abonnement peu co√Ľteux et pr√©visible, nous garantissons que nos clients ont acc√®s √† des technologies avanc√©es en mati√®re d'h√©bergement, de serveurs d√©di√©s et de services cloud. En plus de cela, nous proposons des conseils syst√®me sur les syst√®mes Linux et une maintenance sp√©cialis√©e en SGBD, s√©curit√© informatique, Cloud et bien plus encore. Nous nous distinguons par notre expertise dans l'h√©bergement de CMS Open Source de premier plan tels que WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart et Magento, soutenus par un service d'assistance et de conseil de haut niveau adapt√© aux administrations publiques, aux PME et √† toutes tailles.

Red Hat, Inc. d√©tient les droits de Red Hat¬ģ, RHEL¬ģ, RedHat Linux¬ģ et CentOS¬ģ ; AlmaLinux‚ĄĘ est une marque commerciale d'AlmaLinux OS Foundation ; Rocky Linux¬ģ est une marque d√©pos√©e de la Rocky Linux Foundation ; SUSE¬ģ est une marque d√©pos√©e de SUSE LLC ; Canonical Ltd. d√©tient les droits sur Ubuntu¬ģ ; Software in the Public Interest, Inc. d√©tient les droits sur Debian¬ģ ; Linus Torvalds d√©tient les droits sur Linux¬ģ ; FreeBSD¬ģ est une marque d√©pos√©e de la FreeBSD Foundation ; NetBSD¬ģ est une marque d√©pos√©e de la Fondation NetBSD ; OpenBSD¬ģ est une marque d√©pos√©e de Theo de Raadt. Oracle Corporation d√©tient les droits sur Oracle¬ģ, MySQL¬ģ et MyRocks¬ģ ; Percona¬ģ est une marque d√©pos√©e de Percona LLC ; MariaDB¬ģ est une marque d√©pos√©e de MariaDB Corporation Ab ; REDIS¬ģ est une marque d√©pos√©e de Redis Labs Ltd. F5 Networks, Inc. d√©tient les droits sur NGINX¬ģ et NGINX Plus¬ģ ; Varnish¬ģ est une marque d√©pos√©e de Varnish Software AB. Adobe Inc. d√©tient les droits sur Magento¬ģ ; PrestaShop¬ģ est une marque d√©pos√©e de PrestaShop SA ; OpenCart¬ģ est une marque d√©pos√©e d'OpenCart Limited. Automattic Inc. d√©tient les droits sur WordPress¬ģ, WooCommerce¬ģ et JetPack¬ģ ; Open Source Matters, Inc. d√©tient les droits sur Joomla¬ģ ; Dries Buytaert d√©tient les droits sur Drupal¬ģ. Amazon Web Services, Inc. d√©tient les droits sur AWS¬ģ ; Google LLC d√©tient les droits sur Google Cloud‚ĄĘ et Chrome‚ĄĘ ; Facebook, Inc. d√©tient les droits sur Facebook¬ģ ; Microsoft Corporation d√©tient les droits sur Microsoft¬ģ, Azure¬ģ et Internet Explorer¬ģ ; La Fondation Mozilla d√©tient les droits sur Firefox¬ģ. Apache¬ģ est une marque d√©pos√©e de The Apache Software Foundation ; PHP¬ģ est une marque d√©pos√©e du groupe PHP. CloudFlare¬ģ est une marque d√©pos√©e de Cloudflare, Inc. ; NETSCOUT¬ģ est une marque d√©pos√©e de NETSCOUT Systems Inc. ; ElasticSearch¬ģ, LogStash¬ģ et Kibana¬ģ sont des marques d√©pos√©es d'Elastic NV. Ce site n'est affili√©, sponsoris√© ou autrement associ√© √† aucune des entit√©s mentionn√©es ci-dessus et ne repr√©sente aucune de ces entit√©s de quelque mani√®re que ce soit. Tous les droits sur les marques et noms de produits mentionn√©s sont la propri√©t√© de leurs titulaires respectifs des droits d'auteur. Toutes les autres marques mentionn√©es appartiennent √† leurs titulaires. MANAGED SERVER¬ģ est une marque d√©pos√©e au niveau europ√©en par MANAGED SERVER SRL Via Enzo Ferrari, 9 62012 Civitanova Marche (MC) Italie.

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