Que sont les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de mesures établies par Google pour améliorer l'expérience des utilisateurs sur les pages Web. En d'autres termes, ce sont des facteurs que le moteur de recherche prend en compte pour noter l'expérience de la page, ce qui correspond à différentes facettes de celle-ci.

Les Core Web Vitals tentent de répondre à trois questions :

• Quelle est la vitesse de chargement d'une page ?
• Combien de temps faut-il pour qu'un site web devienne interactif ?
• Et pour stabiliser ?

Eh bien, Google a indiqué que les Core Web Vitals évolueront au fil du temps. Mais pour l'instant, il se concentre sur trois aspects qui répondent aux questions ci-dessus.

 

Peinture du plus grand contenu (LCP)

Le LCP désigne le temps nécessaire pour charger le plus grand élément de contenu que l'utilisateur peut voir. Google a souligné que les éléments disposés dans ce que l'on appelle "au-dessus du pli" doivent être disponibles rapidement et être lisibles.

Les éléments montrés à l'utilisateur une fois qu'il a cliqué sur l'écran n'ont pas d'incidence sur le LCP. Lorsque l'on parle du plus grand élément de contenu, on peut faire référence à une image ou à un bloc de texte.

Pour Google, le temps maximal de chargement du LCP, afin d'offrir une bonne expérience utilisateur, serait inférieur à 2,5 secondes.

 

Délai de première entrée (FID)

Le FID fait référence à l'interactivité, c'est-à-dire au temps que met la page à réagir lorsque l'utilisateur interagit avec l'un des éléments qu'elle contient. En d'autres termes, il s'agit de la vitesse à laquelle le navigateur agit et produit un résultat à partir du moment où l'utilisateur clique.

Le moteur de recherche considère qu'un bon FID doit être inférieur à 100 millisecondes. Des améliorations sont nécessaires entre 100 et 300 millisecondes, et une valeur supérieure à 300 millisecondes pourrait être alarmante.

 

Décalage cumulatif de la mise en page (CLS)

Cette métrique fait référence au chargement d'éléments qui modifient l'affichage de la page au fur et à mesure qu'elle réagit. Ce qui est recherché dans ce cas est de s'assurer que le contenu à l'écran est stable et ne change pas au fur et à mesure que d'autres ressources sont chargées.

Google trouve (à juste titre) extrêmement gênant que certains éléments de la page se chargent et en fassent bouger d'autres. Le résultat est souvent que l'utilisateur finit par cliquer sur un site qu'il ne voulait pas. Et le moteur de recherche considère qu'un bon CLS est inférieur à 0,1 seconde.

 

Pourquoi sont-ils importants ?

Dès mai 2020, Google nous a prévenus : il arrivera le moment où différents signaux qui mesurent l'expérience de l'utilisateur sur la page seront pris en compte pour le classement des recherches. Cela aura un impact massif sur le référencement.

Sans entrer dans les détails, nous avons commencé à entendre parler des Core Web Vitals, qui sont déjà fondamentaux pour une raison : parce que Google a annoncé en novembre 2020 que d'ici mai 2021, ils seraient un facteur de positionnement substantiel.

Google avait promis d'annoncer six mois à l'avance la mise à jour de l'expérience des pages et l'a fait sur son blog officiel le 10 novembre de l'année dernière.

Par conséquent, les pages qui ne respectent pas les valeurs considérées comme appropriées dans ces paramètres auront du mal à apparaître dans les premières positions des SERP.

Dans ce contexte, le géant de la recherche recommande de se préparer à l'avance à respecter ces paramètres sur votre site. Vous devez être prêt lorsque le moment sera venu pour l'algorithme de Google de les appliquer.

Core Web Vitals et d'autres mesures définiront bientôt l'expérience sur la page et joueront un rôle décisif dans le positionnement du référencement.

Mais les Core Web Vitals sont-ils importants simplement parce que Google les considérera comme un facteur de classement dans un avenir proche ? En réalité, si le moteur de recherche a pris cette décision, c'est parce que ces aspects sont fondamentaux. Il y a trois raisons principales pour lesquelles ils sont essentiels:

• Ils améliorent l'engagement et l'expérience des utilisateurs.
• Aide les rédacteurs à évaluer les performances d'une page.
• Donnez une continuité à l'expérience de la page sur différents appareils : PC, mobiles et tablettes.

 

Comment mesurer Core Web Vitals

Vous pouvez mesurer ces paramètres grâce au rapport Core Web Vitals de la Google Search Console (GSC), qui indique les URL à améliorer. À partir de là, vous pouvez étudier ce qui requiert votre attention, et vous devez l'optimiser.

Désormais, avec FandangoSEO, vous pouvez également surveiller les Vitaux Web de base. Détectez rapidement toute zone de votre site qui a besoin d'être améliorée. Une fois que vous avez ouvert votre projet, allez à Page Info > Core Web Vitals pour utiliser cette fonctionnalité.

Pour accéder au rapport sur l'expérience des utilisateurs dans Google Chrome, connectez-vous au SGC. Sur la gauche, il y a une barre qui contient une section appelée "Améliorations". Une fois là, cliquez sur "Core Web Vitals". Vous verrez des graphiques dans lesquels l'option "Ouvrir le rapport" est affichée. Vous pourrez y effectuer une analyse approfondie de ces mesures.

