Taille des DOM

Clés pour réduire la taille du DOM d'un site web

Victor Perez Vas

L'un des aspects qui influencent l'obtention d'un bon positionnement SEO d'une page web est sa performance de chargement. Et c'est un sujet dans lequel la taille du DOM d'une page joue un rôle clé.

C'est pourquoi nous allons expliquer comment un DOM peut être considéré comme excessivement grand et comment le réduire. Mais d'abord, nous allons commencer par les bases, en expliquant ce qu'est le DOM et ce que signifie réduire sa taille.

Commençons !

 

Qu'est-ce que le DOM ?

En termes simples, lorsque nous parlons du DOM, nous faisons référence à la structure des objets que le navigateur génère chaque fois qu'il charge une page. Il doit son nom à l'acronyme Document Object Model.

Modèle d'objet de document
Source de l'image : Wikipedia

Il s'agit d'une structure hiérarchique dans laquelle il existe différents objets, dont certains dépendent d'autres. La structure est similaire à un arbre puisqu'il y a l'objet principal dont dépendent les autres objets secondaires. Le DOM représente la structure HTML de la page comme un arbre, composé d'une série de balises.

En d'autres termes, lorsque le navigateur prépare une page à nous montrer, il construit un arbre d'objets composé de tous les éléments d'une page en fonction de sa structure HTML.

Chaque fois que le navigateur reçoit un document HTML, il doit le convertir en cette structure arborescente, que nous appelons DOM ou arbre DOM. Le code JavaScript peut accéder à ce DOM et le modifier.

 

Comment la taille du DOM affecte-t-elle vos performances sur le web ?

Performances du web

La vérité est que la taille du DOM affecte les performances d'une page. Un DOM excessivement grand peut ralentir la vitesse du site Web, car il a les impacts suivants :

  • Efficacité du réseau et performances de chargement. Si le DOM est excessivement grand, il inclut souvent des éléments HTML qui ne sont pas visibles la première fois que l'utilisateur charge la page, ce qui augmente inutilement la consommation de données et ralentit le chargement du site.
  • Performances au moment de l'exécution. Lorsque les utilisateurs et les scripts interagissent avec une page, le navigateur doit continuellement recalculer la position et le style des balises HTML.
  • Performances de la mémoire. Si l'arbre DOM est trop grand, le navigateur peut avoir besoin de plus de mémoire pour le traiter.

 

Comment réduire techniquement la taille des DOM ?

Pour réduire la taille du DOM afin qu'il n'affecte pas négativement les performances du Web, vous devez supprimer tous les éléments HTML qui ne sont pas nécessaires. Comme nous l'avons vu, si nous ne prenons pas les mesures nécessaires, il y a plusieurs raisons pour lesquelles cela ralentirait la page.

Au lieu d'utiliser ce code ;


<div id = ”navigation-main”>

    <ul>

            etc ..

    </ul>

</div>

Il serait préférable d'utiliser cet autre ;


<ul id = ”navigation-main”>

    etc ..

</ul>

En ce qui concerne l'arborescence, nous devons connaître les termes suivants :

  • Nœuds: Tous les éléments HTML du DOM. Ils sont également connus comme les "feuilles" de l'arbre.
  • Nœuds secondaires: Les nœuds qui n'ont plus de branches.

Cela dit, la meilleure chose est que la profondeur de l'arbre est formée par:

  • Moins de 32 nœuds.
  • Moins de 60 nœuds secondaires par nœud.

Google recommande que, lors du développement de sites Web, les pages contiennent moins de 1 500 nœuds DOM, ce qui signifie que les conceptions ne doivent pas être trop complexes.

 

Comment réduire la taille du DOM dans WordPress

Il existe plusieurs façons de réduire la taille du DOM dans WordPress :

Segmenter les grandes pages en plusieurs pages

Avez-vous une seule page affichant les différents types de contenu de votre site ? Par exemple, des formulaires de contact, des articles de blog, des produits, etc.

Dans ce cas, il est préférable de classer tous ces éléments dans des pages différentes et de les relier par la barre de navigation.


Activez le plugin "lazy load" et divisez tous les éléments possibles en pages

Vous pouvez activer un module de chargement paresseux dans tous les éléments qui le permettent. Vous pouvez le faire avec les vidéos de YouTube, en utilisant Youtube Lite ou Lazy Load de WordPress WP-Rocket.

Il est également essentiel de limiter le nombre d'articles par page de blog. Un nombre maximum raisonnable d'articles serait de 10 par page. Cette pratique s'applique également au nombre de produits qui doivent apparaître sur chaque page.

Il est possible de modifier le nombre de messages par page. Allez dans le sous-menu Menu des paramètres > Lecture, modifiez la valeur maximale des pages du blog et enregistrezles modifications.

Nous recommandons également de limiter le nombre de publications connexes à un maximum de trois ou quatre.


Supprimer les éléments inutiles inclus dans le thème WP par défaut

Dans certains cas, il peut être nécessaire de supprimer certains éléments fournis par défaut avec votre thème WordPress, tels que le bouton "Ajouter au panier" sur les pages de produits, la date de publication, les informations sur l'auteur, etc.

Vérifiez la configuration du thème WordPress pour voir s'il existe une option permettant de supprimer ces éléments, et si ce n'est pas le cas, cherchez le code PHP correspondant pour les supprimer.


Utilisez des thèmes ou des créateurs de pages bien codés

La qualité du thème WordPress a une incidence directe sur la taille du DOM. Il est donc conseillé d'utiliser des thèmes bien codés, comme Astra ou GeneratePress.

Les constructeurs de pages insèrent souvent trop de balises div, il est donc important d'utiliser des solutions comme les constructeurs d'oxygène, qui n'injectent pas d'éléments indésirables et permettent un meilleur contrôle de la structure HTML.

Des outils comme HotJar vous permettent de voir ce que les utilisateurs utilisent et ce qui ne fonctionne pas pour eux. Il est fondamental d'effectuer une analyse approfondie pour obtenir la bonne taille de DOM.


Dernières réflexions

Un Dom Size excessif nuit aux performances de votre site web, en ralentissant le temps de chargement des pages. Gardez votre

Structure HTML simple sans éléments inutiles. Vérifiez votre arbre DOM et débarrassez-vous des nœuds qui n'apportent aucune valeur ajoutée à votre site. Non seulement vous accélérerez votre site Web, mais vous offrirez également une meilleure expérience utilisateur.

Google tiendra sans doute compte de la taille du DOM dans la mise à jour de la page Experience qui sortira dans les prochains mois. Assurez-vous d'en avoir une adéquate, afin qu'elle n'affecte pas vos performances web.

Répandez l'amour

Autres articles intéressants

pages orphelines

Pages orphelines. Comment les détecter et les réparer en une seconde

Qu'est-ce qu'une page orpheline ? Nous appelons pages orphelines les pages web qui n'ont pas de lien vers...

Lire l'article
Analyse des logs

Le quoi, le pourquoi et le comment de l'analyse des logs

Savez-vous comment l'analyse des logs peut améliorer votre référencement ? Découvrez les avantages de l'analyse de vos fichiers journaux et comment...

Lire l'article

Premier jour après une migration de site : Comment surveillez-vous efficacement votre nouveau site ?

Il y a de nombreuses raisons de migrer votre site, que ce soit pour en changer le design, le backend, la navigation ou la structure, ou pour le déplacer...

Lire l'article
Arrow-up

Avant de partir...

Si vous ne voulez pas manquer les conseils et les mises à jour de FandangoSEO, inscrivez-vous à notre newsletter.

+5000 SEO faites-nous confiance, rejoignez la communauté