Avez-vous déjà visité un site Web et étiez sur le point de cliquer sur un lien hypertexte, mais la mise en page a soudainement changé ? Si c'est le cas, votre expérience sur la page s'est probablement déroulée comme suit :
Même si vous aviez initialement prévu de vérifier les sources de l'article, vous êtes maintenant transporté dans un autre endroit inconnu rempli d'offres de cartes de crédit parce que vous avez cliqué sur une publicité.
À moins que vous ne vidiez votre cache de cookies, vous verrez des publicités MasterCard jusqu'à la fin des temps.
Sans ce changement de mise en page, tout ce problème aurait pu être évité, et Google est d’accord.
Pour Google, l'expérience utilisateur (UX) est l'une de ses principales priorités, c'est pourquoi Cumulative Layout Shift (CLS), ainsi que deux autres Core Web Vitals , ont été déployés en juin 2021.
Cependant, comme plusieurs autres aspects de l'expérience utilisateur, le Cumulative Layout Shift n'est pas compris par beaucoup. C'est pourquoi les sites Web sont souvent remplis de publicités et de bannières intrusives qui gâchent complètement l'expérience de la page, mais les Core Web Vitals sont là pour changer cela.
Qu'est-ce que le décalage cumulatif de disposition (CLS) ?
Le décalage cumulé de la mise en page est une mesure de la mesure dans laquelle la mise en page d'une page change pendant le chargement. Les mises en page changent parce que différents éléments d'une page peuvent se charger à des vitesses différentes, ce qui modifie la vue de la page de l'utilisateur.
Par exemple, une publicité ou une vidéo à chargement lent peut déplacer un bloc de contenu lisible déjà chargé plus bas sur la page une fois qu'il est chargé. Cela constitue un CLS volumineux.
Il est important de mesurer le CLS pour deux raisons :
- Cela a un impact sur l'expérience de l'utilisateur
- Cela affecte la manière dont les robots d’exploration Web lisent et interprètent le contenu de la page.
Depuis que Google a placé une mesure de classement sur l'expérience utilisateur, les éditeurs se demandent : « Qu'est-ce que le décalage cumulé de mise en page ? » et « Comment puis-je l'utiliser pour influencer le classement de mon site Web ? »
Le décalage de mise en page cumulé est une mesure Core Web Vital qui additionne tous les décalages de mise en page sur une page, à l'exception de ceux qui ne sont pas causés par l'interaction de l'utilisateur, avec un calcul dépendant de la vitesse.
CLS examine la proportion de la fenêtre d'affichage impactée et la distance de mouvement.
Le seuil CLS détermine également le score de décalage de mise en page et votre facteur de classement. Le décalage de mise en page cumulé est une mesure pertinente pour l'expérience utilisateur et affecte donc vos performances SEO.
Parmi les six indicateurs suivis par PageSpeed de Google, CLS représente 15 % de son score, ce qui en fait le troisième indicateur basé sur la vitesse le plus crucial.
Le CLS résume tous les changements de contenu inattendus qui se produisent sur la page. Pour réussir l'évaluation de Google, les utilisateurs doivent obtenir une note CLS élevée.
- Bon – inférieur à 0,1,
- Besoin d’amélioration – entre 0,1 et 0,25,
- Faible – supérieur à 0,25.
La valeur numérique de CLS représente la gravité de chaque mouvement. Lorsque des changements de mise en page se produisent, Google calcule la distance parcourue par le contenu de la fenêtre d'affichage pendant la durée de vie de la page.
Quel est le score seuil idéal ?
Un bon score CLS est inférieur à 0,1. Bien que Google recommande de maintenir votre score en dessous de 0,1, le score seuil idéal est de 0 pour les pages entièrement statiques. Il est plus facile d'obtenir ce score lorsque vous avez peu ou pas de contenu injecté dynamiquement sur vos pages.
Avec du code, vous pouvez ajouter plusieurs publicités, bannières et formulaires sur votre page tout en évitant les grands changements de mise en page.
Chaque fois qu'un élément visible dans la fenêtre d'affichage change sa position de départ, le décalage est enregistré comme un élément instable.
Gardez à l'esprit que les changements de mise en page ne sont enregistrés que si un facteur entraîne un changement de position des éléments visibles sur la page. Si de nouveaux éléments du modèle d'objet de document (éléments DOM) sont ajoutés ou si des éléments existants changent de taille, le score CLS n'est pas affecté.
Les scores de décalage de disposition sont déterminés par deux mesures de décalage de disposition : la fraction d'impact et la fraction de distance. Vous devez calculer la région d'impact avant la fraction d'impact.
Comment les changements de mise en page affectent-ils l’interaction de l’utilisateur ?
Les changements de disposition inattendus ne sont pas seulement frustrants, mais ils ont également un impact significatif sur l'interaction de l'utilisateur.
Lorsque des éléments commencent à se déplacer sur la page, ils déroutent les utilisateurs et rendent la navigation sur les sites Web difficile. Certains sites Web sont tellement remplis de publicités qu'ils peuvent déplacer votre curseur vers le bouton « Ajouter au panier » ou « Acheter », ce qui peut entraîner un achat accidentel.
Ces expériences sont visuellement dérangeantes et donnent une mauvaise première impression. Pour vous assurer que vos utilisateurs ne flottent pas sur tout le contenu de votre page, commencez à suivre le score CLS de votre site.
Comment le CLS est-il calculé ?
Nous savons maintenant qu'un CLS est causé par des éléments instables qui se chargent à des taux différentiels et qui déplacent le contenu dans la fenêtre d'affichage. Il s'ensuit donc que le CLS doit être directement proportionnel à deux variables : la zone de la fenêtre d'affichage occupée par l'élément instable et la distance que cet élément instable parcourt pour provoquer un décalage.
Ces deux variables sont appelées respectivement fraction d'impact et fraction de distance, explorons maintenant comment elles sont mesurées et utilisées dans le calcul du CLS.
Calcul de la fraction d'impact
Calculez la zone d'impact, ou l'espace affecté par les changements de mise en page, en obtenant une valeur numérique pour la zone d'impact. Ensuite, pour déterminer la fraction d'impact, divisez la zone d'impact par la zone de la fenêtre d'affichage. La fenêtre d'affichage est la section de la page qui reste visible sans défilement vers le bas.
Formule pour calculer la fraction d'impact
Fraction d'impact = [Surface de la région d'impact [300 x 400]] / [Surface de la fenêtre d'affichage [500 x 600]]
La fraction d'impact ne prend en compte que le mouvement lui-même et ne tient pas compte de la distraction qu'il provoque. La fraction de distance associée à la distance de déplacement résout ce problème.
Dans ce cas, notre fraction d’impact s’avère être de 0,4.
Calcul de la fraction de distance
Commencez par déterminer la distance de déplacement en définissant la distance de déplacement des éléments. Ensuite, divisez la distance de déplacement maximale par la hauteur totale de la fenêtre d'affichage pour déterminer la fraction de distance.
Formule pour calculer la fraction de distance
Fraction de distance = [Distance de déplacement max. / Hauteur de la fenêtre d'affichage]
En supposant que le numérateur dans ce cas soit 100 et le dénominateur 600, nous arrivons à une valeur de fraction de distance de 0,166.
Utilisez maintenant les solutions trouvées dans les deux formules pour terminer le calcul du décalage de disposition.
Formule pour calculer le score Google CLS
Comme expliqué, CLS est le produit de la fraction d’impact et du facteur de distance.
En utilisant les valeurs de fraction d'impact et de facteur de distance obtenues ci-dessus, nous obtenons le calcul suivant
CLS = 0,166 x 0,4
Ce qui nous donne une valeur CLS de 0,066.
Pour déterminer le score de décalage de mise en page d'une animation, multipliez la fraction d'impact par la fraction de distance. Cependant, si vous souhaitez calculer le décalage de mise en page cumulé total, prenez tous les scores de décalage de mise en page pour le nombre total d'images d'animation et additionnez-les.
Bien que l'ajout de tous ces scores de décalage de mise en page soit efficace, il ne tient pas compte des applications à page unique qui ont une longue durée de vie, ce qui rend la formule trop injuste pour certains utilisateurs.
Pour tenir compte de cela, Google a commencé à regrouper les équipes en fenêtres de session, qui sont des périodes dans le cycle de vie d'une page existante.
Les changements de disposition sont ensuite résumés dans la fenêtre de session, ce qui signifie que le score CLS n'est impacté que pendant la durée de la session.
De plus, le score CLS final représente le score maximal d'une fenêtre de session. Ainsi, si un utilisateur ferme la fenêtre pendant un changement de session, cela n'est pas pris en compte. Tout ce qui se passe dans la fenêtre d'exclusion d'entrée, y compris le temps nécessaire au chargement de la page, n'est pas non plus pris en compte.
Autres calculs : Comment mesurer le CLS
Quelques autres éléments sont pris en compte dans le CLS, notamment :
- Modifications intentionnelles de la mise en page : la fenêtre d’exclusion d’entrée ignore les décalages qui se produisent dans la demi-seconde suivant la saisie de l’utilisateur.
- Modifications de mise en page et d'animation : Google ignore les modifications de transformation CSS et les animations.
- Génération de décalages de mise en page : si des décalages de mise en page se produisent pendant le chargement de la page, cela peut affecter négativement votre score CLS s'ils se produisent en dehors de la fenêtre d'exclusion.
- Décalages de mise en page au-dessus du pli : Google ne compte que les modifications dans la fenêtre d'affichage visible.
Pour suivre avec précision les changements de disposition et les changements d'agencement, utilisez un outil de mesure CLS.
Outils de mesure du CLS
Les outils de mesure du score CLS peuvent contribuer activement à prévenir les changements de mise en page. Les outils logiciels mesurent votre contenu existant et utilisent leur onglet de performance de mesure de décalage de mise en page cumulé respectif pour offrir aux entreprises un score CLS final qu'elles peuvent améliorer.
La plupart des solutions logicielles suivantes interprètent les données de laboratoire, mais PageSpeed Insights de Google mesure également les données de terrain. Search Console propose un rapport Core Web Vitals simplifié.
Les données de laboratoire impliquent la collecte de données de performances dans un environnement contrôlé, mais comme elles sont basées sur des conditions prédéfinies, la plupart des scores de données de laboratoire ne reflètent pas à 100 % l'expérience utilisateur réelle
En revanche, les données de terrain sont basées sur des données aggravées, obtenues en combinant des données individuelles. Elles sont souvent utilisées pour fournir une analyse statistique de groupes de personnes et pour résumer des données commerciales. Bien que les données de terrain soient plus précises, elles ne sont pas toujours disponibles.
Les termes « données utilisateur réelles » et « données de terrain » sont identiques, mais l'API JavaScript est son propre système. Si vous avez une certaine expérience du codage, vous pouvez utiliser l'API JavaScript pour mesurer le CLS à la minute. Lancez l' API d'instabilité de la mise en page si vous souhaitez vérifier les décalages de mise en page inattendus.
PageSpeed Insights et Search Console peuvent vous aider à optimiser le CLS et à éviter les changements de mise en page importants. Le test de décalage de mise en page cumulé de PageSpeed pour la conception Web réactive fournit plus de détails aux développeurs Web et vous aide à injecter du contenu dynamique.
Un score PageSpeed idéal est atteint lorsque toutes les mesures de vitesse atteignent en moyenne 90 ou plus. Si vous remarquez qu'une ou plusieurs de vos mesures sont en orange, concentrez-vous sur l'amélioration de ces domaines.
- Bon : 90 ou plus (vert)
- Besoin d'améliorations : 50 à 90 (orange)
- Pauvre : moins de 50 (rouge).
Dans l'onglet Performances, les utilisateurs peuvent voir précisément comment PageSpeed Insights mesure la stabilité visuelle. PageSpeed utilise Chrome User Experience Report, son logiciel d'analyse statistique, pour collaborer sur des mesures utiles pour mesurer la stabilité visuelle car il vérifie les images réactives, le rapport hauteur/largeur de l'image, la police Web, l'affichage des polices, le chargement initial de la page et bien plus encore.
Tous les indicateurs Web placés dans l'onglet Résumé sont pondérés différemment : le FID, l'indice de vitesse et le temps d'interaction sont notés à 10 %, le CLS à 15 %, le LCP à 25 % et le temps de blocage total à 30 %. Google ne prend pas en compte les changements effectués à partir des interactions des utilisateurs.
Gardez à l'esprit que les mesures se complètent les unes les autres. Par exemple, si le LCP et le temps de blocage total sont lents, votre temps de chargement sera probablement lent.
Comment réduire le décalage cumulatif de disposition (CLS) ?
Pour améliorer les problèmes de décalage cumulatif de la disposition, il est essentiel de comprendre ce qui affecte le CLS en premier lieu. Plusieurs facteurs contribuent aux mauvais scores CLS, notamment :
- Ajout de vidéos et d'images sans dimensions
- Installation de publicités, d'iframes et d'intégrations sans dimensions
- Actions en attente d'un chargement de page ou d'une réponse réseau pour mettre à jour les éléments DOM (contenu injecté dynamiquement)
- Polices Web provoquant un flash de texte invisible (FOIT) ou un flash de texte non stylisé (FOUT), des polices système lentes, un chargement de police ou un affichage de police défaillant
Le CLS joue un rôle important sur les appareils mobiles. 77 % des Américains possèdent un smartphone et près de 40 % de tous les achats en ligne ont été effectués à l'aide d'un appareil mobile. Cependant, les tablettes et les smartphones sont les appareils les plus difficiles à optimiser.
En raison d'un processeur plus faible, d'un réseau compliqué et d'une fenêtre d'affichage plus petite, il peut être difficile pour les codeurs mobiles de déterminer la quantité d'espace dont vous avez besoin sur la page pour garder tous vos éléments visibles.
Vous devez vous assurer que les attributs de votre vidéo et de votre image rétrécissent en fonction de la taille de la fenêtre d'affichage.
1. Attributs de largeur et de hauteur de l'image
Si vous ne spécifiez pas les attributs de largeur et de hauteur pour votre site, le navigateur ne saura pas combien d'espace est nécessaire pour allouer correctement les éléments pendant le chargement de la page.
Il est fort probable que l'espace réservé ne soit pas suffisant et que l'écran se déplace pour s'adapter.
Incluez les dimensions de l’image et les éléments vidéo pour créer la quantité d’espace appropriée.
2. Police Web FOUT/FOIT
Le chargement d'un texte personnalisé peut parfois prendre plus de deux images rendues, ce qui entraîne l'apparition d'un texte invisible ou l'utilisation d'une police de secours. Si le texte personnalisé prend plus de temps à apparaître que la limite de chargement initiale de la page, cela déclenchera des décalages de mise en page et affectera votre score CLS et la police Web elle-même.
Pour résoudre ce problème, utilisez une police préchargée ou une police système intégrée directement dans votre code.
3. Dimensions non spécifiées des annonces, des iframes et des intégrations
Une autre façon d'éviter les changements de mise en page importants consiste à spécifier les dimensions des annonces, des iframes et des intégrations. Un changement de mise en page se produit lorsque le mauvais rapport hauteur/largeur de l'annonce est intégré dans le code du site Web.
Même si vous devrez peut-être tenir compte des différences subtiles dans les tailles des annonces/espaces réservés et les facteurs de forme lors de l'utilisation de requêtes multimédias, vous pouvez réserver de l'espace pour éviter ce problème.
4. Comment les animations et le contenu dynamique
Les actions qui attendent une réponse du réseau du serveur Web avant d'être renseignées provoquent également des décalages.
Si la saisie de l'utilisateur a entraîné une augmentation des zones de décalage de mise en page, elle ne sera pas comptabilisée dans le score CLS, en particulier si le décalage correspond au même rapport hauteur/largeur que celui utilisé avant le décalage de mise en page. Cependant, si les entrées de décalage de mise en page codées sont prises en compte, vous devez leur réserver de l'espace.
Pour savoir comment résoudre les problèmes de décalage de mise en page dans WordPress, passez à la section suivante.
Comment résoudre les problèmes de décalage de mise en page cumulatif dans WordPress ?
Les codeurs disposent de plusieurs méthodes pour résoudre les problèmes de décalage de mise en page cumulé dans WordPress. Si vous avez des compétences de codage compétentes et que vous souhaitez réduire un décalage de mise en page cumulé détecté sur votre site Web, ce processus en 10 étapes éliminera les problèmes CLS spécifiques à WordPress.
Étape 1 : Apprenez quels éléments changent
Des outils comme Cumulative Layout Shift Debugger et PageSpeed Insights peuvent vous montrer exactement où les décalages se produisent. Vous pouvez également utiliser Chrome Dev Tools et activer la case à cocher Régions de décalage de mise en page, où les éléments décalés sont mis en surbrillance en bleu.
Étape 2 : désactiver le CSS asynchrone ou utiliser le CSS critique
La plupart des plugins de cache disposent d'un paramètre permettant de charger le CSS de manière asynchrone, mais cela peut provoquer des erreurs d'affichage et déplacer votre police Web. Vous pouvez désactiver la diffusion CSS dans les paramètres de votre plugin.
Les développeurs peuvent également charger uniquement les CSS critiques en désactivant mod_pagespeed ou en générant des chemins CSS critiques spécifiques à la page.
Étape 3 : héberger les polices locales préchargées
Les polices préchargées ne permettent pas l'optimisation. Le plus souvent, ces polices Web prennent une éternité à charger et recourent à une police de secours avant d'être renseignées. Hébergez toujours les polices localement à partir de votre site Web en utilisant des outils comme Transfonter ou le plugin OMGF pour coller directement les URL des polices.
Étape 4 : Ajouter un affichage de polices : Passer aux polices
Certaines polices Web spécifiques peuvent encore se charger lentement en fonction de leur taille, mais l'ajout de font-display:swap au CSS de votre police garantira que votre mise en page ne se déplace pas en raison de FOIT.
Pour conserver un affichage de police actif, installez String Locator pour rechercher la police problématique, puis ajoutez &display=swap à votre code.
Étape 5 : définissez la police globale sur Mulish dans Oxygen Builder
Si vous utilisez Oxygen Build, vous pouvez résoudre vos problèmes CLS en ouvrant votre feuille de style et en ajoutant « Mulish » au milieu du corps d'un texte comme ceci : body { font-family: 'Mulish', Arial; }
Étape 6 : Spécifiez les dimensions de l'image, de la vidéo et de l'iframe
Insérez simplement width=”000” height=“000” après le signifiant de l’image dans le code ou width=”000” height=“000 > après une vidéo ou une iframe pour vous assurer que votre média dispose de suffisamment d'espace.
Étape 7 : utiliser la propriété CSS Transform pour les animations
Les animations peuvent entraîner des changements de mise en page importants, et la prise en compte des proportions peut ne pas résoudre votre problème. Ajoutez la propriété de transformation CSS transform:translate() au lieu d'utiliser width + height.
Étape 8 : Laissez de l'espace pour les publicités et diffusez-les correctement
Réservez de l'espace pour les publicités. Sinon, les publicités déplaceront d'autres contenus sur la page lors de leur chargement.
Google conseille aux créateurs de laisser de l'espace pour la publicité de plus grande taille configurée pour être diffusée comme suit :
Étape 9 : installer un plug-in RGPD léger
Les logiciels de conformité aux cookies GDPR sont pratiques pour les sites Web qui souhaitent rester conformes au CCPA, mais ils provoquent souvent des problèmes de décalage de mise en page cumulé.
Les plugins GDPR lourds peuvent empiler des éléments les uns sur les autres lors du chargement, utilisez donc un GDPR/CCPA léger pour résoudre ce problème.
Étape 10 : coder en dur les en-têtes et les menus
Vos en-têtes et menus peuvent contribuer au décalage de la mise en page de votre site Web. Le codage en dur de ces aspects dans CSS entraînera moins de problèmes pour les pages Web. La plupart des créateurs de pages entraîneront également des décalages d'en-tête et de menu, mais Elementor et Divi ajoutent des éléments codés en dur pour les utilisateurs.
Conclusion
Le Cumulative Layout Shift (CLS) est l'un des trois indicateurs Web essentiels créés par Google pour mettre l'expérience utilisateur au premier plan pour les propriétaires de sites Web. Bien que le CLS et d'autres indicateurs essentiels puissent demander un certain temps d'adaptation, le CLS peut améliorer les performances d'un site Web et le temps de chargement global.
Grâce à des logiciels tiers, comme Lighthouse et PageSpeed Insights de Google, les utilisateurs peuvent localiser les décalages de mise en page CLS. Dans le même temps, les logiciels peuvent proposer aux utilisateurs les meilleures pratiques pour améliorer leur score SEO global, ce qui les aidera à obtenir un meilleur classement.
Les utilisateurs peuvent coder en dur les corrections de décalage de mise en page ou utiliser des plugins pour améliorer leur score CLS. Lorsque votre contenu dynamique reste statique, vous réduisez la frustration des utilisateurs et augmentez les revenus globaux.
Maintenant que vos annonces sont confortablement installées à leur emplacement, contactez Publift pour découvrir comment vous pouvez augmenter davantage vos revenus publicitaires en optimisant le placement de vos annonces et vos partenaires publicitaires.
Décalage cumulatif de la disposition - FAQ
Qu’est-ce qu’un changement de mise en page attendu et inattendu ?
Lorsque la présentation d'une page change en réponse à un événement attendu, tel qu'une saisie utilisateur, on parle de changement de présentation attendu. Des changements de présentation inattendus se produisent lorsque différents éléments d'une page se chargent à des moments différents ou lorsque la page ne se comporte pas comme prévu.
Le chargement différé affecte-t-il le décalage cumulé de la mise en page ?
Oui, le chargement différé peut entraîner des décalages cumulatifs de mise en page. Le chargement différé ou chargement différé consiste à charger les éléments non essentiels d'une page à un rythme plus lent pour permettre aux éléments critiques de se charger en premier.
Bien que cela soit une bonne stratégie pour économiser la bande passante, des éléments à chargement plus lent peuvent néanmoins entraîner un décalage des éléments précédemment chargés.