Comment corriger l'avertissement « Éviter une taille excessive du DOM » dans WordPress

Avez-vous déjà travaillé sur votre site WordPress et tout à coup, vous recevez un avertissement « Éviter une taille excessive du DOM » ? Ouais, c'est un peu un casse-tête. Cet avertissement apparaît lorsque la taille du modèle d'objet de document (DOM) de votre page Web dépasse celle recommandée.

Mais ne vous inquiétez pas, vous pouvez résoudre ce problème en optimisant votre site WordPress. Cela implique de réduire les éléments de votre page et de structurer efficacement votre HTML. Soyez également prudent lorsque vous choisissez des plugins et des thèmes, car ils peuvent augmenter la taille de votre DOM.

Cet article de blog est là pour vous aider. Il fournit des étapes pratiques pour corriger l’avertissement « Éviter une taille excessive du DOM ». À la fin, vous serez prêt à optimiser votre site WordPress, à l'accélérer et à améliorer l'expérience de vos utilisateurs. Commençons!

Qu'est-ce que l'avertissement « Éviter une taille excessive du DOM » ?

L'avertissement « Éviter une taille excessive du DOM » est un indicateur de performances provenant d'outils d'audit de sites Web tels que Lighthouse de Google. Cela indique que le modèle d'objet de document (DOM) d'une page Web comporte trop de nœuds. Cela peut avoir un impact négatif sur les performances du site.

Un DOM est une représentation d'une page Web que les navigateurs utilisent pour afficher le site. Il comprend des nœuds, qui sont des éléments HTML tels que des balises et du texte. Lorsqu'un DOM a trop de nœuds, on parle de « taille excessive du DOM ».

Pour maintenir des performances optimales, il est généralement recommandé d'avoir moins de 1 500 nœuds DOM
sur une page. La profondeur du DOM doit être réduite à moins de 32 niveaux imbriqués . Cela réduit la complexité du DOM.

Il est également conseillé d'éviter d'avoir des nœuds parents avec plus de 60 nœuds enfants . Cela évite qu’un seul nœud devienne trop complexe. Ces pratiques peuvent aider à éviter l’avertissement « Taille excessive du DOM ».

– Google Lighthouse affichant des recommandations

Quel est l'impact d'un grand DOM sur la vitesse et l'UX du site ?

Les performances du site Web sont cruciales car elles ont un impact direct sur l’expérience utilisateur.

Un site Web performant se charge rapidement, répond rapidement aux interactions des utilisateurs et offre une expérience de navigation fluide. Ceci est particulièrement important à une époque où les utilisateurs ont des attentes élevées en matière d’expériences numériques.

D’un autre côté, de mauvaises performances d’un site Web peuvent entraîner des temps de chargement plus longs et des interfaces qui ne répondent pas. Ces problèmes peuvent entraîner des expériences utilisateur frustrantes, entraînant des taux de rebond plus élevés et une diminution de l'engagement des utilisateurs.

En fin de compte, de mauvaises performances peuvent entraîner une perte de conversions ou de ventes. Par conséquent, le maintien des performances optimales du site Web, y compris la gestion de la taille du DOM, est essentiel au succès de tout site Web.

Quelles sont les raisons d’une taille excessive du DOM ?

Les pages Web peuvent devenir lentes et fonctionner mal en raison d'une grande taille de DOM. Il s’agit d’un problème courant qui mérite d’être examiné lors de l’optimisation des performances Web. Examinons les principales raisons contribuant à ce problème :

1. Trop d'éléments sur une page

Des conceptions complexes ou un code redondant peuvent conduire à un trop grand nombre d'éléments sur une page. Si la conception n’est pas optimisée pour les performances, vous obtenez une arborescence DOM encombrée. Cela peut ralentir la page et affecter l'expérience utilisateur.

2. Structures profondément imbriquées

L'imbrication profonde dans HTML peut entraîner des problèmes de performances. Lorsqu'il y a beaucoup d'intégration, l'arborescence DOM devient complexe. Cette complexité peut rendre plus difficile pour les navigateurs d'afficher efficacement la page, ralentissant le traitement CSS et JavaScript.

3. Thèmes et plugins non optimisés

Les thèmes et plugins peuvent ajouter des éléments inutiles, du JavaScript ou du CSS. Les thèmes ont souvent des fonctionnalités par défaut qui gonflent le DOM, tandis que les plugins peuvent ajouter des scripts et des styles qui augmentent les temps de chargement, même si ces fonctionnalités ne sont pas utilisées.

