Core Web Vitals: Le Guide « vraiment » Complet

Vous voulez tout savoir sur les Core Web Vitals ou Signaux Web Essentiels ?

N’allez pas plus loin, vous avez trouver le guide le plus complet sur le sujet en 2022.

Aujourd’hui nous allons apprendre beaucoup de chose:

• Ce que signifie l’expérience utilisateur pour Google
• Que se cache-t-il derrière les LCP, FID et CLS, les métriques des Core Web Vitals
• L’impact sur le SEO, le ranking et si les Core Web Vitals sont importants
• Quels sont les outils SEO gratuits pour mesurer les Core Web Vitals
• Comment auditer et optimiser les performances de votre site web

A la fin de guide, vous aurez toutes les cartes en main pour expliquer ce que sont les Signaux Web Essentiels, l’expérience de page pour Google, et analyser puis améliorer les performance de votre site web

Google et l’expérience utilisateur avant tout

Abant de rentrer dans le vif du sujet, ik est important de comprendre la mission de Google.

Le but de Google est de fournir la meilleure expérience aux utilisateurs de son moteur de recherche. 

On peut penser ce que l’on veut, mais Google façonne le Web et invite (ou force) les propriétaires de sites Web à suivre les “bonnes” recommandations.

La mission initiale de Google (en 1998) était d’organiser l’information mondiale et de la rendre universellement accessible et utile.

Comme l’a rappelé le moteur de recherche sur son blog à l’occasion de ses 20 ans, les principes fondamentaux du “Search” sont restés les mêmes, et voici les plus importants:

• Avant tout, Google se concentre sur l’utilisateur et s’efforce de répondre aux besoins d’information.
• Les informations fournies doivent être données rapidement, elles doivent être pertinentes et de la plus haute qualité. 

Ceci nous indique que pour optimiser du contenu pour le référencement (sur Google) il faut mettre l’utilisateur au centre et offrir des contenus complets, avec une information structurée et aussi une excellente expérience de page.

Google veut des pages de qualité et qui se chargent vite sur son moteur de recherche.

Regardons en détail le point au sujet de l’expérience de page, et ce que Google entend par là.

C’est quoi l’expérience de page dans les yeux Google

L’expérience de page ou Page Experience pour les anglophones correspond à un ensemble de signaux mesurés par Google afin de vérifier si votre page fournit une bonne expérience lors de la visite d’un internaute.

Par exemple, Google essaie de comprendre si votre page se charge vite et si elle est optimisée pour une navigation sur mobile. 

L’ensemble des signaux suivants sont pris en compte pour mesurer “une bonne expérience de page” dans la recherche Google :

• Mobile-friendly:  Votre page est optimisée pour un affichage sur téléphone portable
• Safe-browsing (navigation sécurisée): Votre page ne contient pas de contenu malveillant (malware) ou trompeur (phishing).
• HTTPS: La page est servie en HTTPS.
• Contenu facilement accessible: Votre page ne doit pas avoir d’éléments qui obstruent votre contenu principal comme avec l’affichage d’un popup qui couvre l’essentiel du contenu immédiatement après que l’utilisateur soit arrivé sur votre site.
• Core Web Vitals (Signaux Web essentiels): La page offre une bonne expérience utilisateur, en se concentrant sur les aspects du chargement, de l’interactivité et de la stabilité visuelle.

Depuis 2021, les Core Web Vitals (ou Signaux Web essentiels si vous préférez) sont pris en compte dans l’algorithme de recherche de Google et sont un facteur de classement (ranking). Ces signaus aide Google à définir l’expérience de page et tiennent compte de la rapidité d’un site Web.

Le tableau ci-dessous résume les signaux d’expérience de la page pris en compte dans le ranking mobile et au bureau.

Facteur de classement	Mobile	Bureau
Largest Contentful Paint (LCP)	OUI	OUI
Cumulative Layout Shift (CLS)	OUI	OUI
First Input Delay (FID)	OUI	OUI
HTTPS	OUI	OUI
Absence d’interstitiels intrusifs	OUI	OUI
Mobile-friendly	OUI	NON

