Cumulative Layout Shift (CLS) est une métrique qui mesure la stabilité visuelle en quantifiant la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus lors de leur interaction avec une page web. Un score CLS élevé peut affecter l’expérience utilisateur, entraînant frustration et baisse d’engagement.
Pour les utilisateurs de WordPress, traiter le CLS est crucial pour améliorer les performances du site et la satisfaction des visiteurs. Ce guide vous accompagnera dans la compréhension, le diagnostic et la résolution des problèmes de Cumulative Layout Shift sur votre site WordPress.
Contents
Comprendre le Cumulative Layout Shift
Le Cumulative Layout Shift désigne le déplacement inattendu d’éléments sur une page pendant le chargement. Ces déplacements peuvent se produire lorsque les ressources sont chargées de manière asynchrone ou lorsque des éléments sont ajoutés dynamiquement à la page au-dessus du contenu existant.
Le score CLS fait partie des Core Web Vitals de Google, un ensemble de métriques qui contribuent à l’expérience utilisateur globale et influencent le référencement SEO.
Les raisons suivantes contribuent à un CLS élevé dans WordPress :
- Images sans dimensions : Lorsque des images se chargent sans largeur ni hauteur définies, elles peuvent provoquer des décalages.
- Publicités, intégrations et iframes sans dimensions : Le contenu dynamique comme les publicités ou les intégrations vidéo peut entraîner des décalages s’il n’est pas correctement dimensionné.
- Contenu injecté dynamiquement : Le contenu qui se charge dynamiquement peut pousser d’autres contenus vers le bas ou ailleurs sur la page.
- Polices web provoquant FOIT/FOUT : Lorsque des polices personnalisées se chargent, un Flash of Invisible Text (FOIT) ou Flash of Unstyled Text (FOUT) peut se produire, provoquant des décalages de mise en page.
Diagnostiquer les problèmes de Cumulative Layout Shift dans WordPress
Avant de résoudre les problèmes de CLS, il est essentiel de les identifier. Utilisez les outils suivants pour diagnostiquer les problèmes de CLS :
- Google Lighthouse : Faisant partie de Chrome DevTools, Lighthouse fournit des audits automatisés, notamment des vérifications de performance qui diagnostiquent les problèmes de CLS et suggèrent des correctifs.
- Chrome DevTools : Utilisez le panneau Performance ou la section Experience dans Chrome DevTools pour observer les décalages de mise en page et identifier les éléments qui les provoquent.
- Google PageSpeed Insights : Cet outil fournit un rapport détaillé sur les performances de votre page web, y compris les problèmes de CLS.
- Web Vitals Chrome Extension : Cette extension mesure les Core Web Vitals, y compris le CLS, pour vos pages en temps réel.
- GTmetrix : GTmetrix propose des rapports détaillés sur le CLS et les autres Core Web Vitals, identifie les éléments problématiques et suit les améliorations dans le temps.
5 façons de résoudre le Cumulative Layout Shift dans WordPress
- Définir les dimensions des images et des vidéos
- Héberger des polices locales préchargées
- Précharger les polices
- Éviter le contenu injecté dynamiquement
- Activer le Lazy Loading pour les images, vidéos et iframes
1. Définir les dimensions des images et des vidéos
Définir les dimensions correctes pour les images et vidéos sur votre site WordPress est essentiel pour prévenir les décalages de mise en page inattendus, appelés Cumulative Layout Shifts (CLS). Voici un guide simple pour le faire :
Connectez-vous à votre tableau de bord WordPress et naviguez jusqu’à la page ou l’article où vous souhaitez ajouter ou modifier des images ou des vidéos.
Si vous ajoutez une nouvelle image, cliquez sur le bouton + (Ajouter un bloc), recherchez le widget Image et cliquez dessus pour l’ajouter à votre page. Pour modifier une image existante, cliquez sur l’image dans votre éditeur.
Avec le bloc image sélectionné, allez dans les réglages du bloc dans la barre latérale droite. Ici, vous pouvez définir manuellement la largeur et la hauteur de l’image en pixels. Saisissez simplement les dimensions que vous préférez.
Vous pouvez également envisager d’implémenter des boîtes de rapport d’aspect en CSS pour prédéfinir l’espace dédié aux images et vidéos. Cette approche fonctionne comme la définition de dimensions fixes, minimisant efficacement les décalages de mise en page en réservant l’espace à l’avance.
2. Héberger des polices locales préchargées
Les polices préchargées peuvent ralentir votre site web. Elles se chargent souvent lentement et basculent vers des polices de secours avant de s’afficher complètement.
Il est préférable d’héberger les polices directement sur votre site web à l’aide d’outils comme Transfonter ou le plugin OMGF, qui vous permet d’intégrer facilement les URLs de polices. Voici comment procéder :
Connectez-vous à votre tableau de bord WordPress, naviguez jusqu’à la section Extensions et cliquez sur "Ajouter".
Dans la barre de recherche en haut à droite, saisissez "OMGF", localisez l’extension et cliquez sur "Installer maintenant".
Après l’installation, cliquez sur "Activer".
Naviguez jusqu’à l’onglet "Réglages" et sélectionnez l’option "Optimize Google Fonts".
Faites défiler vers le bas pour trouver l’option Font-Display, choisissez "Swap", puis cliquez sur le bouton "Save & Optimize".
En suivant ces étapes, vous pouvez héberger efficacement des polices locales préchargées à l’aide du plugin OMGF pour aider à atténuer les Cumulative Layout Shifts dans WordPress, en améliorant l’expérience utilisateur et les performances du site.
3. Précharger les polices
Charger rapidement les polices est essentiel pour éviter les décalages de mise en page sur votre site web. WP Rocket, un plugin WordPress populaire, aide à cela. Voici comment précharger les polices :
Connectez-vous à votre tableau de bord WordPress, naviguez jusqu’à la section Extensions et cliquez sur "Ajouter une extension".
Cliquez sur le bouton "Téléverser une extension", choisissez WP Rocket depuis votre ordinateur et cliquez sur le bouton "Installer maintenant".
Ensuite, cliquez sur le bouton "Activer l’extension".
Allez dans l’onglet "Réglages" et cliquez sur WP Rocket.
Cliquez sur l’onglet "Preload" pour accéder aux réglages liés au préchargement des polices.
Faites défiler vers le bas pour trouver la section "Preload Fonts". Collez les URLs des polices que vous avez identifiées plus tôt dans le champ prévu, en veillant à ce que chaque URL soit sur une nouvelle ligne. Cliquez ensuite sur le bouton "Save Changes".
Le préchargement des polices avec WP Rocket aide à garantir que votre site web se charge plus harmonieusement, en réduisant le CLS et en améliorant l’expérience utilisateur.
4. Éviter le contenu injecté dynamiquement
Minimisez l’utilisation d’éléments injectés dynamiquement pour améliorer la stabilité de votre site web et prévenir les décalages de mise en page.
Ces éléments, tels que les publicités, pop-ups ou widgets tiers, peuvent provoquer des changements de mise en page inattendus lorsqu’ils se chargent après le contenu principal. Voici quelques étapes pour les gérer :
Minimiser l’utilisation : Réduisez le nombre d’éléments injectés dynamiquement comme les publicités et pop-ups.
Réserver de l’espace : Dans votre CSS, définissez des dimensions fixes (largeur et hauteur) pour les éléments dynamiques afin de prévenir les décalages de mise en page.
Exemple de CSS pour un emplacement publicitaire :
.ad-placeholder {
width: 300px;
height: 250px;
background-color: #f0f0f0;
}Utiliser des espaces réservés : Utilisez des éléments d’espace réservé de la même taille que le contenu dynamique pour maintenir l’intégrité de la mise en page.
Chargement efficace : Priorisez le contenu essentiel et utilisez le lazy loading pour les éléments non critiques. Assurez-vous que les images et publicités disposent d’espace réservé pour garder la mise en page stable.
5. Activer le Lazy Loading pour les images, vidéos et iframes
Le Lazy Loading retarde le chargement des images, vidéos et iframes jusqu’à ce qu’ils soient visibles, réduisant le temps de chargement initial de la page et minimisant le Cumulative Layout Shift (CLS). WP Rocket facilite l’activation du lazy loading. Voici comment :
D’abord, installez et activez le plugin WP Rocket. Ensuite, naviguez jusqu’à Réglages > WP Rocket depuis votre tableau de bord WordPress.
Allez dans l’onglet Media et activez les options "Lazy Load" pour les images, iframes et vidéos.
Après cela, faites défiler vers le bas et cliquez sur le bouton "Save Changes".
L’activation du lazy loading pour les images, vidéos et iframes à l’aide de WP Rocket réduit la charge initiale des données lorsque les visiteurs accèdent à votre site. Cela accélère les temps de chargement, maintient les mises en page stables, réduit les Cumulative Layout Shifts et améliore l’expérience utilisateur.
Conclusion
Cet article a couvert des méthodes essentielles pour minimiser le Cumulative Layout Shift (CLS) dans WordPress. En définissant des dimensions fixes pour les images et vidéos, en hébergeant et préchargeant vos polices, en évitant le contenu dynamique et en utilisant le lazy loading, vous pouvez faire en sorte que votre site web se charge plus rapidement et plus harmonieusement.
Ces changements améliorent l’expérience utilisateur et stimulent les performances et le SEO de votre site. Essayez ces stratégies pour garder votre site WordPress professionnel et engageant.
Articles connexes
- Les images mises en avant ne s’affichent pas dans WordPress
- Corriger l’erreur "Are You Sure You Want to Do This?" dans WordPress
- Corriger l’extension PHP MySQL manquante dans WordPress
- Comment corriger un site WordPress qui ne fonctionne pas après une migration
- Comment corriger l’erreur WordPress "Sidebar Not Appearing"
