Changement de mise en page cumulatif : améliorez le score Google CLS
Publié: 2022-05-09Avez-vous déjà été dans une situation où le bouton de paiement disparaît lorsque vous essayez de passer une commande ?
Oui! C'est frustrant.
La vérité est que cela arrive trop souvent et avec trop d'entre nous.
Heureusement, comme toujours, Google donne la priorité à l'expérience utilisateur avant tout.
C'est pourquoi il lancera trois nouvelles mesures de performance dans le cadre de ses principaux éléments vitaux Web, à partir de 2021.
Le Core Web Vitals est conçu pour mesurer la vitesse de chargement, l'interactivité et la stabilité visuelle d'une page.
Trois métriques les représentent :
1. La plus grande peinture de contenu (LCP)
2. Premier délai d'entrée (FIP)
3. Décalage de mise en page cumulé (CLS)
Comprenons CLS du point de vue des utilisateurs et des webmasters (SEO).
Qu'est-ce que le changement de mise en page cumulé ?
Le Cumulative Layout Shift (CLS) représente la stabilité visuelle d'un site Web.
Il mesure la quantité de changements de mise en page insignifiants sur une page.
Les changements de mise en page inattendus sont le résultat d'une page Web se déplaçant sur elle-même sans intervention de l'utilisateur.
Google CLS est une sorte d'indicateur (Signal) vous permettant de résoudre le problème en mesurant la fréquence à laquelle un mouvement inattendu d'éléments de page affecte l'expérience utilisateur.
Un décalage dans une mise en page peut se produire à tout moment lorsqu'un élément visible change de position d'une image rendue à la suivante.
Essayons de comprendre le sens commun et de définir en termes simples "Cumulative Layout Shift":
Cumulatif est une augmentation de la quantité.
La mise en page est le cadre
Un changement est un changement de position
En termes simples, le changement de mise en page cumulé est la somme totale de tous les changements de cadre individuels dans les positions de conception du site Web.
Image provenant de web.dev
Le score CLS standard doit être inférieur à 0,1.
Un bon seuil pour mesurer la même chose est le 75e centile des chargements de page sur les appareils mobiles et de bureau.
Dans l'image ci-dessus, il est clair que selon Google :
1. Si le score CLS est inférieur à 0,1, c'est un bon signal. Cela signifie que votre site n'a aucun problème avec un changement de mise en page.
2. Si le score CLS est compris entre 0,1 et 0,25, cela signifie que votre site a besoin d'une certaine amélioration dans les mises en page visuelles.
3. Si le score CLS est supérieur à 0,25, il s'agit d'un signal faible, ce qui signifie également que le mouvement de l'élément visuel se produit très fréquemment.
Comment le décalage de mise en page cumulé est-il calculé ?
Google calcule le CLS d'une page en calculant la fraction d'impact et la fraction de distance pour chaque changement de mise en page inattendu.
Fraction d'impact de CLS
Il mesure la quantité d'espace qu'un élément instable occupe dans une zone de fenêtre entre deux cadres.
Formule pour calculer la fraction d'impact pour CLS
Pour calculer le score de changement de disposition, nous avons besoin de la fraction d'impact.
Comment calculer la fraction d'impact pour CLS ?
La représentation graphique vous aidera à mieux comprendre les fractions d'impact.
Fraction d'impact = [Zone de la région d'impact] / [Zone de la fenêtre] Fraction d'impact = [330 x 490] / [375 x 667] Fraction d'impact = [161700] / [250125] Fraction d'impact = 0,645Fraction de distance de CLS
C'est la mesure de la quantité d'espace que l'élément de page a déplacé de la position d'origine à la position finale qui change essentiellement de mise en page.
Pour éviter les cas trop pénalisants, décaler les grands éléments d'une petite quantité prise en compte en introduisant Distance Fraction.
Formule pour calculer la fraction de distance pour CLS
Comment calculer la fraction de distance pour CLS ?
La représentation graphique vous aidera à mieux comprendre la fraction de distance.
Fraction de distance = [Max. Distance de déplacement] / [Hauteur du ViewPort] Fraction de distance = [120] / [667] Fraction de distance = 0,179
Formule pour calculer le score Google CLS
Le score de mise en page cumulé est calculé en multipliant la fraction d'impact par la fraction de distance :
Décalage de disposition cumulé (CLS) = Fraction d'impact x Fraction de distance CLS = 0,645 x 0,179 CLS = 0,1154 .
Le score CLS continue d'augmenter à mesure que l'impact et la fraction de distance augmentent.
Changement de mise en page cumulatif avec un exemple simple.
Vous avez visité un site et vu quelque chose d'intéressant à lire.
Vous continuez à cliquer sur le lien.
Mais juste au moment où vous étiez sur le point de cliquer sur le lien, il se déplace d'un demi-pouce vers le bas dans la page Web et vous finissez par cliquer sur une annonce qui a été placée juste au-dessus.
Source:nitropack.io
Cela semble injuste, non ?
C'est un changement de mise en page inattendu.
Cela signifie seulement que vous serez redirigé vers une page de destination indésirable à partir de laquelle vous devrez revenir à la page Web d'origine.
Nous avons également quelque chose connu sous le nom de changement de mise en page attendu.
Cela se produit lorsque vous cliquez sur quelque chose sur une page Web et cela modifie la disposition actuelle de la page.
Par exemple, vous allez sur un blog à la recherche d'une information particulière.
Dès que vous entrez le nom du sujet dans la barre de recherche, il récupère un article de blog particulier où vous trouverez les informations requises ou propose quelques articles de blog liés au sujet.
Source : nitropack.io
Il s'agit d'un résultat attendu de la page Web et peut être considéré comme un changement de mise en page attendu.
Qu'est-ce qui cause les problèmes de CLS ?
Selon Google, le géant des moteurs de recherche, il y a 5 raisons possibles pour Cumulative Layout Shift :
Images et vidéos sans dimensions
Il est conseillé de toujours spécifier la largeur et la hauteur de vos images et vidéos.
Vous pouvez également utiliser des boîtes de rapport d'aspect CSS pour permettre au navigateur d'allouer la bonne quantité d'espace sur la page Web pendant le chargement de l'image.
Annonces, intégrations et iframes sans dimensions
Les tailles d'annonces peuvent augmenter les revenus grâce à un CTR élevé.
Cependant, cela peut compromettre la qualité de l'expérience utilisateur en poussant le contenu vers le bas de la page.
Ce changement de disposition peut être atténué en réservant de l'espace pour les espaces publicitaires, en éliminant les changements en réservant la plus grande taille possible pour l'espace publicitaire ou en choisissant la meilleure taille possible de l'espace publicitaire en fonction des données historiques.
Contenu injecté dynamiquement
Évitez d'insérer un nouveau contenu au-dessus du contenu existant, sauf s'il s'agit d'une réponse à l'interaction de l'utilisateur.
Cela garantira que tous les changements de mise en page qui se produisent sont toujours attendus plutôt que de déclencher un déplacement inattendu de l'image ou du texte.
Polices Web causant FOIT/FOUT
Essayez d'utiliser font: display values avec vos polices personnalisées telles que auto, swap, block, fallback et facultative, pour éviter les changements de mise en page inutiles.
Pour être certain qu'il n'y a pas de changement de mise en page, utilisez font:display avec le lien rel=preload.
Tout élément qui utilise cette police sera masqué jusqu'à ce que l'actif de la police ait été entièrement téléchargé, est connu sous le nom de FOIT (Flash of invisible text).
Une source d'animation : malthemilthers.com
L'affichage d'une police de secours dans la pile de polices jusqu'au chargement de la police personnalisée est appelé FOUT (Flash de texte sans style).
Actions en attente d'une réponse réseau avant de mettre à jour DOM
Optez toujours pour des animations « transformées » pour les animations de propriétés qui déclenchent des changements de mise en page.
Comment le score Google CLS est-il influencé par les annonces ?
Pour gérer les publicités qui causent le CLS, vous devez styliser l'élément où la publicité va s'afficher.
Par conséquent, si vous stylisez div, la division image ou vidéo dans un WordPress ou tout élément de site Web avec une mesure de hauteur et de largeur spécifique, votre annonce sera limitée uniquement aux dimensions mentionnées.
Si un élément contenant une annonce n'affiche pas l'annonce, vous pouvez la configurer de manière à ce qu'une autre bannière publicitaire ou une image d'espace réservé puisse remplir l'espace vacant.
Alternativement, une annonce peut remplir toute la ligne en haut d'une colonne dans la gouttière droite ou gauche de la page pour certaines mises en page.
Si la page ne s'affiche pas, il n'y aura pas de décalage et cela ne fera aucune différence sur mobile ou sur ordinateur.
Cependant, vous devez noter que cela dépend de la disposition du thème et que vous devrez le tester en cas de problème avec l'inventaire publicitaire.
Comment CLS peut-il glisser pendant le développement Web ?
Google CLS peut passer à travers la phase de développement.
Voici ce qui peut arriver.
De nombreux éléments nécessaires au rendu d'une page Web sont chargés dans le cache d'un navigateur.
La prochaine fois qu'un développeur visitera la page en cours de développement, il ne remarquera pas de changement de mise en page puisque les éléments de la page sont déjà téléchargés.
Il est donc recommandé d'avoir une mesure sur le terrain ou en laboratoire.
Test de décalage de mise en page cumulatif
Les métriques cumulées des performances de mise en page du site Web peuvent être mesurées de l'une des manières suivantes :
Outils de terrain
Sur le terrain : sur de vrais utilisateurs qui interagissent réellement avec la page. Il peut être mesuré à l'aide des outils de terrain suivants :
Rapport sur l'expérience utilisateur Chrome
Il fournit des métriques d'expérience utilisateur sur la façon dont les utilisateurs réels de Chrome découvrent les destinations populaires sur le Web.
Informations sur la vitesse de la page
Cet outil analyse le contenu d'une page Web et génère des suggestions pour rendre cette page plus rapide qu'auparavant.
Console de recherche (rapport Core Web Vitals)
La Search Console montre les performances de vos pages en fonction de données d'utilisation réelles (parfois appelées données de champ).
Outils de laboratoire
En laboratoire : l'utilisation d'outils pour simuler le chargement d'une page dans un environnement contrôlé peut être mesurée à l'aide des outils de laboratoire suivants :
Outils de développement Chrome
Chrome DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui vous permet finalement de créer de meilleurs sites Web plus rapidement.
Phare
LightHouse est un outil open source et automatisé pour améliorer la qualité des pages Web.
Vous pouvez l'exécuter sur n'importe quelle page Web, publique ou nécessitant une authentification.
Il a des audits pour les performances, l'accessibilité, les applications Web progressives, le référencement, etc.
WebPageTest
Exécutez un test de vitesse de site Web gratuit dans le monde entier à l'aide de navigateurs réels à des vitesses de connexion grand public avec des recommandations d'optimisation détaillées.
Selon le web.dev ; Attention : Les outils de laboratoire chargent généralement les pages dans un environnement synthétique et ne mesurent les changements de mise en page que pendant le chargement de la page.
Par conséquent, les valeurs CLS rapportées par les outils de laboratoire pour une page donnée peuvent être inférieures à ce que les utilisateurs réels constatent sur le terrain.
Outils rapides pour vérifier le décalage de mise en page cumulé
1. CLS au format GIF de Defaced Tool de Chris Johnson pour identifier le LS problématique.
2. Calculateur de décalage de mise en page cumulé
Défaut dans les calculs CLS
Google a reçu des commentaires sur le fait que la métrique CLS était inadéquate pour mesurer les pages Web ouvertes pendant une longue période, les pénalisant avec des scores inférieurs.
Google a examiné trois solutions pour mettre à jour son score CLS, il n'y a donc pas lieu de s'inquiéter de l'aggravation des scores CLS en raison de ce changement.
Fenêtres de session pour mesurer le CLS
Google a opté pour une approche de fenêtre de session pour mesurer le CLS.
La mesure des éléments de la page est mesurée dans les fenêtres de session, ce qui correspond aux différentes parties d'une page Web auxquelles un utilisateur accède lorsqu'il fait défiler la page Web.
Les scores totaux pour chaque fenêtre de session sont le décalage de mise en page cumulé, le décalage total de la page entière.
De nombreux scores CLS vont changer
Selon Google, environ 55% des pages Web ne verront pas de changement dans leurs scores cumulés de changement de mise en page. Seuls environ 42 % des sites verront une légère amélioration des scores.
3 % des pages Web avec défilement infini ou dont les gestionnaires d'interface utilisateur sont lents à réagir à l'interaction de l'utilisateur verront leurs scores atteindre une bonne note.
La mise à jour rend les scores CLS plus précis
C'est un avantage pour les éditeurs avec le nouveau système de notation qui devient plus équitable, en particulier pour les pages Web qui sont ouvertes pendant une longue période ou qui utilisent un défilement infini et qui ont été injustement notées à cause de cela.
Avec les métriques Core Web Vitals sur le point de devenir un facteur de classement en mai 2021, c'est un changement important à faire à la dernière minute.
Conclusion
Comprendre le Cumulative Layout Shift (CLS) vous aidera à offrir une meilleure expérience utilisateur dans les jours à venir.
Étant donné que la métrique fait partie de Core Web Vitals pour améliorer l'expérience utilisateur et devrait devenir un signal de classement en 2021, il est important de comprendre son importance et son impact sur votre site.