Core Web Vitals

Introduction

Assurer une expérience digitale positive pour vos utilisateurs devrait jouer un rôle clé dans toute entreprise en ligne, car l'expérience de la page impacte votre classement de recherche Google.

Une partie de l'algorithme de classement de Google est déjà dédiée à l'évaluation de l'expérience utilisateur (UX). En août 2021, Google a ajouté un autre signal pour évaluer la qualité de l'UX : les Core Web Vitals (un groupe de métriques de performance qui mesurent l'expérience utilisateur dans le monde réel pour la performance de chargement).

L'expérience de la page est un ensemble de signaux qui mesurent comment les utilisateurs perçoivent l'expérience d'interaction avec une page web au-delà de sa valeur d'information pure.

Améliorer vos Core Web Vitals peut conduire à une meilleure expérience utilisateur, à une augmentation du trafic naturel et finalement à plus de conversions pour votre site web.

Core Web Vitals

Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) mesure la performance de chargement et fait partie des Core Web Vitals. Google utilisera les Core Web Vitals comme signal de classement de recherche en 2021.

Comprendre le Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) mesure le temps de rendu du plus grand élément de contenu visible dans le viewport (donc avant que les utilisateurs ne fassent défiler).

Le LCP se concentre sur la vitesse de livraison du plus grand contenu (à l'exclusion des images d'arrière-plan et du contenu affiché en dehors du viewport, par ex. sous la ligne de flottaison) et d'un contenu cohérent (le contenu temporaire tel que les chargeurs ou les écrans de démarrage est ignoré).
Selon les directives de Google, vos pages web devraient avoir un LCP inférieur à 2,5 s, pour au moins 75 % de vos utilisateurs (y compris le trafic desktop et mobile). 

Les causes courantes d'un LCP lent incluent de grands éléments de design tels que des images, des vidéos et des scripts tiers.

Exemple d'optimisation

Optimisez les ressources, utilisez le chargement paresseux et réduisez le JS à l'essentiel.

Cumulative Layout Shift

Le Cumulative Layout Shift (CLS) mesure la stabilité de la page, en surveillant les mouvements significatifs des éléments sur la page qui peuvent frustrer ou induire l'utilisateur en erreur, pendant toute la durée de vie de la page.

Le CLS fait partie des Core Web Vitals. Google utilisera les Core Web Vitals comme signal de classement de recherche en 2021.

Comprendre le Cumulative Layout Shift

