Quels sont les 3 indicateurs du Core Web Vitals et comment les optimiser ?

Que sont les Core Web Vitals ?

Les Core Web Vitals ou Signaux Web Essentiels sont trois indicateurs clés de la performance pour une expérience utilisateur optimale sur un site web. Ils évaluent la performance d’une page web. Il s’agit du temps de chargement de la page principale (Largest Contentful Paint), de la réactivité de la page (First Input Delay) et de la stabilité de la mise en page (Cumulative Layout Shift). Le but de ces métriques est d’aider les développeurs et webmasters à améliorer la qualité de l’expérience utilisateur en optimisant les performances du site.

Ces indicateurs peuvent également affecter le classement de votre site dans les résultats de recherche des moteurs de recherche. En effet, les moteurs de recherche prennent aussi en compte ces métriques pour positionner les pages web dans les SERP. Un site optimisé pour les Core Web Vitals peut voir son classement dans les résultats de recherche amélioré.

Présentation des 3 indicateurs

• Largest Contful Paint (LCP) : cette métrique mesure le temps requis pour l’affichage du contenu principal de la page (ou du plus grand contenu sur l’écran de l’utilisateur). Elle est considérée comme cruciale pour la qualité de l’expérience utilisateur, car elle reflète la rapidité avec laquelle les utilisateurs peuvent accéder au contenu le plus important de la page afin de pouvoir interagir avec ce dernier. Pour que le site soit optimisé comme il se doit pour cet indicateur, le temps de chargement doit être inférieur à 2.5 secondes.
• First Input Delay ou délai de première entrée (FID) : cette métrique mesure combien de temps la page met à répondre à la première interaction de l’utilisateur, comme un clic ou une entrée de texte. Cette mesure est importante pour évaluer la qualité de l’expérience utilisateur, car elle reflète la rapidité avec laquelle la page réagit à la première action de l’utilisateur. Pour que le site soit optimisé comme il se doit pour cet indicateur, cet indicateur doit être inférieur à une durée de 100ms.
• Cumulative Layout Shift ou décalage cumulatif de mise en page (CLS) : cette métrique de performance évalue la stabilité de la mise en page d’une page pendant son chargement. Il s’agit des mouvements réalisés par les éléments sur une page Web pendant son chargement. Des mouvements brusques dans la mise en page peuvent causer de la confusion et de l’irritation chez les utilisateurs, surtout s’ils sont en train d’interagir avec la page lorsqu’il se produit. Cet indicateur est différent des deux premiers puisqu’il est mesuré sur une échelle de 0 à 1. 1 signifie qu’il y a de nombreux déplacements. Il est recommandé d’être en dessous de 0,1 afin d’avoir une expérience optimale.

Quelles optimisations possibles ?

Il existe plusieurs stratégies pour optimiser les scores des Core Web Vitals sur un site internet :

• Minifier les fichiers JS et CSS : de sorte à réduire leur taille en les minifiant (suppression des espaces et indentations).
• Essayer de réduire les ressources JS et CSS chargées inutilement. En principe, si vous utilisez un CMS, vous n’avez pas grand chose à faire de ce coté.
• Optimiser les images en réduisant leur poids, en les diffusant au format Webp. Il est également possible pour les images, vidéos ou iframes de leur ajouter l’attribut loading="lazy", ce qui leur permet un chargement progressif. Dans le même temps, il est judicieux de désactiver le chargement vidéo Youtube avec la page, ou l’auto play.
• Utiliser un CMS performant, dont la structure de code est légère (comme WordPress, avec un builder performant comme Breakdance, ou l’éditeur de contenu Gutenberg). Cela permet de réduire le poids de la page, et limiter au maximum les ressources chargées sur cette dernière.
• Limiter l’usage de carrousels ou visionneuse sur la page.
• Utiliser un mécanisme de mise en cache des fichiers du site afin de les précharger et de rendre le chargement du site plus rapide. En stockant les éléments fréquemment utilisés dans le cache du serveur, le site peut se charger plus rapidement, surtout pour les utilisateurs réguliers. Cela réduira ainsi les temps de chargement de la page. De plus, en préchargeant certaines ressources, le site peut être plus stable et prévisible pour les utilisateurs.
• Utiliser un cache objet persistant : cela permet de diminuer le volume de requêtes SQL exécutées coté base de données, si le serveur le permet.
• L’utilisation du cache navigateur pour y stocker les ressources fréquemment utilisées peut accélérer les temps de chargement pour les utilisateurs réguliers. A ce niveau, vous n’avez rien à faire, c’est le navigateur qui s’en occupe.
• Nettoyer la base de données de votre site, si votre site fonctionne avec une base de base de données, vous devez veiller à ce que cette dernière ne contienne pas de données périmées ou inutiles qui pourraient si elles s’accumulent, ralentir votre site.
• Avoir un serveur web performant : choisir un fournisseur d’hébergement web de qualité avec suffisamment de bande passante.
• En optimisant le site et sa mise en page pour les écrans de petite taille. La navigation sur ces appareils doit être toute aussi fluide. Les Core Web Vitals concernent également la navigation sur tablette et mobile. Si vous avez certaines animations qui mettent du temps à charger sur ordinateur, vous pouvez envisager de les désactiver sur mobile par exemple.

Surveiller votre Core Web Vitals

Pour surveiller le score de ces 3 métriques, vous avez la possibilité d’utiliser des outils comme PageSpeed Insights, Gmetrix ou Lighthouse (extension Google Chrome). Vous obtiendrez des rapports détaillés sur la base des 3 indicateurs pour vous dire précisément ce qui va et ce qui ne va pas sur votre site. Ces outils identifieront donc des opportunités d’optimisation.

De plus, Google a mis à jour sa Search Console en ajoutant un onglet « Expériences » qui comprend un item « Signaux Web Essentiels », si tant est qu’il y a assez de trafic sur le site. Vous pourrez donc trouver page par page les problèmes existants qui impactent les performances du site.

Plus le site est optimisé sur ces 3 métriques, plus le chargement sera rapide, et plus l’utilisateur aura envie de rester dessus et de naviguer.

C’est un travail de veille régulier, si vous voulez vous assurer que votre site reste performant.

Les autres métriques de mesure de performance

Il existe une variété de métriques de mesure de performance pour un site web qui ne sont pas partie des Core Web Vitals, en voici 3 autres :

• First Contentful Paint (FCP) : métrique de performance qui mesure le temps qu’il faut pour que le premier contenu visible s’affiche sur la page (image, texte, autre élément visuel).
• Interaction to Next Paint (INP) : métrique qui mesure la latence de réactivité globale de toutes les interactions/actions faites sur la page pendant son cycle de vie, par l’utilisateur. Cette métrique a été présentée tout récemment par Google.
• Time to First Byte (TTFB) : métrique qui mesure le temps écoulé entre la requête d’une page web par le navigateur et la réception du premier octet de donnée par le serveur web. Il ne faut pas la confondre avec FID, puisque le TTFB concerne la réponse du serveur, et le FID concerne la réponse de la page à la 1ère interaction.