Core Web Vitals : comment Google évalue l'expérience utilisateur de ton site

Les Core Web Vitals de Google, c'est un ensemble de mesures qui évaluent l'expérience réelle des utilisateurs en termes de vitesse de chargement, d'interactivité et de stabilité visuelle d'une page web. Ces mesures influencent directement le classement dans les résultats de recherche Google et servent de référence pour savoir comment les visiteurs voient les performances de ton site web.

Dans cet article, on va voir ce que sont les Core Web Vitals, comment ils influencent ton classement dans les résultats de recherche et ce que tu peux faire pour les améliorer.

Qu'est-ce que les indicateurs vitaux de base du Web ?

Les Core Web Vitals, c'est trois indicateurs spécifiques que Google utilise pour analyser l'expérience globale des utilisateurs sur une page web. Ils font partie des signaux d'expérience de page de Google, qui incluent aussi la compatibilité mobile, la navigation sécurisée, la sécurité HTTPS et les directives sur les interstitiels intrusifs.

Les signaux d'expérience de page montrent comment les gens voient la qualité de l'interaction avec une page web. De bons scores Core Web Vitals aident à améliorer la visibilité dans les résultats de recherche Google, tandis que de mauvais scores peuvent empêcher ton site d'atteindre son potentiel de classement.

Les trois indicateurs Core Web Vitals sont le Largest Contentful Paint (LCP), l'Interaction to Next Paint (INP) et le Cumulative Layout Shift (CLS).

Plus grand élément peignant le contenu (LCP)

Le LCP, c'est le temps qu'il faut pour charger une page. En gros, il regarde combien de temps ça prend après qu'un utilisateur a demandé l'URL pour afficher le plus gros élément de contenu visible dans la fenêtre d'affichage.

L'élément le plus gros, c'est souvent une image principale, une vignette vidéo ou un gros bloc de texte. Cet élément est important parce qu'il montre aux visiteurs que la page est en train de se charger et de fournir du contenu.

Seuil cible : le LCP devrait se produire dans les 2,5 secondes suivant le début du chargement de la page.

Interaction jusqu'à la prochaine peinture (INP)

En mars 2024, l'INP a remplacé le First Input Delay (FID) comme mesure officielle de la réactivité. Alors que le FID ne mesurait que le temps d'attente avant que le navigateur puisse traiter la première interaction de l'utilisateur, l'INP donne une image plus complète de la réactivité en mesurant toutes les interactions pendant toute la session de l'utilisateur.

INP suit trois trucs de chaque interaction :

• Délai d'entrée : le temps entre le moment où quelqu'un fait quelque chose et celui où les gestionnaires d'événements commencent à s'activer.
• Temps de traitement : combien de temps ça prend pour que le code du gestionnaire d'événements s'exécute
• Délai de présentation : le temps entre le moment où les gestionnaires finissent et celui où le navigateur affiche la mise à jour visuelle.

Le score INP final indique la plus longue interaction observée pendant une visite sur la page, ce qui te donne une idée de la réactivité la plus mauvaise que tes visiteurs peuvent rencontrer.

Objectif : les pages devraient avoir un INP de 200 millisecondes ou moins. Les scores entre 200 et 500 ms doivent être améliorés, et tout ce qui dépasse 500 ms est considéré comme mauvais.

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

CLS mesure la stabilité visuelle d'une page en repérant les changements de mise en page inattendus qui se produisent pendant toute la durée de vie de la page.

Le score CLS va de zéro à n'importe quel nombre positif. Zéro veut dire qu'il n'y a pas eu de changement de page inattendu, tandis que des nombres plus élevés montrent plus d'instabilité visuelle. Les changements de mise en page énervent les utilisateurs quand ils cliquent par erreur sur le mauvais élément parce que le contenu a bougé au dernier moment.

Objectif : les pages devraient avoir un score CLS de 0,1 ou moins.

Outils de mesure de Google Core Web Vitals

Connaître tes scores actuels, c'est déjà un pas vers l'amélioration. Google propose plusieurs outils gratuits pour mesurer les performances Core Web Vitals.

PageSpeed Insights

PageSpeed Insights analyse le contenu de n'importe quelle page web et te donne un rapport détaillé avec des idées pour l'améliorer. Cet outil te montre à la fois les données réelles des utilisateurs de Chrome et les données de laboratoire provenant de chargements de pages simulés.

Entrez n'importe quelle URL pour voir vos scores LCP, INP et CLS, ainsi que des recommandations pratiques. Le gros inconvénient, c'est que chaque URL doit être vérifiée manuellement.

Rapport Core Web Vitals de Google Search Console

Le rapport Core Web Vitals dans Google Search Console te montre comment tes pages marchent, basé sur les données réelles d'utilisation collectées auprès des utilisateurs de Chrome.

Ce rapport classe les performances des URL par statut (bon, à améliorer, mauvais), type de métrique et groupes d'URL contenant des pages web similaires. Seules les URL indexées apparaissent dans le rapport, ce qui le rend utile pour comprendre les tendances de performance à l'échelle du site.

Rapport sur l'expérience utilisateur de Chrome

