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

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

C'est pourquoi nous allons vous 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 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.

C'est une structure hiérarchique dans laquelle se trouvent 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 éléments secondaires. Le DOM représente la structure HTML de la page sous la forme d'un arbre , composé d'une série de balises.

En d'autres termes, lorsque le navigateur prépare une page à nous montrer, il construit une arborescence d'objets composée 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 Web ?

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

• Efficacité du réseau et performances de charge. Si le DOM est trop volumineux, il comprend souvent des éléments HTML qui ne sont pas visibles la première fois que l'utilisateur charge la page, augmentant inutilement la consommation de données et ralentissant 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.
• Performances de la mémoire . Si l'arborescence DOM est trop grande, le navigateur peut avoir besoin de plus de mémoire pour la traiter.

Comment réduire techniquement la taille du DOM ?

Pour réduire la taille du DOM afin qu'elle n'affecte pas négativement les performances 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 vaudrait mieux utiliser cet autre;

 <ul id = ”navigation-main”>   etc .. </ul>

Concernant 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.

Ceci dit, le mieux c'est que la profondeur de l'arbre est formée par :

• Moins de 32 nœuds.
• Moins de 60 nœuds secondaires pour chaque 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 manières de réduire la taille du DOM dans WordPress :

Segmenter les grandes pages en plusieurs pages

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

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

Activez le plugin de chargement paresseux et divisez tous les éléments possibles en pages

Vous pouvez activer un module de chargement différé 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 primordial de limiter le nombre de posts par page de blog . Un nombre maximum raisonnable de messages serait de 10 par page. Cette pratique s'applique également au nombre de produits qui doivent apparaître sur chaque page.

Il existe une option pour modifier le nombre de publications par page. Accédez au menu Paramètres> sous-menu Lecture, modifiez la valeur maximale des pages de blog et enregistrez les modifications. .

Nous recommandons également de limiter le nombre de publications connexes à un nombre 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 qui accompagnent votre thème WordPress par défaut , comme le bouton « Ajouter au panier » sur les pages 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 pour supprimer ces éléments, et si ce n'est pas le cas, recherchez le code PHP correspondant pour les supprimer.

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

La qualité du thème WordPress influe directement 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 aussi souvent trop de balises div, il est donc important d'utiliser des solutions comme Oxygen Builders, qui n'injectent pas d'éléments indésirables et permettent un meilleur contrôle sur la structure HTML.

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

Dernières pensées

Une taille de Dom excessive nuit à vos performances Web, ralentissant le temps de chargement de la page. Gardez votre structure HTML simple sans éléments inutiles . Vérifiez votre arborescence DOM et débarrassez-vous des nœuds qui n'ajoutent pas de valeur à votre site. Vous accélérerez non seulement votre site Web, mais vous offrirez également une meilleure UX.

Google prendra sans aucun doute en compte la taille du DOM dans la mise à jour Page Experience qui sortira dans les mois à venir. Assurez-vous d'en avoir un adéquat, afin qu'il n'affecte pas vos performances Web.