Regardons maintenant en détail ce qui se cache derrière les acronymes LCP, FID et CLS et qui constituent les métriques de base des Core Web Vitals.

Core Web Vitals, vital pour le SEO?

Le but des Core Web Vitals est de mesurer l’expérience réelle de l’utilisateur. Ces signaux comprennent les performances de chargement, l’interactivité et la stabilité visuelle de la page.

Les Core Web Vitals sont constitués de 3 signaux majeurs:

• Largest Contentful Paint (LCP),
• First Input Delay (FID)
• Cumulative Layout Shift (CLS).

Nous resterons avec les termes anglais tout au long de l’article, mais pour ceux qui aiment bien les traductions voici comment on pourrait traduire les Core Web Vitals en Français:

• Largest Contentful Paint: Temps de rendu du plus grand élément de contenu visible 
• First Input Delay: Temps pour la première interaction
• Cumulative Layout Shift: La stabilité visuelle

Votre site Web passera le test Core Web Vitals si vous obtenez un score vert dans toutes les catégories.

Allons voir en détail ce qu’il se cache derrière Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

C’est quoi les Core Web Vitals et ils mesurent quoi exactement?

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) mesure les performances de chargement de la page. Pour être plus précis LCP mesure la vitesse de chargement perçue, c’est à dire combien de temps votre page prend pour afficher les premiers éléments important pour l’utilisateur.

Cela ne mesure pas le chargement complet de la page. Il faut bien comprendre la différence.

Pour offrir une bonne expérience à l’utilisateur, les sites doivent s’efforcer de faire en sorte que la plus grande partie du contenu initialement visible s’affiche en 2,5 secondes.

Bien sûr pour être dans les normes de Google. Mais je pense qu’on est tous d’accord que c’est plus agréable un contenu qui s’affiche directement – personne n’aime voir des pages blanches.

Une page Web s’affiche par étape. Ainsi lors des premières étapes le haut de votre page se charge, une fois que les éléments principaux affichés, le LCP sera atteint. Voilà !

Un LCP rapide permet de “rassurer” l’utilisateur quant à l’intérêt de votre page. On sait que les premières secondes sont clé pour éviter un “bounce back”.

Attention Google prend également en compte le temps passé (Dwell Time) comme signal de référencement, donc il vaut mieux garder un visiteur sur son site.

First Input Delay (FID)

Le First Input Delay (FID) mesure la réactivité du chargement de la page. Il mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec votre page (c’est-à-dire lorsqu’il clique sur un lien ou un bouton) et le moment où le navigateur est effectivement capable de répondre à cette interaction.

Donc si lors d’une interaction avec votre page comme le clic sur un bouton, la page met moins de 100ms à réagir, vous avez un bon FID.

On peut considérer que le FID mesure la frustration de l’utilisateur. En effet, il n’y a rien de plus frustrant que l’envoi d’un formulaire ou le clic sur un bouton qui met des secondes à déclencher l’étape d’après.

Zéro frustration égale un FID proche de zéro. Ou l’inverse…

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle et la fréquence à laquelle les utilisateurs subissent des changements de mise en page inattendus.

Un changement visuel se produit chaque fois qu’un élément visible de votre page change de position.

Par exemple si vous lisez un paragraphe et que soudainement celui-ci disparaît et se voit remplacer par un bouton (qui vient de finir son chargement). Il vous faut scroller plus bas pour reprendre votre lecture.

Le calcul du CLS se base sur différentes examinations et mouvements d’éléments au sein du navigateur pendant le chargement de la page.

Il faut avoir un score proche de zéro pour être considéré comme bon.

Les Core Web Vitals résumés

• LCP: Le temps pour voir les premiers éléments de la page, donne un sentiment de rapidité.
• FID: Le temps pour la première interaction (comme un clic), ceci indique une potentielle frustration de l’utilisateur si c’est trop lent.
• CLS: La stabilité visuelle afin d’éviter les “il est passé où le paragraphe que je lisais” par votre visiteur.

Comment Google mesure les Core Web Vitals de votre site Web ?

Comment Google va juger que votre site est performant ? Il est important de comprendre cela afin d’améliorer par la suite les Core Web Vitals.

