Nouveau dashboard pour vos performances ! Avec Search Foresight, nous avons mis en place un baromètre des KPIs Core WebVitals 2020 du top 5 des acteurs français par secteur d’activité
Pour visualiser le dashboard, cliquez sur l’image ou sur ce lien : https://datastudio.google.com/s/ud-YZWD9p0c
La méthodologie
Le choix des sites par secteur a été réalisé suite à un sondage interne à Search Foresight et peut évoluer à la demande.
Les données sont issues de la base de donnée CrUX mise à disposition publiquement par Google. Il s’agit de données de terrain collectées via les rapports de statistiques d’usage des utilisateurs “opt-in” de Chrome pour un ensemble d’URLs populaires agrégées par sous-domaine.
- La base de donnée dispose de plus de 7 Millions de sous-domaines (Mai 2020)
- Les données sont issues de toutes les versions de Chrome (Stable/Beta/Dev/Canary) et toutes les plateformes sauf iOS
Le design
On surf clairement sur le dark mode qui apporte une meilleure mise en valeur des couleurs et un meilleur focus utilisateur.
L’idée était de pouvoir visualiser en 1 coup d’oeil l’ensemble des KPIs, c’est pourquoi nous avons fait le choix des 3 colonnes.
Les composants utilisés sont :
- Un scorecard pour visualiser une valeur moyenne de chaque KPI à atteindre
- Un graphique en barre qui indique la répartition des valeurs sur 3 tranches définies par Google « fast », « avg » et « slow »
- Un série temporelle évidente pour l’évolution des valeurs de KPIs dans le temps et l’utilisation d’une ligne de référence pour visualiser l’objectif.
Les KPIs WebVitals
Les 3 KPIs WebVitals identifiés et promus par Google permettent de monitorer l’experience de chargement des pages de votre site : LCP, FID et CLS.
Largest Contentful Paint (LCP)
Le Largest Contentfil Paint ou LCP mesure le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur.
Par exemple, si on charge un slider full largeur en haut de page, il est important que le conteneur de ce slider (et non les images qui peuvent être chargées lazyloading) se chargent rapidement.
La documentation google du LCP : https://web.dev/lcp/
First Input Delay (FID)
Le First Input Delay ou FID mesure l’interval entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.
Ce KPI peut s’évaluer également en caculant le « Total Blocking Time », c’est à dire le temps total où les interactions avec le site sont bloquées car une ressource se charge trop longtemps. On considère qu’une ressource est longue à charger après 50 ms.
La documentation google du FID : https://web.dev/fid/
Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift ou CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).
Lors du chargement d’une page, l’apparition soudaine d’un bandeau pub full largeur en haut de l’écran a pour effet de décaler tous les éléments en-dessous d’autant de pixel que la hauteur du bandeau pub. Charger le conteneur de pub avec une hauteur et largeur fixe pourrait être une bonne optimisation
La documentation google developer du CLS : https://web.dev/cls/
