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 la réalisation d'un bon positionnement SEO sur une page web est sa performance de chargement. Et c'est un sujet dans lequel la taille des 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.

Commençons !

 

Qu'est-ce que le DOM ?

En termes simples, lorsque nous parlons des 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 y a 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 d'autres objets secondaires. Le DOM représente l'objet la structure HTML de la page sous forme d'arbrequi se compose 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.

Ehaque 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 la performance d'une page. Un DOM trop grand peut ralentir la vitesse du sitecar elle a les effets suivants :

  • Efficacité du réseau et performance de la charge. Si le DOM est excessivement grand, il comprend 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 d'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.
  • Performance 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 ?

Réduire la taille des DOM afin qu'elle n'affecte pas négativement les performances du webvous 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, plusieurs raisons expliquent pourquoi 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 sous le nom de "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, lors du développement de sites web, que les pages contiennent moins de 1 500 nœuds DOMce qui signifie que les dessins et modèles 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 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 des vidéos de YouTube, en utilisant Youtube Lite ou Lazy Load de WordPress WP-Rocket.

Il est également essentiel de limiter le nombre de messages par page de blog. Un nombre maximum raisonnable de postes serait de 10 par page. Cette pratique s'applique également au nombre de produits qui devraient figurer 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 pour supprimer certains éléments qui sont fournis par défaut avec votre thème WordPresscomme le bouton "Ajouter au panier" sur les pages des 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

Le la qualité du thème WordPress affecte directement la taille du DOM. Il est donc conseillé d'utiliser des thèmes bien codés, tels que 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

Une taille de dom trop importante nuit à la performance de votre site web, ralentissant le temps de chargement des pages. Gardez votre Structure HTML simple sans éléments inutiles. Vérifiez votre arbre DOM et éliminez les nœuds qui n'apportent pas de valeur ajoutée à votre site. Non seulement vous accélérerez votre site, mais vous offrirez aussi un meilleur UX.

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

surveiller le référencement

Pourquoi est-il si important de surveiller votre référencement ?

En bref, dans le domaine de l'optimisation des moteurs de recherche, le suivi, la mesure et la surveillance sont cruciaux car une entreprise peut alors détecter et...

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