Le Cumulative Layout Shift mesure la somme totale de tous les décalages de mise en page individuels qui se produisent pendant toute la durée de vie de la page (y compris après que l'utilisateur a commencé à interagir avec la page), en tenant compte de la taille de la zone concernée et de la distance du décalage. 

L'algorithme CLS surveille chaque décalage de mise en page dans le contexte actuel, excluant ainsi le contenu des iframes.

Les décalages de mise en page qui se produisent 500 ms après une interaction utilisateur active (comme un clic, une frappe de touche ou le redimensionnement de la fenêtre) n'ont aucun impact sur le CLS. Survoler, faire défiler et mettre à jour ne sont pas considérés comme des interactions actives.

Chacun des autres décalages de mise en page est évalué en fonction de la zone totale affectée et de la distance parcourue par les éléments déplacés. Le Cumulative Layout Shift est la somme de tous les scores des décalages de mise en page considérés.

Selon les directives de Google, vos pages web devraient avoir un CLS inférieur à 0,1 pour au moins 75 % de vos utilisateurs (y compris le trafic desktop et mobile).

Exemple d'optimisation

Pour améliorer votre Cumulative Layout Shift, assurez-vous que le navigateur peut allouer l'espace approprié pour vos images et iframes (y compris les publicités), même avant de commencer à les charger, en définissant leur largeur et leur hauteur, ou leur ratio d'aspect.

Délai d'entrée maximal potentiel (FID)

Le Délai d'entrée (FID) mesure le temps entre la première interaction d'un utilisateur et le temps qu'il faut pour que l'interaction soit traitée (l'interaction peut consister à cliquer ou à appuyer sur un lien ou un bouton).

Le FID maximal potentiel est la pire valeur qu'un FID pourrait avoir. Le FID est le délai qu'un utilisateur éprouve lorsqu'il interagit avec la page pour la première fois (exemple : délai pour obtenir un feedback de la page en cliquant sur un élément).

Le FID dépend de l'activité de la page (tâches empêchant la réactivité) et du moment où l'utilisateur interagit.

Le FID est collecté à partir d'une interaction donnée d'un utilisateur réel, tandis que le FID maximal potentiel peut être calculé sans utilisateur, la valeur étant le délai qu'un utilisateur rencontrerait en interagissant avec la page lorsque celle-ci est le moins réactive (scénario le pire).

Selon les directives de Google, vos pages web devraient avoir un FID inférieur à 100 ms pour au moins 75 % des utilisateurs (y compris le trafic mobile et desktop).

Comment il est calculé

Le FID maximal potentiel est calculé en trouvant la tâche la plus longue après le Premier Peinture de Contenu (puisque nous pouvons supposer qu'un utilisateur n'essaierait pas d'interagir avec une page avant qu'un contenu ne soit affiché).

Le Temps de Blocage Total (TBT) mesure le temps total pendant lequel une page est bloquée de répondre à l'entrée de l'utilisateur (clics, pressions sur le clavier, etc.) après que la page a commencé à rendre du contenu.

Comment il est calculé

Le calcul du Temps de Blocage Total est basé sur les Longs Tâches. Une Longue Tâche est un traitement qui monopolise le navigateur web pendant un certain temps (>50 millisecondes) et bloque d'autres tâches critiques d'être exécutées (par ex. réagir à l'entrée de l'utilisateur).

Le Temps de Blocage Total est une somme, calculée en ajoutant la portion bloquante de toutes les Longues Tâches entre le Premier Peinture de Contenu et le Temps pour (de manière cohérente) interactif. La portion bloquante de la longue tâche est la durée excédant 50 ms.

Exemple d'une page se chargeant avec 3 longues tâches

[longtask 1: 55 ms] FCP [longtask 2: 110 ms] [longtask 3: 200 ms] TTI

• la longue tâche 1 est ignorée car elle se produit avant le FCP
• la portion bloquante de la longue tâche 2 est de 60 ms (110 - 50).
• la portion bloquante de la longue tâche 3 est de 150 ms (200 - 50).
  
  Le Temps Total de Blocage est donc de 210 ms (60 + 150).

Pourquoi le Temps Total de Blocage n'est-il parfois pas calculé ?

Comme le Temps Total de Blocage est calculé entre le Premier Peinture de Contenu (FCP) et le Temps pour (de manière cohérente) Interactif, les deux métriques doivent être définies pour que le TBT existe. Lorsqu'il y a des Longues Tâches récurrentes et répétées, il n'y a pas vraiment de moment où l'interface est de manière cohérente interactive, donc il n'y a pas de "fin" à la fourchette de temps dans laquelle le TBT devrait être calculé.

Si vous devez suivre vos Longues Tâches mais que le TBT ne peut pas être calculé, vous pouvez utiliser la métrique "Somme des Longues Tâches" à la place.

Interaction avec la Prochaine Peinture

Interaction avec la Prochaine Peinture (INP) est une métrique qui évalue la réactivité d'une page web. Elle mesure le temps écoulé entre une interaction utilisateur, comme un clic ou une pression sur une touche, et la prochaine fois que l'utilisateur voit une mise à jour visuelle sur la page. (Veuillez noter que la mise à jour visuelle peut ne pas être liée à l'interaction).

Différences entre INP et FID

• FID mesure uniquement la première interaction de la page tandis que INP mesure toutes les interactions de la page.
  
  
• FID mesure le délai entre l'interaction utilisateur et le moment où le navigateur est réellement capable de commencer à la traiter.
  
  
• INP mesure le délai entre l'interaction utilisateur et le moment où il y a un changement d'IU subséquent.

INP est beaucoup plus représentatif du potentiel délai visuel de l'expérience de l'utilisateur lors de l'interaction avec une page. FID se concentre davantage sur un délai technique au début de la vue de la page (première interaction uniquement).

Comment fonctionne INP ?

INP vise à capturer la durée entre le moment où un utilisateur initie une interaction et la représentation subséquente du prochain cadre, s'efforçant d'atteindre cela pour la plupart, sinon toutes, les interactions utilisateur. La valeur INP est le pire délai observé (pour les vues de page avec plus de 50 interactions, les valeurs aberrantes sont exclues car INP sera la valeur du 98e centile)

Les interactions observées pour INP sont :

• Clic avec une souris
• Appuyer sur un appareil avec un écran tactile
• Appuyer sur une touche sur un clavier physique ou à l'écran

Selon les directives de Google, vos pages web devraient avoir un INP inférieur à 200 ms pour au moins 75 % des utilisateurs (y compris le trafic mobile et desktop)