{"id":41040,"date":"2021-09-27T08:50:08","date_gmt":"2021-09-27T06:50:08","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=41040"},"modified":"2025-09-11T15:56:28","modified_gmt":"2025-09-11T13:56:28","slug":"outils-mesure-web-vitals","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/outils-mesure-web-vitals\/","title":{"rendered":"7 outils Google pour mesurer les Web Vitals de votre site"},"content":{"rendered":"\n

Connaissez-vous Web Vitals\u00a0? C\u2019est une initiative de Google visant \u00e0 fournir un certain nombre de m\u00e9triques concernant l\u2019UX d\u2019un site web, afin de permettre aux propri\u00e9taires de ces sites d\u2019offrir une exp\u00e9rience utilisateur de qualit\u00e9 \u00e0 tous ces utilisateurs.
Que vous soyez propri\u00e9taire d’une entreprise, responsable du marketing ou d\u00e9veloppeur, Web Vitals peut vous aider \u00e0 quantifier (et \u00e0 qualifier) l’exp\u00e9rience de votre site et \u00e0 identifier des possibilit\u00e9s d’am\u00e9lioration. Vous avez aussi la possibilit\u00e9 de comparer votre site \u00e0 celui de vos concurrents, afin de vous positionner clairement dans la bataille\u2026<\/p>\n\n\n\n

Que sont les Core Web Vitals ?<\/h2>\n\n\n\n

Au fil des ans, Google a fourni un grand nombre d’outils pour mesurer les performances des sites web<\/a>. La multitude de ces outils a fini par rebuter certains d\u00e9veloppeurs, tandis que d\u2019autres s\u2019en sont fait une nouvelle corde \u00e0 leur arc en devenant de vrais experts.
Google pense aujourd\u2019hui qu\u2019il ne devrait pas \u00eatre n\u00e9cessaire d\u2019avoir un Doctorat \u00e8s Page Speed Insight pour mesurer les performances d\u2019un site et c\u2019est pourquoi l’initiative \u00ab Web Vitals \u00bb est n\u00e9e : elle vise \u00e0 simplifier le tout et aider les sites \u00e0 se concentrer sur les param\u00e8tres les plus importants, sobrement intitul\u00e9s les \u00ab Core Web Vitals \u00bb.
\u00ab Les \u00e9l\u00e9ments vitaux du Web \u00bb (donc), constituent le noyau dur de ce qui doit \u00eatre mesur\u00e9, am\u00e9lior\u00e9 et surveill\u00e9 par tous les propri\u00e9taires de sites internet soucieux des performances de ces derniers. Ils sont les plus importants de tous les \u00ab Web Vitals \u00bb.
Chacun des Core Web Vitals repr\u00e9sente une facette de l\u2019UX. Google en a list\u00e9 3 :<\/p>\n\n\n\n

    \n
  1. l’exp\u00e9rience de chargement,<\/li>\n\n\n\n
  2. l’interactivit\u00e9 du site<\/li>\n\n\n\n
  3. la stabilit\u00e9 visuelle du contenu des pages d’un site.<\/li>\n<\/ol>\n\n\n\n

    Google indique comme on pouvait s\u2019y attendre que ces param\u00e8tres, qui constituent les \u00e9l\u00e9ments essentiels du Web, sont amen\u00e9s \u00e0 \u00e9voluer au fil du temps.<\/p>\n\n\n\n

    Le Largest Contentful Paint (LCP)<\/h3>\n\n\n
    \n
    \"Largest<\/figure><\/div>\n\n\n

    <\/p>\n\n\n\n

    C\u2019est une m\u00e9trique centr\u00e9e sur l’utilisateur qui permet de mesurer la vitesse de chargement per\u00e7ue<\/strong>.
    Exit les m\u00e9triques obsol\u00e8tes qui mesuraient le temps de chargement d\u2019une page, car cela ne correspondait pas forc\u00e9ment \u00e0 ce que l\u2019utilisateur, lui, percevait. Le LCP marque le point o\u00f9, dans la chronologie de chargement de la page, le contenu principal est charg\u00e9.<\/strong>
    Avoir un LCP rapide va donc prochainement \u00eatre une caract\u00e9ristique prise en compte dans l\u2019algorithme de Google, qui en tiendra compte pour son classement dans les r\u00e9sultats de recherche.<\/p>\n\n\n\n

    \n

    Afin de garantir une bonne exp\u00e9rience utilisateur, un site doit pouvoir charger la majeure partie de son contenu dans les 2,5 premi\u00e8res secondes<\/strong> qui suivent le d\u00e9but du chargement de la page.<\/p>\n<\/blockquote>\n\n\n\n

    \n

    \u00c0 lire aussi : <\/strong>10 astuces pour am\u00e9liorer le temps de chargement de votre site<\/a><\/p>\n<\/blockquote>\n\n\n\n

    Le First Input Delay (FID)<\/h3>\n\n\n
    \n
    \"First<\/figure><\/div>\n\n\n


    C\u2019est un indicateur important car il quantifie l’exp\u00e9rience que les utilisateurs ressentent lorsqu’ils essaient d’interagir avec des pages qui ne r\u00e9pondent pas ou mettent du temps \u00e0 r\u00e9pondre.
    Le FID mesure le temps \u00e9coul\u00e9 entre le moment o\u00f9 un utilisateur interagit avec une page<\/strong> (c’est-\u00e0-dire lorsqu’il clique sur un lien, sur un bouton, ou sur tout autre \u00e9l\u00e9ment sens\u00e9 interagir avec lui) et le moment o\u00f9 le navigateur r\u00e9pond \u00e0 cette interaction.<\/strong><\/p>\n\n\n\n

    \n

    Un site pourvu d\u2019un FID faible permet de s’assurer que la page est utilisable. Faible comment ? Faible comme moins de 100 millisecondes<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n

    Le Cumulative Layout Shift (CLS)<\/h3>\n\n\n
    \n
    \"Cumulative<\/figure><\/div>\n\n\n


    C\u2019est une mesure importante qui me tient \u00e0 c\u0153ur, car j\u2019y suis confront\u00e9 quotidiennement (grrr). Vous avez s\u00fbrement vous aussi crois\u00e9 cette nouvelle plaie : vous lisez tranquillement un article, quand soudain une image change de place, votre texte n\u2019est plus l\u00e0, il n\u2019est pas un peu plus haut, il n\u2019est pas un peu plus bas non plus, alors vous remonter TOUT en haut et rechercher le dernier sous-titre que vous avez lu afin de retrouver le fil de l\u2019article.
    Le CLS mesure donc ce qu\u2019on pourrait nommer la stabilit\u00e9 visuelle<\/strong>, et cela permet de quantifier la fr\u00e9quence \u00e0 laquelle les utilisateurs subissent des changements de mise en page inattendus<\/strong>.
    Un d\u00e9calage de mise en page se produit chaque fois qu’un \u00e9l\u00e9ment visible change de position d’une image \u00e0 l’autre.<\/p>\n\n\n\n

    \n

    Un CLS faible permet de s’assurer que la page est agr\u00e9able et les sites doivent s’efforcer d’obtenir un score CLS inf\u00e9rieur \u00e0 0,1<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n

    Quels sont les outils pour mesurer vos Web Vitals ?<\/h2>\n\n\n\n

    Tous les outils de Google destin\u00e9s aux d\u00e9veloppeurs prennent d\u00e9sormais en charge ces nouvelles m\u00e9triques. En effet, Google incluant d\u00e9sormais les Core Web Vitals dans son algorithme pour \u00e9valuer l’exp\u00e9rience utilisateur des pages, il \u00e9tait indispensable que ces outils nous permettent de mesurer nous-m\u00eames ces nouvelles m\u00e9triques et nous indiquent comment les corriger.
    Pour commencer \u00e0 optimiser l’exp\u00e9rience utilisateur gr\u00e2ce aux donn\u00e9es de Core Web Vitals, nous allons voir quel outil propose quoi, car chacun ne propose pas tout \u00e0 fait la m\u00eame chose.<\/p>\n\n\n\n

    Google Search Console<\/h3>\n\n\n
    \n
    \"Core<\/figure><\/div>\n\n\n


    Utilisez le nouveau rapport \u00ab signaux web essentiels \u00bb de la Search Console<\/a> pour identifier des groupes de pages qui n\u00e9cessitent une attention particuli\u00e8re.
    Si votre site conna\u00eet suffisamment de trafic, alors les donn\u00e9es (collect\u00e9es par le rapporteur d’exp\u00e9rience utilisateur de Chrome) vous aideront \u00e0 identifier les groupes de pages de votre site qui n\u00e9cessitent d\u2019\u00eatre travaill\u00e9es.
    Le rapport est bas\u00e9 sur les trois mesures du Core Web Vitals :<\/p>\n\n\n\n