Les données de Core Web Vitals proviennent de vrais utilisateurs.

Ce ne sont pas des données de laboratoire émulées par un ordinateur quelque part dans un centre de données.

Le rapport sur l’expérience utilisateur de Chrome (CrUx) fournit des mesures de l’expérience utilisateur

Les « données réelles provenant des utilisateurs réels » sont basées sur les statistiques collectées par Google via son navigateur Web Chrome.

Google ne collecte les données que pour les utilisateurs ayant choisi de participer au rapport Chrome User Experience Report ou CrUx pour les intimes.

Chaque fois qu’une personne visite un site web, des données sont envoyées à Google sur les performances et autres paramètres de la page web.

Aussi, si votre site Web ne génère pas suffisamment de trafic ou si votre public n’utilise pas Chrome pour une raison quelconque, il se peut que vous ne disposiez d’aucune information collectée.

Les données CRUX sont publiques et divers outils testant les Core Web Vitals, dont celui de Google, exploitent ces données pour proposer un rapport.

Gardez donc en tête que Google utilise les données de ce rapport pour évaluer le Core Web Vitals et l’impact sur le classement de votre site dans le moteur de recherche.

Données Core Web Vitals agrégées sur 28 jours

N’oubliez pas que les données agrégées par Google dans le rapport CRUX ne sont pas disponibles instantanément.

Il ne s’agit pas de données en temps réel mais aggrégées sur une periode de 28 jours.

Comprenez que si vous apportez des modifications à votre site Web, le rapport ne vous montrera l’impact que 28 jours plus tard.

L’impact des Core Web Vitals sur le SEO

Google utilise les Core Web Vitals dans son algorithme de classement des pages.

Ces signaux sont un facteur de classement:

• Depuis mai 2021 pour la recherche mobile
• Depuis février 2022 pour la recherche depuis un bureau

Un site web à chargement rapide et une expérience utilisateur optimale seront toujours un atout pour les utilisateurs de votre site.

Mais les Core Web Vitals changent-ils radicalement le référencement ?

Nous pouvons développer certains aspects de leur impact sur l’optimisation des moteurs de recherche.

Seuls 30 % des sites Web passent le test Core Web Vitals

Dans une étude de février 2022, Ahref indique que près de 33% des sites web passent le seuil des Core Web Vitals.

Le graphique ci-dessous montre également une augmentation de 10% depuis que les Core Web Vitals font partie du jeu du référencement en 2021.

Nous pourrions également lire le graphique dans l’autre sens et dire que : 70% des sites web ne passent PAS les Core Web Vitals.

Je suppose qu’il y a deux raisons pour lesquelles les sites Web ne passent pas les Core Web Vitals (ou pourquoi les propriétaires de sites Web n’investissent pas pour passer les Core Web Vitals) :

• Raison 1 : Il est difficile de passer le test, surtout si votre public vient d’un pays où la connexion internet est mauvaise.
• Raison 2 : Les propriétaires de sites Web investissent leur temps et leurs ressources dans d’autres aspects du référencement, tels que le contenu, la création de liens et la sensibilisation à la marque, qui pourraient avoir un impact plus important sur les performances de leur site Web.

Core Web Vitals: Un facteur d’égalité

Google ne dévoilera jamais sa recette secrète ni le poids exact d’un facteur de classement. Mais nous avons pu apprendre de diverses sources chez Google que les Core Web Vitals sont des signaux de classement mineurs et différentiteurs.

Qu’est-ce que cela signifie ?

Si deux pages sont plus ou moins égales en termes de classement, la page la plus performante sera avantagée. Ainsi, la page ayant la meilleur note aux Core Web Vitals l’emportera sur l’autre. En théorie.

Vous pouvez en apprendre plus dans cette vidéo.

Nous pourrions donc considérer que les « Core Web Vitals » ne sont pas le facteur de classement le plus critique, et que les autres facteurs qui font de votre page ou site web une bonne expérience pour l’utilisateur sont l’offre d’un contenu de qualité.

Le contenu le plus pertinent sera toujours le premier

Google indique que les pages contenant les meilleures informations, même si l’expérience des pages est moindre, auront un meilleur classement.

