Qu’est-ce que les « Core Web Vitals » de Google?
Google a annoncé en mai 2020 l’arrivée des Core Web Vitals (signaux web essentiels en français). Google souhaite mesurer l’expérience utilisateur des sites Web à travers 3 KPIs :
- LCP : Le Largest Contentful Paint mesure la performance de la page.
- INP : l’Interaction to Next Paint mesure l’interactivité globale de la page. Ce KPI remplacera le FID (First Input Delay) en mars 2024.
- CLS : Le Cumulative Layout Shift mesure la stabilité de la page.
Ces 3 KPI arrivent en plus des autres KPIs importants pour l’expérience utilisateur, à savoir la compatibilité mobile, la navigation privée et l’absence de publicités trop envahissantes.
Pour mesurer les Core Web Vitals, Google s’appuie sur le rapport CrUX qui récolte les informations réelles des utilisateurs utilisant le navigateur Google Chrome. Ce rapport est donc plus ou moins étoffé selon la popularité de votre site et les données varient également selon la connexion internet de vos visiteurs. Des outils de mesure et d’aide à l’optimisation des Core Web Vitals seront détaillés sur cette page.
Les améliorations « Core Web Vitals » peuvent s’avérer complexes selon le CMS choisi. Il existe de nombreux plugins (extensions) gratuits ou peu onéreux permettant d’optimiser rapidement les images, JavaScript ou CSS par exemple. Quel que soit le CMS de votre site, même s’il ne s’agit pas de WordPress, Prestashop, Magento ou Shopify, n’hésitez pas à me contacter pour avoir des conseils.
Demande de devis!LCP : Le Largest Contentful Paint
Le LCP ou Largest Contentful Paint est le principal indicateur de temps de chargement d’une page comptabilisé dans les Core Web Vitals. Ce KPI mesure le temps nécessaire pour charger le plus grand élément de contenu visible dans la fenêtre d’affichage lors du chargement initial de la page. Un LCP rapide indique une bonne expérience utilisateur, car cela signifie que le contenu principal de la page est rapidement accessible. Google recommande un LCP inférieur à 2,5 secondes.
Une illustration pour expliquer le LCP :
Comment optimiser son LCP?
L’utilisation de plugin d’optimisation des temps de chargement permet d’optimiser le LCP. Voici quelques pistes d’optimisation permettant d’améliorer son score LCP :
- Optimisation des images :
- Utilisation des formats WebP ou AVIF (formats ultra-compressés recommandés par Google).
- Compression des images
- Chargement différé des images hors écran (Lazy Loading)
- Optimisation des fichiers JavaScript : différer l’exécution des ressources JS et supprimer les ressources JS inutilisées.
- Optimisation des fichiers CSS : mise en place du Critical CSS Path et suppression des ressources CSS inutilisées.
- Optimisation des polices du site : rationalisation des polices et optimisation du chargement (font-display).
- Mise en cache Navigateur : la mise en cache consiste à demander au navigateur de stocker en cache les ressources statiques comme les images, polices, JavaScript et CSS. De ce fait, lorsque l’utilisateur reviendra sur le site ou ira sur une autre page du site, il n’aura plus à recharger ces ressources et le temps de chargement sera donc plus rapide.
- Mise en cache Serveur : pour alléger la charge serveur et éviter les allers-retours avec la base de données, il est recommandé de mettre en cache des pages.
- Utilisation d’un CDN : un CDN (Content Delivery Network) est un réseau de serveurs répartis géographiquement qui accélère la livraison de contenu web en le stockant plus près des utilisateurs finaux, améliorant ainsi la vitesse de chargement des pages. Il est possible de mettre uniquement les ressources statiques sur un CDN.
- Réduire le nombre de ressources tierces : c’est la phase d’optimisation la plus complexe… Les sites à forte volumétrie ou forte popularité utilisent de nombreuses ressources tierces comme des API externes, des régies publicitaires, des vidéos externes ou encore des éléments de tracking Analytics. Ces ressources demandent au navigateur d’aller les solliciter à chaque appel de page, ralentissant ainsi le temps de chargement de la page. Il est recommandé de faire régulièrement le ménage pour supprimer les ressources tierces inutiles ou d’internaliser certaines ressources.
CLS : Le Cumulative Layout Shift
Le CLS ou Cumulative Layout Shift est une métrique des Core Web Vitals qui mesure la stabilité visuelle d’une page web. Ce KPI effectue la somme totale de tous les décalages inattendus de contenu pendant la durée de vie de la page. Google recommande un CLS inférieur à 0,1, le plus proche possible de 0. Google a mis en place ce KPI pour éviter la gêne des utilisateurs lorsqu’ils commencent à lire un contenu et que des pubs apparaissent et font descendre ou monter le contenu, rendant ainsi la lecture impossible.
Une illustration pour expliquer le CLS :
Comment optimiser son CLS?
L’optimisation du CLS est une tâche réservée à un intégrateur Web Front Office. Il s’agit d’optimisation du template HTML / CSS de chaque gabarit de page. Les principales causes de décalages pénalisant le Cumulative Layout Shift sont les suivantes :
- Images non dimensionnées : pour éviter les décalages lors du chargement d’une page Web, il est indispensable de dimensionner chaque image ou bloc accueillant une image dès le début du chargement de la page à l’aide d’une règle CSS ou en indiquant Width (largeur) et Height (hauteur) directement dans le code HTML. La difficulté de cette optimisation est de ne pas négliger le côté adaptatif (mobile, tablette, ordinateur) des images.
- Les publicités : les publicités intégrées en JavaScript pénalisent souvent le score CLS car le bloc accueillant la pub n’est pas dimensionné dès le début du chargement de la page, ce qui entraîne un décalage vers le bas du reste du contenu.
- Les animations en JavaScript : certains éditeurs et constructeurs de page comme Elementor proposent aux utilisateurs de créer des marges entre les différents blocs de vos pages. Attention, ces marges sont fréquemment générées en JavaScript et non en CSS. Le JavaScript étant généralement exécuté en dernier, des décalages peuvent apparaître et provoquer un mauvais score CLS.
- Police de secours : la police de secours est la police système qui apparaît avant que la police finale soit chargée. Si ces deux polices sont trop différentes, un décalage peut alors se créer et pénaliser le CLS.
INP : Interaction to Next Paint
L‘INP ou Interaction to Next Paint est une nouvelle métrique proposée pour les Core Web Vitals. Ce KPI remplacera le FID en mars 2024 et mesure la réactivité globale d’une page. Google recommande un INP inférieur à 200 ms.
À la différence du FID qui mesurait la première interaction, l’INP va mesurer chaque interaction, du clic sur un bouton à la bannière de cookie ! Un audit avancé est à prévoir, aucune recommandation type n’existe pour l’optimisation de l’INP.
Une illustration pour expliquer l’INP :
Quels sont les outils de mesure des Core Web Vitals?
L’outil gratuit Google PageSpeed Insights fournit les scores Core Web Vitals du rapport CrUX mais également des données de tests à un instant T. L’outil liste également toutes les problématiques rencontrées avec des pistes d’amélioration.
La Google Search Console, outil gratuit fourni par Google, permet de suivre l’évolution de vos pages au niveau Core Web Vitals. L’outil vous indique quelles pages sont considérées comme « lentes », « à améliorer » ou « rapides ». Le KPI (LCP, CLS, INP) est indiqué si les URL ne sont pas considérées comme « rapide » avec des exemples de pages concernées.
L’extension gratuite Web Vitals permet de connaître les scores Core Web Vitals d’une page en un clic.
Cette solution complète d’audit Web Performance est disponible gratuitement et permet d’avoir des captures d’écran et des vidéos du chargement de la page. Cet outil est particulièrement intéressant pour l’audit du CLS.
GTmetrix est un outil complet d’audit Web Performance. Le graphique de chargement de la page (waterfall) indique la durée de chargement de chaque élément de la page, ce qui permet de détecter d’éventuelles ressources trop lourdes ou trop lentes.
Demande de devis gratuit
Demandez votre devis gratuit pour une prestation d’audit Core Web Vitals.
