Contactez-nous !

Les Core Web Vitals (et leur importance)

Il y a un an, Google a présenté les core web vitals - Signaux Web essentiels en Français. Ces signaux sont des nouveaux indicateurs issus d'une initiative visant à mesurer la convivialité des pages et qui est lié à l'expérience des utilisateurs sur son moteur de recherche.

Ces indicateurs supplémentaires ont pour objectif de permettre de mieux discerner les sites web offrant une expérience utilisateurs de qualité (et donc de les favoriser sur leur moteur de recherche).

Ces indicateurs sont au nombre de 3 : le LCP, le FID, le CLS.

LCP (Largest Contentful Paint)

Google a constaté que les anciens indicateurs (First Meaningful Paint & Speed Index) n'étaient pas suffisamment précis et étaient complexes. Suite à ce constat, Google a décidé de revoir leur maniÚre de mesurer et le Largest Contentful Paint est entré en jeu.

Google considĂšre qu'une page a un bon LCP lorsqu'une page se charge en dessus de 2,5 sec.

le LCP en détail

Les éléments pris en considération dans le calcul de la métrique sont les suivants :

  • les Ă©lĂ©ment images <img>
  • les Ă©lĂ©ments <image> au sein des Ă©lĂ©ments <svg>
  • les Ă©lĂ©ments <video> (l'image mise en avant)
  • les Ă©lĂ©ments ayant une background-image chargĂ©e Ă  l'aide de la fonction url()
  • les Ă©lĂ©ments contenant du texte

En résumé, cet indicateur permet de mesurer les performances de chargement d'une page en se basant sur le temps que met le plus gros éléments (image ou texte) à s'afficher dans le viewport

Comment améliorer votre score ?

Les facteurs qui influe sur le score LCP sont :

  • Des temps de rĂ©ponse lent de votre serveur
  • Le JavaScript ou le CSS bloquant le rendu
  • Le temps de chargement des ressources (images, vidĂ©os, etc)
  • Le rendu effectuĂ© cĂŽtĂ© client (Navigateur)

Nos préconisations simples à mettre en place sont :

  • l'optimiseation de vos images en utilisant un format optimisĂ© pour le web (👋 WebP et AVIF)
  • l'optimisation de vos feuilles de style et vos scripts JavaScript notamment en les minifiant
  • l'optimisation du chargement de vos polices

First Input Delay (FID)

AprĂšs s'ĂȘtre attaquĂ© au plus gros morceau de votre page avec le Largest Contentful Paint, Google s'intĂ©resse de prĂȘt au temps nĂ©cessaire Ă  votre page pour rĂ©agir aux intĂ©raction initiĂ©es par vos utilisateurs (clique sur un lien ou un bouton par exemple).

Une bonne FID est inférieur à 100ms

Sous le capot du FID

Techniquement le FID mesure le delta entre la réception d'un évÚnement (action d'un utilisateur) et le moment ou le thread principal est disponible.

Les éléments suivants sont impactant dans la mesure du FID car ils ne sont pas prioritaires dans la pile du thread principal:

  • champs texte, les cases Ă  cocher et les boutons radios
  • les listes dĂ©roulantes
  • les liens

A noter que les autres intéractions comme le scroll ou le zoom ne sont pas comptabilité dans le calcul car généralement les navigateurs les exécute dans un autre thread.

Comment améliorer votre score FID ?

Afin d'améliorer votre score FID il est préconisé de :

  • RĂ©duire l'impact des code tiers que vous pourriez utiliser
  • RĂ©duire le temps d'exĂ©cution de vos scripts JavaScript
  • Minimiser la charge du thread principal
  • RĂ©duire le nombre et la taille de vos requĂȘtes

Nos préconisations simples à mettre en place sont :

  • Minimisez l'usage de code tiers au strict minimum
  • Veillez Ă  ne pas avoir des scripts JavaScript trop volumineux - le parsing de ces fichiers charge le thread principal

Cumulative Layout Shift (CLS)

Quoi de plus énervant que des éléments apparaissant de maniÚre impromptu à cause d'un chargement asynchrone ?

Le Cumulative Layout Shift est la pour vous aider à mesurer la stabilité de la page que vous consultez en quantifiant la fréquence à laquelle de tel changement de mise en page se produisent pour vos utilisateurs.

Selon Google, pour offrir une bonne expérience utilisateur, les sites doivent s'efforcer d'avoir un score CLS de 0,1 ou moins.

CLS en précision

Un layout shift - changement de mise en page en français - sont tous les éléments qui change de position de départ entre deux frame. C'est éléments sont considérés comme instables .

Parce qu'une vidĂ©o vaut milles explications, une vidĂ©o d'Annie Sullivan et Steve Kobes 👇

Comprendre Cumulative Layout Shift

Comment améliorer votre score CLS ?

Pour améliorer votre score sur la métrique CLS il faut :

  • Utilisez les attributs width et height sur vos Ă©lĂ©ments image et vidĂ©o
  • N'insĂ©rez jamais de contenu au-dessus du contenu existant, sauf en rĂ©ponse Ă  une interaction de l'utilisateur.
  • PrĂ©fĂ©rez les animations de transformation aux animations de propriĂ©tĂ©s qui dĂ©clenchent des changements de disposition

L'importance d'optimiser vos pages dĂšs maintenant

Dans son calendrier, Google a prévu de déployer progressivement ces nouveaux indicateurs de convivialité à partir de mi-Juin 2021 et cela s'étalera jusqu'à la fin du mois d'août 2021.

Il est donc primordial pour vous de vous intéresser dors et déjà à ce sujet afin d'optimiser votre score Core Web Vitals d'ici le déploiement complet de ce nouveau dispositif dans l'algorithme Google.

Le risque, pour ceux qui ne se soucierais pas de cette modification, est une chute dans les résultats de recherche et donc une perte de visibilité auprÚs de vos prospects.

Bonus : Comment mesurer votre score Core Web Vitals pour votre site ?

Parmi les possibilités offerte, nous privilégions les outils suivants pour leur facilités d'utilisation :

17 rue des cygnes
91280Saint-Pierre-du-Perray
© Agile Enabler 2021mentions légalesCGV