Outils et techniques pour diagnostiquer la taille excessive du DOM

Examinons quelques outils et techniques efficaces pour vous aider à diagnostiquer ce problème et guider vos efforts d'optimisation.

1. Phare de Google

Google Lighthouse est un outil gratuit et open source qui peut vous aider à diagnostiquer divers problèmes de performances de sites Web, notamment la taille excessive du DOM. Pour l'utiliser:

1. Ouvrez le navigateur Chrome et accédez à la page Web que vous souhaitez analyser.
2. Cliquez avec le bouton droit sur la page et sélectionnez Inspecter pour ouvrir les outils de développement de Chrome.
3. Cliquez sur l'onglet Phare , puis cliquez sur Analyser le chargement de la page .

2. Outils de développement Chrome

Chrome DevTools fournit une vue détaillée du DOM de votre page Web. Vous pouvez l'utiliser pour compter les nœuds DOM et identifier les éléments contribuant à une grande taille du DOM. Voici comment:

1. Ouvrez la page Web dans Chrome.
2. Cliquez avec le bouton droit et sélectionnez Inspecter pour ouvrir DevTools.
3. Dans l'onglet Éléments , vous pouvez voir l'arborescence DOM et compter les nœuds.

3. Test de page Web

WebPageTest est un outil en ligne qui fournit une analyse détaillée des performances de votre page Web. Il comprend une répartition des éléments DOM de la page. Pour l'utiliser:

1. Accédez à WebPageTest.org .
2. Saisissez l'URL de la page Web que vous souhaitez tester.
3. Cliquez sur Démarrer le test .

Comment corriger l'avertissement « Éviter une taille excessive du DOM » ?

Pour corriger l'avertissement « Éviter une taille excessive du DOM », vous devez optimiser votre page Web pour réduire le nombre d'éléments dans le DOM. Voici comment vous pouvez aborder cela en utilisant les techniques suivantes :

1. Rationalisez la structure HTML

Pour un site WordPress, vous pouvez rationaliser la structure HTML en suivant ces techniques :

• Pour votre site WordPress, choisissez un thème simple comme Astra ou Elementor. Ceux-ci n'ajoutent pas d'éléments inutiles à vos pages.
• Parcourez vos pages et publications dans l’éditeur WordPress. Supprimez les codes courts inutilisés, les balises div supplémentaires et les éléments vides.
• Faites un clic droit sur votre site WordPress et sélectionnez Afficher la source de la page .

• Recherchez les sections de code qui se répètent, comme plusieurs balises div avec les mêmes attributs de classe ou de style.

• Accédez au tableau de bord WordPress, puis
  Apparence → Éditeur de thème . Ici, vous pouvez voir les fichiers PHP de votre thème.
• Supprimez toutes les structures imbriquées inutiles.

• Après avoir apporté des modifications, enregistrez le fichier. Testez toujours votre site pour vous assurer que tout fonctionne toujours correctement.
• Faites un clic droit sur le site Web et sélectionnez Inspecter. Accédez à l’onglet Lighthouse et cliquez sur Analyser le chargement de la page pour générer un rapport. Cela vous montrera s'il y a un avertissement « Éviter une taille excessive du DOM ».

Ici, vous ne pouvez voir aucun avertissement de ce type « Éviter une taille excessive du DOM ».

2. Pagination ou défilement infini pour les pages riches en contenu

Vous pouvez ajouter une pagination à votre thème WordPress en éditant le
fonctions.php
de votre thème et éventuellement le fichier modèle dans lequel vous souhaitez que la pagination apparaisse.

• Accédez à votre tableau de bord WordPress et accédez à
  Apparence → Éditeur de thème . Sélectionnez votre thème actif.
• Recherchez le fichier function.php et cliquez dessus pour le modifier. Ici, vous pouvez ajouter une fonction personnalisée pour créer des liens de pagination.
• Ajoutez la fonction suivante à votre fichier function.php :

 fonction ma_custom_pagination() {

    global $wp_query ;

    $gros = 999999999 ;

    echo paginate_links( tableau(

        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),

        'format' => '?paged=%#%',

        'actuel' => max( 1, get_query_var('paged') ),

        'total' => $wp_query->max_num_pages

    ) );

}

• Ouvrez le fichier modèle où vous souhaitez la pagination (par exemple, index.php ). Ajoutez le code suivant à l'endroit où vous souhaitez les liens de pagination :

 <?php ma_custom_pagination(); ?>