La qualité du contenu (et certainement le nombre de backlinks) auront pour l’instant la priorité sur l’expérience de page.

John Mueller lui-même a déclaré : « La pertinence reste de loin la plus importante. » (Source)

Toutefois, comme nous l’avons dit précédemment, dans les cas où les pages peuvent être similaires en termes de pertinence, les pages ayant la meilleure expérience seront classées en premier.

Les Top Stories sur mobile

Avant les Core Web Vitals, les contenus positionnés dans les Top Stories sur mobile étaient exclusivement au format AMP. 

Pour rappel, le format AMP offre des mécanismes permettant un chargement rapide des pages sur mobile, et ce format est aussi soutenu directement par Google.

Maintenant, Google indique que les Top Stories accueillent toutes pages passant le test des Core Web Vitals. 

Ce qu’il faut comprendre : Seules les pages avec une excellente expérience utilisateur et un bon temps de chargement seront éligibles pour la section Top Stories, sans forcément utiliser la technologie AMP.

Plus d’impact sur les ventes ou la conversion que sur le référencement

Il n’y a pas beaucoup d’études montrant des changements radicaux dans le classement sur les SERP avec des Core Web Vitals améliorés.

Il est difficile d’isoler ces metriques et d’identifier leur impact sur le classement dans Google, car d’autres facteurs interviennent toujours dans le classement.

Cependant, l’impact sur le site et les taux de conversation peuvent être mieux mesurés, et certaines études montrent une augmentation des ventes ou de la conversion une fois que les métriques Core Web Vitals sont améliorées.

Par exemple, grâce à un test A/B et à une amélioration du LCP, Vodafone a réalisé 8% de ventes supplémentaires. (Trouvez plus de détails ici et d’autres études de cas).

Il semble évident qu’une meilleure expérience utilisateur et un site web rapide génèrent plus de ventes qu’un site web lent.

Les outils SEO pour tester les Core Web Vitals

Pour comprendre ce qui ne va pas avec votre site Web et améliorer les Core Web Vitals, vous devez tester et mesurer ces paramètres.

Un grand nombre d’outils SEO gratuits sont disponibles pour mesurer les Core Web Vitals.

Nous allons voir maintenant:

• Les outils Google pour tester les Core Web Vitals
• Les outils SEO gratuits proposés par des sociétés tierces pour mesurer les Core Web Vitals.

Les outils de Google pour mesurer le Core Web Vitals

Les Core Web Vitals sont un facteur de classement pour la recherche Google. Il est logique que Google propose un ensemble d’outils pour aider les référenceurs et les webmestres à comprendre si leur site Web a franchi ou non le seuil des LCP, FID et CLS.

Le Chrome UX Report (CrUX)

Le Chrome UX Report (CrUX) est un ensemble de données publiques sur l’expérience réelle des utilisateurs sur des millions de sites web. 

Ces données sont récupérées par Google lorsqu’un utilisateur accepte d’envoyer des statistiques via Chrome ou autres services. (Vous savez cette checkbox dont on ne connaît pas l’utilité, maintenant on sait…)

Cette base de données est accompagnée d’une API qui permet à tout développeur de récupérer des données de performance et pour n’importe quel site : votre site ou le site web du concurrent.

C’est le seul moyen fiable pour savoir comment vos utilisateurs ressentent les performances de votre site.

Gardez à l’esprit que les données fournies par CrUX sont une moyenne mobile sur les 28 jours précédents. Il ne s’agit donc pas de données en temps réel.

Il faudra des notions de développement afin d’exploiter cette base de données et l’intégrer dans vos processus de diagnostic de votre site web.

Pour commencer avec l’API CrUX, c’est par ici.

Lighthouse

Lighthouse est un outil d’audit automatisé et produit un rapport de diagnostics pour améliorer l’expérience des utilisateurs en vous indiquant les problèmes trouvés sur votre page.

Lighthouse est directement intégré dans les outils de développement Chrome, sous le panneau « Audits ». (Pour ouvrir les outils de développement Chrome, cliquez droit sur une page et ensuite sélectionner “Inspecter”.)

