Saviez-vous qu'un visiteur sur 2 abandonne un site web s'il prend plus de 2 secondes à se charger ? Pour ne pas subir cet abandon, analysons vos Core Web Vitals, ces indicateurs de l'expérience de l'utilisateur sur votre site. Selon Google, ils vont peser sur la croissance et la reconnaissance de votre site, puisqu’ils affectent l’algorithme basé sur la métrique qui mesure l'interaction des visiteurs au sein d’une page web, au-delà de sa valeur informative. En fonction de leur qualité, vous serez classé sur les moteurs de recherche. Si votre page ne se charge pas assez rapidement, les visiteurs renonceront et vous pourrez perdre votre position de classement au profit d'une page qui propose une expérience plus aisée.
CWV - les trois indicateurs
Le LCP - Largest Contentful Paint - Il s'agit de la vitesse de chargement de votre page. Un bon LCP, Largest Contentful Paint, est inférieur à 2,5 secondes. Entre 2,5 et 4 secondes, votre page demande quelques améliorations. Si votre LCP est supérieur à 4 secondes, Google estimera que votre performance est insuffisante.
Le CLS - Cumulative Layout Shift - Il s'agit d'une mesure qui vise à évaluer la stabilité visuelle de votre site, les incohérences que subit un internaute pendant le chargement d’une page. Il peut s’agir, par exemple, d’une image qui se déplace au cœur de votre page, d’un bouton qui migre à l’instant du clic ou encore d’une pub inattendue au cœur de votre contenu. Google estime qu’une bonne expérience utilisateur a un CLS inférieur à 0,1. Pour atteindre cette performance, Google recommande de prendre en compte le 75ème centile des temps de chargement des pages, pour les appareils mobiles et desktop.
Le FID - First Input Delay - Le délai d'interaction de l'utilisateur. En d'autres termes, le temps qui s'écoule entre le moment où un utilisateur effectue une action sur votre site (comme cliquer sur un lien) et le moment où le navigateur répond à cette action. Il ne se traite pas en secondes mais en millisecondes ! En dessous des 100 ms, vous êtes sur le bon chemin. Au-dessus des 300 ms, au boulot ! Votre performance est considérée médiocre.
Les outils pour mesurer vos CWV
Google Search Console
Google Search Console vous propose un rapport où l’accent est mis sur les pages qui exigent votre attention. Toutefois, si votre URL est dépourvue d’un minimum de données, les mesures ne sont pas capables de l’inclure dans le rapport. Lorsque les données sont insuffisantes, elles ne peuvent être analysées.
PageSpeed Insights
PageSpeed Insights est l'outil qui mesure vos Core Web Vitals. Il propose un tour d'horizon de l'expérience des utilisateurs au sein de votre page grâce au rapport Chrome UX. Suite à une analyse de vos pages, il vous propose des suggestions d'optimisation fournies par Lighthouse. Ceci est aussi valable pour les données mobiles.
Chrome UX
Avec Chrome UX, vous trouverez un ensemble de données publiques sur l'expérience des utilisateurs pour des millions de sites web. Ces données ont été collectées grâce aux utilisateurs qui ont accepté de les partager. Vos réelles performances peuvent aussi être calculées par Real User Monitoring.
Chrome Dev Tools
Au sein de Chrome Dev Tools, sous l'onglet Performance vous trouverez une section "Expérience" avec la capacité de détecter les écarts inattendus diminuant la stabilité visuelle de votre page (Cumulative Layout Shift). Vous pouvez aussi y analyser le TBT (temps de blocage total) pour vérifier s'il existe un temps significatif qui empêche votre utilisateur d'interagir.
Extension Chrome Web Vitals
Cette extension Chrome est essentielle pour analyser vos signaux web et détecter ses anomalies. N'hésitez pas à l'utiliser pour vous aider à examiner la santé de vos Core Web Vitals et si nécessaire résoudre les problèmes qui peuvent nuire à l'expérience de vos utilisateurs.
Web.dev
Web.dev peut également vous aider à mesurer votre performance avec des solutions possibles à mettre en place, classées par priorité.
Quelques conseils pour optimiser vos Core Web Vitals
Un LCP à grande vitesse
• Boostez votre hébergement : habituellement, votre performance est faible parce que votre hébergement est insuffisant. Si vous êtes sur un hébergement mutualisé, un serveur propre est la solution à vos problèmes.
• Adopter les bonnes dimensions d’images : publier des images trop conséquentes et massives est une erreur à ne pas commettre. Veillez à respecter les bonnes dimensions et sélectionnez les formats optimisés pour le web (Jpeg 2000 ou Webp par exemple).
• Lazy Load, une fonctionnalité intéressante à explorer : elle se charge de retarder le chargement des images dans le but de ne les afficher uniquement lorsque l’internaute scrolle la page.
• Exit les scripts d’applications tierces : avez-vous une application tierce pour gérer vos cookies ? Et une distincte pour le chat ? Puis, une dernière pour traquer vos visiteurs ? Voilà pourquoi votre LCP vous paraît hors d'haleine.
Le FID, une performance améliorée
• Évitez les scripts d’applications tierces : à nouveau, ses applications détériorent l'efficacité de votre FID. Google pénalisera votre faible résultat.
• Recevez un système de cache les bras ouverts: en configurant un système de cache sur votre site internet, vous pourrez offrir à vos visiteurs une vitesse de chargement plus performante.
• Tirez profit de Minimize et Defer JavaScript : le JavaScript vous épaule au niveau esthétique mais vous pénalise côté performance, en cas d'utilisation excessive. Pour ne pas punir vos Core Web Vitals, tentez de réduire ou différer vos ressources JavaScript.
Le CLS, une stabilité au top de sa forme
• Gare aux dimensions - pour éviter les écarts de contenus, il est important que vous soyez attentifs aux dimensions qu'il s'agisse de blocs, d'images ou de vidéos. La règle d’or : utilisez les bonnes dimensions, en respectant la taille des écrans de vos visiteurs.
• Publicité définie et paramétrée : pour introduire de la publicité sur votre site web, veillez à lui réserver un emplacement précis pour éviter qu'elle puisse décaler votre contenu et s’afficher de façon aléatoire.
• Intégrez vos éléments sous la ligne de flottaison (cette ligne qui sépare la partie d'un site web visible au moment du chargement de tout ce qui est invisible et se dévoile au moment de l'utilisation de la barre de défilement) : voici une astuce à utiliser avec une certaine retenue, mais qui peut vous épauler en dissimulant le contenu qui peut se déplacer pendant le chargement.
-
Pour conclure, votre ambition est simple : proposer à vos utilisateurs un contenu pertinent et agréable à consommer. Si votre trafic web en a pris une claque dernièrement, il est peut-être temps de décortiquer vos Core Web Vitals.
