Le décalage de mise en page cumulé (CLS) mesure la quantité de contenu de page qui change de manière inattendue pendant le chargement, ce qui peut frustrer l'utilisateur et provoquer des clics accidentels. Cette règle de dashboard vous aide à identifier et à résoudre les problèmes de stabilité visuelle qui ont un impact négatif sur l'expérience utilisateur et l'achèvement des tâches.
À propos de cette règle de dashboard
Cette règle de décalage de mise en page cumulative fait partie du niveau 2 (proactif) du modèle de maturité de l'expérience numérique. Il évalue si vos pages maintiennent une stabilité visuelle pendant le chargement, empêchant le contenu de sauter et de perturber l'interaction de l'utilisateur.
Pourquoi cela est important : les changements de mise en page amènent l'utilisateur à cliquer accidentellement sur des éléments incorrects, à perdre sa place pendant la lecture ou à abandonner des tâches par frustration. De bons scores CLS indiquent des pages qui se chargent de manière prévisible, permettant à l'utilisateur d'interagir en toute confiance sans mouvement de contenu inattendu.
Comment fonctionne cette règle
Cette règle évalue si le 75e percentile du score Cumulative Layout Shift (CLS) de votre page dépasse 0,1, qui est le seuil de Google pour une « bonne » stabilité visuelle. CLS mesure la somme de tous les scores de décalage de mise en page inattendus pendant tout le cycle de vie d'une page.
Remarque importante : le CLS est mesuré comme un score sans unité, et non en secondes. Le score représente l’impact et la distance des changements de disposition combinés.
Comprendre votre score
- Réussite (Vert) : le score CLS du 75e percentile est de 0,1 ou moins (Bon)
- Échec (rouge) : le score CLS du 75e percentile dépasse 0,1 (nécessite une amélioration ou est médiocre)
- Cible : Atteindre des scores CLS inférieurs à 0,1 pour une expérience utilisateur optimale
Seuil CLS de Google :
- Bon : 0,1 ou moins
- Besoin d'amélioration : 0,1 à 0,25
- Faible : supérieur à 0,25
Signification des changements de disposition : Un changement de disposition se produit lorsqu'un élément visible change de position d'une image rendue à la suivante. CLS mesure la plus grande explosion de scores de changement de mise en page pendant tout le cycle de vie d'une page, affectant la stabilité visuelle et l'expérience utilisateur.
Comment améliorer les scores CLS
Si votre partition présente une faible stabilité visuelle, suivez ces étapes pour réduire les décalages de mise en page :
1. Identifier les pages et les éléments problématiques
- Examiner les données CLS dans New Relic Browser: identifier les pages ayant les scores CLS les plus élevés
- Évaluer l'impact des utilisateurs : Déterminer combien d'utilisateurs rencontrent des problèmes de changement de disposition
- Analyser les modèles de décalage : comprendre à quel moment, lors du chargement de la page, les décalages se produisent le plus fréquemment
- Prioriser en fonction de l'impact commercial : se concentrer sur les pages essentielles aux conversions et aux tâches des utilisateurs
2. Corriger les causes courantes des décalages de mise en page
Réservez de l'espace pour les images :
- Spécifiez toujours les attributs de largeur et de hauteur pour les images
- Utiliser la propriété CSS aspect-ratio pour les images réactives
- Mettre en œuvre des stratégies de chargement d'images appropriées
Gérez correctement le contenu dynamique :
- Réservez un espace minimum pour les publicités, les widgets et le contenu dynamique
- Évitez d'insérer du contenu au-dessus du contenu existant
- Utiliser l'espace réservé pendant le chargement du contenu
Optimiser le chargement des polices :
- Préchargez les polices critiques pour réduire les décalages de mise en page du texte
- Utilisez font-display: swap pour de meilleures performances de chargement
- Choisissez des polices de secours Web sécurisées similaires aux polices personnalisées
Gérer le contenu tiers :
- Définir des dimensions cohérentes pour le contenu intégré
- Charger le widget des réseaux sociaux et les publicités de manière asynchrone
- Tester un script tiers pour évaluer l'impact sur la mise en page
3. Mettre en œuvre les bonnes pratiques de développement
Conception pour la stabilité :
- Utilisez CSS Grid et Flexbox pour des mises en page plus prévisibles
- Implémenter des écrans squelettes pendant le chargement du contenu
- Testez les mises en page sur différentes longueurs et types de contenu
Monitorer et valider :
- Utilisez Chrome DevTools et Lighthouse pour les tests CLS
- Implémenter monitoring des utilisateurs réels avec New Relic Browser
- Configurer des alertes lorsque les scores CLS dépassent le seuil
- Test sur différents appareils et conditions de réseau
Mesurer l'amélioration
Suivez ces métriques pour vérifier vos efforts d’optimisation CLS :
- Réduction du score CLS : diminution des valeurs CLS du 75e percentile vers 0,1 ou moins
- Expérience utilisateur métriques : taux de rebond réduits, achèvement des tâches amélioré
- Impact de conversion : taux de conversion plus élevés sur les pages avec une meilleure stabilité visuelle
- Commentaires des utilisateurs : Moins de plaintes concernant des pages instables ou instables
Scénarios et solutions courants
Pages produits e-commerce :
- Réservez un espace précis pour les images des produits et les avis des clients
- Utilisez des mises en page cohérentes pour les informations sur les produits et les prix
Sites Web de contenu :
- Réservez de l'espace pour les publicités afin d'éviter les changements de contenu
- Optimiser le chargement des polices pour réduire le reflux du texte
Pages de destination :
- Concevoir des formulaires avec un espacement fixe pour le message d'erreur
- Assurez-vous que les boutons d'appel à l'action restent dans des positions stables
Considérations importantes
- Optimisation de l'équilibre avec la fonctionnalité : certaines modifications de mise en page peuvent être nécessaires pour l'expérience utilisateur
- Testez dans des conditions réelles : assurez-vous que les optimisations fonctionnent sur différents appareils et vitesses de réseau
- Se concentrer sur l'impact utilisateur : donner la priorité à la correction des changements qui affectent les parcours et les conversions critiques des utilisateurs
- Monitorer en continu : CLS peut changer avec les mises à jour de contenu, les nouvelles fonctionnalités et les modifications de tiers
Prochaines étapes
- Action immédiate : identifier les pages avec les scores CLS les plus élevés et mettre en œuvre des correctifs rapides pour les images et le contenu dynamique
- Optimisation technique : chargement des polices d'adresse, script tiers et architecture de mise en page
- Intégration des processus : ajoutez monitoring CLS aux workflowde développement et aux budgets de performance
- Poursuivre l'optimisation : progression vers d'autres Core Web Vitals tels que LCP et INP
Pour des conseils détaillés sur l'optimisation CLS, consultez notre documentation de Core Web Vitals et nos bonnes pratiques monitoring des performances.