Il est possible d’installer Lighthouse via une extension chrome.

A noter: Lighthouse est un outil de « laboratoire » et que, contrairement aux données du CrUX, il ne présente pas de données de terrain / les données réelles.

Page Speed Insights

Page Speed Insights est accessible depuis ce lien et vous donnera des informations la vitesse de chargement d’une page web afin d’optimiser ses performances.

PSI rapporte des données de terrain et des données de laboratoire :

• Les données de terrain proviennent de Crux
• Les données de laboratoire proviennent de Lighthouse

Ne vous embrouillez pas si les données de terrain et de laboratoire ne donnent pas exactement les mêmes résultats.

Web Vitals

Web Vitals est une extension Chrome qui permet de voir en un coup d’oeil comment votre page est mesurée contre les metric LCP, FID, CLS.

Le panel Performance du Chrome DevTools

Le panneau Performance de Chrome DevTools comporte une nouvelle section Expérience qui peut vous aider à détecter les changements de présentation inattendus.

Cette section est utile pour trouver et corriger les problèmes d’instabilité visuelle de votre page qui contribuent au décalage cumulatif de la mise en page (CLS).

Les signaux web essentiels depuis Google Search Console

Un rapport sur les « Signaux web essentiels » est disponible depuis Google Search Console.

Ce rapport vous indique les groupes de pages de votre site qui nécessitent une attention particulière, sur la base de données réelles provenant du CrUX.

Veuillez noter que la Search Console regroupe les pages similaires. Google les regroupe en fonction de similitudes telles que le modèle ou le type.

web.dev

web.dev vous permet de mesurer les performances de votre page dans le temps. Les données sont les même que celle du rapport Page Speed Insight.

Outils de référencement gratuits pour tester le Core Web Vitals

thruuu

Thruuu est un formidable analyseur de SERP et offre de nombreuses fonctionnalités, notamment une analyse de la performance des SERP.

Vous pouvez comparer la vitesse des pages et les Core Web Vitals de chaque page de la SERP de Google. C’est vraiment utile pour faire une analyse concurrentielle et comprendre si vous devez optimiser votre site pour gagner des positions de classement.

Reddico SERP Speed

L’analyseur SERP Speed de l’agence Reddico se concentre uniquement sur la performance des pages. Il fournit un rapport sur les 10 premières pages de la SERP ainsi que des indications pour améliorer votre site Web.

Layout Shift GIF Generator

Layout Shift GIF Generator, comme son nom l’indique, génère un GIF montrant le Cumulative Layout Shift (CLS) sur une page web.

L’outil vous aide à déterminer rapidement la partie mobile de votre page Web.

PageSpeed Compare

Avec PageSpeed Compare, vous pouvez entrer plusieurs URL et afficher un rapport comparant les métriques de Core Web Vital.

L’interface utilisateur est assez soignée, et en un coup d’œil, vous pouvez obtenir une excellente comparaison des performances des pages et d’autres données provenant de l’API Google Page Speed Insights.

Waterfaller

Waterfaller est un outil gratuit qui aide à résoudre et à comprendre les problèmes de Core Web Vitals sur un site Web.

Il génère un audit ou un guide parfaitement adapté à une équipe de développement. Le guide représente des « user stories » pour les développeurs afin d’indiquer les tâches à effectuer.

Par exemple, une tache pourrait être « En tant que développeur, je veux que le temps de réponse du serveur de documents racine soit inférieur à 500 ms afin d’améliorer toutes les Core Web Vitals. »

En plus de cela, la tâche peut être envoyée à un tableau Trello. À partir de là, vous pouvez gérer l’amélioration de votre site Web avec votre équipe.

Mesurer les Core Web Vitals avec Google Sheets

Si vous êtes un fan de Google Sheet, celui-ci est pour vous.

Voici une Google Sheet qui automatise la mesure des Core Web Vitals pour plusieurs sites Web. Vous pouvez saisir plusieurs URL et visualiser l’évolution de la métrique dans le temps.

Analyser les Core Web Vitals étape par étape avec Google Search Console

La Google Search Console est le meilleur compagnon des webmaster et des spécialistes du référencement qui souhaitent se placer à la première place de Google.