Les rapports du SGC sont liés aux rapports de Page Speed Insights. Page Speed Insights, à son tour, est alimenté par Lighthouse, qui consiste en une série de mesures de performance. Pour certaines personnes, leur utilisation peut être un peu compliquée car elle nécessite des connaissances techniques.

 

Comment optimiser Core Web Vitals

Une fois que vous avez analysé les performances de vos vitales web, il est temps de les améliorer. Voyons en détail comment vous pouvez optimiser vos vitales Web de base.

La plus grande optimisation de peinture Contentful

Tout d'abord, pour optimiser le LCP, vérifiez les causes les plus courantes qui peuvent conduire à un mauvais résultat. Ainsi, vous saurez ce qu'il faut faire dans chaque cas.

Temps de réponse des serveurs lents

Pour améliorer le temps de réponse de votre serveur, vous pouvez prendre les mesures suivantes.

• Optimisez votre serveur
• Utiliser un CDN
• Appliquer la mise en cache du serveur
• Servez d'abord des pages HTML complètes ou partielles dans la mémoire cache

JavaScript et CSS bloquant le rendu

Le JavaScript et le CSS bloquant le rendu empêchent les sites d'afficher une page avant le chargement de ces fichiers. Pour résoudre ce problème, nous vous recommandons de réduire les CSS. De plus, reportez les CSS non critiques et mettez en ligne les CSS critiques.

Temps de chargement lent des ressources

• Pour réduire le temps de chargement des ressources, vous pouvez prendre les mesures suivantes
• Optimiser et compresser les images
• Précharger des ressources importantes
• Compresser les fichiers texte
• Utiliser un travailleur de service

Rendu côté client

Si vous utilisez un gros paquet Javascript sans l'optimiser dans un site essentiellement rendu du côté client, vous nuirez aux performances de votre LCP. Pour éviter ce problème, réduisez le Javascript, reportez le Javascript non utilisé et minimisez les polyfills non utilisés.

 

Optimisation du délai de première entrée

Un mauvais DIF est généralement le résultat d'une exécution intensive de JavaScript. En d'autres termes, vous devez optimiser la façon dont JavaScript analyse, compile et exécute votre page. Pour ce faire, vous pouvez prendre les mesures suivantes.

• Divisez les tâches longues en tâches plus petites et asynchrones.
• Optimiser la préparation à l'interaction, comme le chargement progressif du code.
• Examiner le code de tiers et donner la priorité au chargement.
• Utiliser un web worker (Comlink, Workway, Workerize)
• Réduire le temps d'exécution des JS

 

Optimisation du décalage cumulatif de la mise en page

Voyons quatre éléments qui sont les plus susceptibles de nuire aux performances de votre CLS. Vérifiez chacun d'entre eux et prenez les mesures nécessaires pour améliorer votre CLS.

• Annonces, éléments graphiques et iframes sans dimensions spécifiées: Vous devez toujours réserver de l'espace pour les annonces, les éléments graphiques et les iframes. Ne placez pas d'annonces en haut de la fenêtre d'affichage.
• Image sans dimensions spécifiées: Veillez à inclure les attributs de taille largeur et hauteur sur vos éléments image et vidéo.
• Contenu injecté dynamiquement: N'oubliez pas d'éviter d'insérer du nouveau contenu au-dessus du contenu existant.
• Web Fonts that cause FOIT/FOUT: Use font-display, font Loading API, or <link rel=” preload”> for key web fonts.

 

Autres Web Vitals que vous devriez également prendre en compte

Nous avons vu que les Core Web Vitals seront un facteur de positionnement essentiel à partir de mai de cette année. Toutefois, ce ne seront pas les seules vitales Web que Google prendra en considération. En particulier, vous ne devez pas perdre de vue les métriques suivantes:

 

Réduire le temps d'accès au premier octet (TTFB)

Le TTFB est le temps qui s'écoule entre le moment où le navigateur demande le premier élément d'information à un serveur et celui où il le reçoit. Cela peut retarder le processus d'affichage d'une page par le navigateur. Un délai entre la demande du navigateur et la réponse du serveur augmente le temps TTFB.

 

First Contentful Paint (FCP)

Cette métrique fait référence au temps qui s'écoule entre le moment où le web commence à se charger et celui où une partie quelconque du contenu du web s'affiche à l'écran (texte, images, etc.). La différence entre le PCF et le PCL est que ce dernier mesure le temps nécessaire au chargement du contenu principal de la page, et non de n'importe quel contenu. Pour optimiser votre PCF, vous devez accélérer le chargement des polices. À cette fin, préchargez les polices Web pour améliorer la vitesse de chargement.

 

Temps de blocage total (TBT)

Il mesure la réactivité du chargement de la page lorsque l'utilisateur y accède. En d'autres termes, il s'agit du temps total pendant lequel le site web a été bloqué, empêchant l'utilisateur d'interagir avec lui.

 

Temps d'interaction (TTI)

Cette métrique mesure la durée entre le moment où la page commence à se charger et celui où ses ressources secondaires les plus importantes se chargent. C'est le moment où la page peut répondre rapidement et de manière fiable aux entrées de l'utilisateur.

Vitesse de la page HTTP/2