• Si vous créez une nouvelle boucle avec WP_Query , assurez-vous qu'elle gère la pagination. Vous pouvez le faire en ajoutant le code suivant :

 $args = tableau(

    'posts_per_page' => 10,

    'paginé' => get_query_var('paginé') ? get_query_var('paginé') : 1

);

$my_query = new WP_Query( $args );

• Après avoir ajouté le code, enregistrez vos modifications dans le fichier function.php et le fichier modèle dans lequel vous avez ajouté l'appel de pagination.

3. Optimiser ou supprimer les scripts et plugins inutiles

En gérant les scripts et les plugins, vous pouvez également résoudre le problème d'avertissement de taille excessive du DOM.

Pour faire ça:

1. Passez en revue les plugins que vous avez installés et désactivez ou désinstallez ceux qui ne sont pas utilisés ou qui ajoutent une surcharge inutile à vos pages.
2. Utilisez des plugins comme WP Rocket ou Autoptimize pour réduire et combiner des scripts, réduisant ainsi les requêtes et les éléments DOM.

4. Tirez parti du rendu côté serveur et de la charge différée

Pour corriger l'avertissement de taille DOM, vous pouvez activer le rendu côté serveur et le chargement paresseux sur votre site Web WordPress.

1. Rendu côté serveur (SSR)

SSR implique le traitement et le rendu du HTML initial de vos pages Web sur votre serveur plutôt que de s'appuyer sur JavaScript côté client.

Cela peut améliorer considérablement le temps de chargement et les performances globales de votre site Web. Pour connaître les étapes détaillées sur l’activation de SSR sur votre site WordPress, suivez ce guide détaillé.

2. Chargement paresseux

C'est une autre technique efficace pour optimiser les temps de chargement et résoudre le problème de la taille du DOM. Il fonctionne en chargeant uniquement le contenu nécessaire lorsque cela est nécessaire, comme les images entrant dans la fenêtre. Cela réduit le temps de chargement initial de la page.

Pour implémenter le chargement paresseux sur votre site WordPress, suivez ce guide détaillé . Pensez également à utiliser l’un des meilleurs plugins de chargement paresseux pour une implémentation plus fluide.

Meilleures pratiques pour éviter une taille excessive du DOM

Voici quelques mesures préventives pour éviter l’avertissement « Taille excessive du DOM » dans WordPress :

1. Choisissez un thème simple :
   Optez pour un thème simple qui n'ajoute pas d'éléments inutiles à vos pages. Des thèmes comme Astra ou Elementor sont de bons choix.
2. Limiter l'utilisation des plugins :
   Chaque plugin peut ajouter des éléments supplémentaires à votre DOM. Utilisez uniquement les plugins nécessaires et examinez et supprimez régulièrement ceux qui ne sont pas utilisés.
3. Nettoyez vos pages :
   Examinez régulièrement vos pages et publications dans l’éditeur WordPress. Supprimez les codes courts inutilisés, les balises div supplémentaires et les éléments vides.
4. Optimisez vos images :
   De grandes images peuvent être ajoutées à la taille de votre DOM. Utilisez des plugins d'optimisation d'image pour réduire leur taille sans perte de qualité.
5. Implémentez le chargement paresseux :
   Le chargement paresseux peut réduire la taille initiale de votre DOM en chargeant uniquement les éléments lorsqu'ils sont nécessaires.
6. Utiliser la pagination :
   Pour les pages riches en contenu, pensez à utiliser la pagination ou le défilement infini pour limiter le nombre d'éléments chargés simultanément.
7. Réduisez votre code :
   Utilisez des outils pour réduire votre HTML, CSS et JavaScript. Cela peut aider à réduire la taille globale de votre DOM.
8. Surveillez régulièrement votre site :
   Utilisez des outils tels que Google Lighthouse pour surveiller les performances de votre site et détecter rapidement tout problème de taille du DOM.

Résumé

Alors voilà ! Vous venez de parcourir les tenants et les aboutissants de la correction de l'avertissement « Éviter la taille excessive du DOM » dans WordPress. De la compréhension du problème à la mise en œuvre des solutions, vous avez franchi une étape importante vers l'optimisation de votre site Web et de votre UX.

N'oubliez pas que chaque étape que vous franchissez vers l'optimisation contribue à un site Web plus rapide, plus fluide et plus convivial. Alors, gardez ces conseils à portée de main et continuez votre parcours dans le développement Web. Si vous avez des questions, veuillez les écrire dans les commentaires.