Le rapport sur l'expérience utilisateur Chrome (CrUX) donne des infos sur l'expérience réelle des utilisateurs de Chrome qui ont accepté de partager leurs données de navigation de façon anonyme. Ces données alimentent les infos de terrain affichées dans PageSpeed Insights et servent de source officielle à Google pour évaluer les Core Web Vitals.

Tu peux accéder aux données CrUX via BigQuery pour une analyse plus approfondie ou les utiliser indirectement via PageSpeed Insights et Search Console.

Comment améliorer la vitalité de ton site Web

Si tes scores sont en dessous des seuils recommandés, des optimisations ciblées peuvent les ramener dans la zone verte.

Conseils pour améliorer le chargement (LCP)

Les raisons courantes pour lesquelles les scores LCP sont pas terribles, c'est que les serveurs sont lents à répondre, que le JavaScript et le CSS bloquent le rendu, que les ressources mettent du temps à se charger et qu'il y a des goulots d'étranglement dans le rendu côté client.

Stratégies d'optimisation :

• Supprime les scripts tiers inutiles qui ralentissent le chargement initial de la page.
• Passe à un hébergement web plus rapide avec de meilleurs temps de réponse du serveur.
• Mettez en place le chargement différé pour que les images ne s'affichent que quand les utilisateurs les atteignent en faisant défiler la page.
• Utilise des formats d'image modernes comme WebP ou AVIF avec une bonne compression.
• Préchargez les ressources importantes qui apparaissent au-dessus de la ligne de flottaison.
• Utilise un réseau de diffusion de contenu (CDN) pour fournir des ressources depuis des endroits plus proches de tes visiteurs.

Passe à un hébergement web plus rapide. Le temps de réponse du serveur a un impact direct sur le LCP. Si ton hébergeur actuel a un temps de réponse trop long, aucune optimisation frontale ne pourra compenser ça. Les serveurs performantsInMotion Hosting sont équipés d'SSD NVMe et d'une mise en cache au niveau du serveur pour que tes pages se chargent plus vite.

Conseils pour améliorer l'interactivité (INP)

Une exécution JavaScript trop lourde, c'est souvent la raison pour laquelle les scores INP sont pas terribles. Quand JavaScript monopolise le thread principal du navigateur, il ne peut pas répondre aux interactions de l'utilisateur.

Stratégies d'optimisation :

• Divisez les tâches JavaScript longues en petits morceaux qui cèdent la place au thread principal.
• Attends que la page soit chargée avant de lancer les trucs JavaScript qui ne sont pas super importants.
• Supprimez le code inutilisé grâce au tree shaking et au code splitting.
• Réduis la taille du DOM, car les grands arbres DOM ralentissent le rendu et le traitement des interactions.
• Utilise requestAnimationFrame pour les animations au lieu de setInterval.
• Pense à utiliser les Web Workers pour décharger le thread principal des tâches lourdes.
• Vérifiez les scripts tiers et supprimez ceux qui ne sont pas vraiment nécessaires.
• Mettez en place la mise en cache du navigateur pour accélérer les visites suivantes.

Conseils pour améliorer la stabilité visuelle (CLS)

Les changements de mise en page viennent souvent d'images sans dimensions précises, de pubs et d'éléments intégrés qui se chargent sans espace réservé, de contenu ajouté en direct et de polices web qui font clignoter du texte invisible.

Stratégies d'optimisation :

• N'oublie pas de toujours mettre les attributs width et height sur les images et les vidéos.
• Réserve de l'espace pour les emplacements publicitaires avant qu'ils ne se chargent
• Précharge les polices et utilise font-display: optional ou font-display: swap pour éviter les changements de mise en page pendant le chargement des polices.
• Évite d'ajouter du contenu au-dessus du contenu déjà là une fois que la page a commencé à s'afficher.
• Utilise les propriétés de transformation CSS pour les animations au lieu des propriétés qui font recalculer la mise en page.

Pourquoi les Core Web Vitals sont importants pour ton entreprise

Google utilise le 75e centile des données réelles des utilisateurs pour évaluer les Core Web Vitals. Ça veut dire qu'au moins 75 % de vos visiteurs doivent obtenir des scores dans la fourchette « bonne » pour que vos pages soient validées.

Les sites qui respectent les critères Core Web Vitals ont tendance à mieux se classer dans les résultats de recherche, à avoir des taux de rebond plus faibles et à afficher des indicateurs d'engagement plus élevés. Les mauvais scores créent une expérience utilisateur frustrante qui pousse les visiteurs vers les sites concurrents proposant des pages plus rapides et plus stables.

Améliorer les Core Web Vitals, c'est pas un truc qu'on fait une seule fois. Il faut vraiment surveiller et optimiser régulièrement ton site web. Après chaque grosse mise à jour, vérifie tes mesures LCP, INP et CLS et corrige les problèmes avant qu'ils affectent tes visiteurs et ton classement dans les moteurs de recherche.

Pour des conseils techniques plus détaillés sur chaque indicateur, jette un œil à la documentation officielle de Google sur les Web Vitals.