La Search Console fournit des informations essentielles sur la couverture d’indexation de votre site Web, les performances des résultats de recherche et bien plus encore.

Étant donné que l’expérience de la page et les Core Web Vitals constituent un facteur de classement pour Google, des informations connexes sont également disponibles directement dans la Search Console.

Dans cet section, nous allons examiner, étape par étape, comment exploiter la Search Console (ainsi que d’autres outils Google) pour auditer les problèmes liés aux Core Web Vitals de votre site.

Etape 1 – Comprendre la Search Console et le rapport d’experience

Voici quelques informations à connaître sur la Search Console et l’expérience des pages :

• Toutes les informations relatives à l’expérience des pages et aux Core Web Vitals sont affichées dans le menu Expérience.
• La Search Console affiche des données de terrain provenant du Chrome User Experience Report (CrUX). Il s’agit de données réelles sur les utilisateurs qui visitent votre site Web.
• Les données ne sont pas mises à jour en temps réel et sont basées sur les 28 derniers jours d’activité.
• Les métriques Core Web Vitals (FID, LCP, CLS) sont agrégées au niveau de la page et regroupées par pages similaires dans Search Console.
• Les problèmes dans la Search Console sont liés à un groupe de pages présentant des problèmes similaires.
• Les pages de votre site Web passent l’évaluation Core Web Vital si les 75e percentiles des trois métrique (LCP, FID, CLS) sont bons. En d’autres termes, si 75 % des pages affichées obtiennent le meilleur score.
• Les pages sont évaluées séparément pour les mobiles et les ordinateurs de bureau.

Le premier sous-menu du panneau Expérience présente l’aperçu de l’expérience des pages pour les mobiles et les ordinateurs de bureau.

Vous pouvez identifier le pourcentage de bonnes URL sur votre site web au fil du temps et l’impression totale sur la recherche de ces bonnes URL.

Des informations sur les principaux signaux sont disponibles :

• Core Web Vitals : Combien d’URL échouent au test ?
• Utilisabilité mobile : S’il y a des problèmes liés à l’utilisabilité mobile.
• HTTPS : indique si votre site Web utilise HTTPS ou non.

Évidemment, votre objectif est d’obtenir tout en vert.

Nous allons maintenant voir comment analyser les problèmes relatifs aux Core Web Vitals.

Etape 2 – Ouvrir les rapports Core Web Vitals à partir de la Search Console

Allez dans Google Search Console et ouvrez le rapport sur les “Core Web Vitals” afin d’identifier les pages qui nécessitent une attention particulière.

Vous trouverez deux rapports, un pour le mobile et un pour le bureau.

Les rapports indiquent le nombre d’URL médiocres, à améliorer et bonnes au fil du temps.

Cliquez sur Ouvrir le rapport pour obtenir plus d’informations sur les problèmes.

Etape 3 – Identifier les problèmes regroupés par pages

Une fois que vous avez ouvert le rapport sur les mobiles ou les ordinateurs de bureau, vous obtenez plus de détails sur les problèmes d’expérience de page de votre site Web.

Dans le panneau « Détails », le type de problème est répertorié, et vous pouvez également voir combien d’URL ou de pages sont concernées.

Lorsque vous cliquez sur un problème, les pages présentant un problème similaire s’affichent.

Pour voir la liste complète des pages liées, cliquez sur la page d’exemple, et un panneau affichera toutes les URLs similaires.

Le même problème est susceptible de se produire sur plusieurs pages de votre site Web, surtout si vous utilisez un système de gestion de contenu tel que WordPress.

En effet, les pages partagent un modèle similaire, et le problème peut donc être résolu en améliorant un modèle de page (par exemple, le modèle d’article).

Si nous nous concentrons sur le problème actuel, vous pouvez voir qu’il s’agit d’un problème avec le CLS.

Pour rappel, un bon CLS est inférieur à 0,1, et un mauvais est supérieur à 0,25. Le CLS agrégé indique une valeur de 0,20, il doit donc être amélioré.

Étape 4 – Analyse des pages avec PageSpeed Insights

Nous n’allons pas ouvrir toutes les pages pour analyser le problème, mais nous pouvons nous concentrer sur l’exemple fourni dans le rapport et corriger celui-ci.

Vous pouvez cliquer directement sur le bouton ouvrant PageSpeed Insights dans le panneau de droite de la Search Console.

Comme nous l’avons vu précédement, PageSpeed Insights est un outil de Google qui rapporte des données de terrain et des données de laboratoire :

• Les données de terrain proviennent de Crux
• Les données de laboratoire proviennent de Lighthouse

Le premier panneau montre les données de terrain ou les utilisateurs réels de mon site Web.

Malheureusement, comme il n’y a pas assez d’informations pour l’exemple d’URL, il revient à l’origine de mon site web, qui est la page d’accueil de mon site Web.

Si cela se produit, vous pouvez exécuter le rapport PageSpeed Insights avec une autre URL du groupe qui reçoit plus de trafic.

Dans mon cas, la page d’accueil n’est pas pertinente car il ne s’agit pas du même modèle utilisé.

Le deuxième panneau ci-dessous affiche une analyse détaillée à partir d’un environnement simulé.

Vous y trouverez le premier rapport avec des suggestions d’amélioration.

Dans mon cas, il semble que les ressources CSS et Javascript bloquent le rendu de ma page. Je devrais examiner en détail ce qui se passe ici.

Les principales métriques des Core Web Vitals sont mises en évidence, et vous pouvez voir celles qui passent et celles qui échouent.

Vous trouverez ci-dessous un audit qui a indiqué certaines opportunités et possibilités d’amélioration.

Vous pouvez également filtrer la vue et afficher les problèmes liés uniquement au PCF, au LCP ou au CLS.

Étape 5 – Résoudre les problèmes de vos pages

À la suite de cette première analyse, vous avez maintenant identifié de nombreux problèmes qui doivent être résolus.

Chaque site Web a ses problèmes spécifiques, et cela nécessite souvent des compétences en développement, notamment des connaissances en développement frontend (HTML, CSS, Javascript).

Dans la prochaine section, nous allons voir les meilleures pratiques pour optimiser un site Web et les Core Web Vitals.

Étape 6 – Valider les problèmes dans la Search Console

Au cours de la phase de résolution, vous tenterez d’apporter différentes modifications à votre site Web et vous relancerez l’audit avec les différents outils pour tester les vitales Web de base.

Le seul moyen de tester en mode développement sera de s’appuyer sur un environnement simulé et des données de laboratoire.

Vous pouvez exécuter votre audit avec les outils suivants :

• PageSpeed Insights
• web.dev/measure/
• Lighthouse

Une fois que vous êtes satisfait de la résolution de vos problèmes de performance, vous pouvez retourner dans la Search Console et valider la correction.

Veuillez noter que la validation prendra jusqu’à 28 jours.

En effet, Google ne validera pas par rapport à des données de laboratoire mais par rapport à des données réelles provenant du rapport sur l’expérience des utilisateurs de Chrome (CrUX). Ces données ne sont pas en temps réel et sont agrégées pendant 28 jours.

Conseils et bonnes pratiques pour l’optimisation des Core Web Vitals votre site web

Les problèmes d’optimisation des sites web sont souvent dûs à un problème technique. 

Pour les problèmes liés à la page (côté client), comme le CSS et Javascript, un développeur web sera utile pour modifier le code.

Pour les problèmes liés à votre CMS ou infrastructure (côté serveur), il faudra un développeur backend ou un DevOps.

Vous comprendrez qu’il faut un certain bagage technique pour résoudre la plupart des problèmes d’optimisation, ou contacter un spécialiste en développement web.

Néanmoins certains points d’amélioration sont assez simples. Parcourons-les en premiers.

Optimiser les problèmes de performance web pour les non développeurs

Voici une liste de points qui sont accessibles à tout le monde:

• Compressez vos images 
• Remplacez les GIF animés par des vidéos pour accélérer le chargement des pages
• Utilisez des formats d’image de nouvelle génération comme WebP ou JPEG 2000 (mais malheureusement ces formats ne sont pas encore supporté par tous les navigateurs)

Ce sont des bonnes pratiques qui pourront déjà optimiser votre site web.

Allez plus loin avec ce guide sur les images.

Optimiser les problèmes de performance web pour les utilisateurs avancés

Si vous êtes développeur ou un utilisateur aguerri, qui n’a pas peur de mettre les mains dans le système, voici quelques recommandations et bonnes pratiques:

• Réduire la taille de chaque page à moins de 500KB (page + toutes les ressources).
• Maintenir le nombre total de ressources par page à moins de 50 (idéal pour les mobiles).
• Envisager la mise en œuvre de page AMP, qui peut résoudre de nombreux problèmes de chargement sur les téléphones mobiles
• Lazyloader vos images
• Utiliser un CDN pour vos images et autres assets

Et pour continuer avec les points critiques qui nécessitent le support d’un développeur, détaillons des problèmes courants liés aux performances.

Utiliser une image pour desktop et une autre pour mobile

Il est possible de créer des variations d’une même image et de les indiquer dans le code HTML. Ainsi en fonction de la taille de l’écran, la bonne image à la bonne taille sera affichée.

<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

Ne pas LazyLoader la première image

Une fois que vos images sont optimisées et compressées, vous pouvez encore aller plus loin en les chargeant en mode « Lazyload ».

Le Lazyload signifie que les images ne sont chargées que lorsqu’un utilisateur commence à défiler et que l’image devient visible à l’écran, et cela aura un impact sur le temps de chargement et le score LCP.

MAIS, vous ne devez PAS charger Lazyloader les premiers éléments de votre site. Comme vous pouvez le lire ici, le chargement LazyLoad des images de la première partie visible de la page peut affecter les performances du LCP.

Si vous identifiez que votre LCP est une image, désactivez le lazyloading sur cette première image.

Eliminer les ressources bloquantes

Il y a certains Javascript et CSS qui ne sont pas utiles lors des premiers instants du chargement de votre page. 

Identifier ces ressources avec la Chrome DevTools depuis le tab Coverage. Celui-ci vous indique les ressource qui sont exécutées et celles qui sont “juste” chargées. 

Les ressources “juste”chargées pourront être exécutées plus tard avec l’attribut async or defer.

Ainsi les premiers éléments se chargeront plus rapidement et votre LCP sera amélioré.

Enlever les CSS et JS inutiles

Dans vos fichiers CSS et JS il y a des bouts de code qui ne sont jamais utilisés, et malgrés cela ils sont “lus” entièrement lors du chargement de votre page. Ce sont donc des données chargées et traitées inutilement.

Le tab Coverage de la Chrome DevTools vous sera encore utile pour comprendre le pourcentage de code non nécessaire dans vos fichiers CSS ou Javascript.

Ensuite il faudra aller vérifier dans chaque fichier le code, et l’enlever si nécessaire.

Compresser vos ressources du côté serveur

Lighthouse détecte les fichiers qui n’ont pas de compression (content-encoding) de type br, gzip ou deflate. 

Pour ces fichiers il est recommandé de les compresser. Cette opération doit se faire du coté serveur comme par exemple dans votre CMS.

Minifier vos CSS et JS

Le CSS et JS peuvent être minifier, c’est à dire afficher sur une ligne et donc prendre moins de place. C’est une opération assez simple et peut être réalisée avec un outil en ligne. 

Inclure toujours des attributs de taille sur vos images et éléments vidéo

Cette approche garantit que le navigateur peut allouer la bonne quantité d’espace dans le document pendant le chargement de l’image.

Tester avant mettre en ligne vos changements

Le dernier conseil: tester correctement vos modifications. Ne changez pas directement sur votre site web de production.

Pour résumer

Les Core Web Vitals et l’expérience de page est sont des sujets assez complexes et implique des connaissances techniques pour pouvoir les résoudre.

Vous devez vous demander si cela en vaut la peine et investir du temps dans une amélioration qui n’influence pas forcément votre référencement.

Gardez en tête que Google mise tout sur l’expérience utilisateur, et que sur le long terme ses facteurs prendront de l’ampleur. 

Lors de vos prochains projets, commencez dès le début à penser optimisation.