Cet article est le 3ᵉ volet de notre série “Optimiser son site avec les outils d’o2switch”.
- Volet 1 : Introduction – présentation des outils d’optimisation chez o2switch
- Volet 2 : Activer LiteSpeed Cache chez o2switch
- Volet 3 : Core Web Vitals : les 5 indicateurs essentiels de performance web (vous êtes ici)
- Volet 4 : Configurer LiteSpeed Cache avec WordPress : les réglages recommandés
- Volet 5 : Redis / Memcached
- Volet 6 : Varnish
- Volet 7 : PageSpeed
Cette feuille de route peut évoluer au fil des articles. Par exemple, certains sujets (comme le cache objet Redis/Memcached) pourront être traités en un seul article, tandis que d’autres demanderont deux volets (activation + configuration).
Pourquoi ces indicateurs comptent pour votre site WordPress
Avant de plonger dans l’optimisation de votre site, il est essentiel de comprendre ce que Google mesure réellement lorsqu’il évalue la performance d’un site. Ces indicateurs, appelés Core Web Vitals, déterminent comment vos visiteurs perçoivent la rapidité et la fluidité d’un site, ce qui impacte directement l’expérience utilisateur et le référencement naturel (SEO).
Depuis 2024, Google s’appuie sur trois Core Web Vitals officielles : LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et INP (Interaction to Next Paint). D’autres métriques comme le FCP, le TBT ou le Speed Index complètent l’analyse et permettent d’affiner le diagnostic.
Ces indicateurs ne servent pas uniquement à “faire plaisir à Google” : ils vous aident à pointer les ajustements techniques (cache, CDN, serveur) ou de design à effectuer pour améliorer l’expérience vécue par les visiteurs.
Comment lire les résultats de PageSpeed Insights
Quand vous testez une page dans PageSpeed Insights, deux types de données s’affichent. Les distinguer est essentiel pour comprendre vos scores et interpréter correctement les résultats.
1. Les données réelles (CrUX)
Situées en haut du rapport, ces données proviennent du Chrome User Experience Report (CrUX).
Elles mesurent l’expérience vécue par de vrais utilisateurs Chrome et s’appuient sur les 28 derniers jours de navigation. Ces valeurs reflètent la réalité du terrain : type d’appareil, qualité de connexion, localisation…
Elles sont identiques à celles affichées dans le rapport “Signaux Web essentiels” de la Search Console. C’est dans ce bloc que Google affiche les Core Web Vitals officielles : LCP, CLS et INP.
Bon à savoir
Si votre site ne reçoit pas encore assez de visites pour générer des données INP, aucune valeur ne s’affichera dans ce bloc. Dans ce cas, fiez-vous au TBT (Total Blocking Time) visible dans la section suivante : il offre une bonne approximation technique de la réactivité du site et aide à repérer les scripts bloquants.
2. Les données de test (Lab data)
Sous le bloc CrUX, PageSpeed Insights exécute un test ponctuel simulé dans un environnement standard (navigateur Chrome, réseau 4G, appareil moyen). Ces mesures reflètent la performance au moment du test et permettent de diagnostiquer immédiatement ce qui freine le chargement :
- scripts ou extensions trop lourds,
- images non optimisées,
- absence de cache serveur ou navigateur.
On y retrouve des métriques telles que FCP, TBT et Speed Index, très utiles pour analyser les causes d’un score faible.
Pourquoi vos données CrUX peuvent rester inchangées après des optimisations
Après avoir amélioré la performance de votre site (mise en cache, compression d’images, scripts différés…), il est normal que les données CrUX restent encore inchangées. Elles sont calculées sur une moyenne glissante de 28 jours : les effets réels seront visibles dans les semaines suivantes.
En revanche, les données de test se mettent à jour instantanément. Si vos scores “lab” s’améliorent immédiatement, c’est le signe que vos optimisations fonctionnent et les valeurs CrUX suivront à mesure que vos visiteurs profiteront du nouveau site.
À retenir
- Si l’INP est absente, observez le TBT : c’est votre meilleur indicateur de réactivité immédiate.
- Le haut du rapport = données CrUX (réelles, sur 28 jours, partagées avec la Search Console).
- Le bas du rapport = données de test (ponctuelles, utiles au diagnostic).
Les métriques essentielles dans PageSpeed Insights
Avant d’entrer dans le détail, voici un aperçu global des principaux indicateurs de performance affichés dans un rapport PageSpeed Insights. Ces valeurs servent à évaluer la vitesse d’affichage, la stabilité visuelle et la réactivité du site, que ce soit à partir de données réelles (CrUX) ou de tests ponctuels (Lab Data).
Le tableau récapitulatif
| Métrique | Type | Ce qu’elle mesure | Bon seuil | Source principale |
|---|---|---|---|---|
| FCP – First Contentful Paint | Complémentaire | Moment où le premier élément visible apparaît | ≤ 1,8 s | CrUX + Lab |
| LCP – Largest Contentful Paint | Core Web Vital | Délai d’affichage du contenu principal (image, titre, vidéo) | ≤ 2,5 s | CrUX + Lab |
| CLS – Cumulative Layout Shift | Core Web Vital | Stabilité visuelle du contenu pendant le chargement | ≤ 0,1 | CrUX + Lab |
| INP – Interaction to Next Paint | Core Web Vital | Réactivité globale du site après une interaction | ≤ 200 ms | CrUX |
| TBT – Total Blocking Time | Complémentaire | Temps total pendant lequel le navigateur est bloqué par du JavaScript (proxy de l’INP) | < 200 ms | Lab |
| SI – Speed Index | Complémentaire | Vitesse moyenne à laquelle le contenu visible s’affiche | ≤ 3,4 s | Lab |
Quand et où sont mesurées les principales métriques
| Métrique | Moment de la mesure | Type de mesure |
|---|---|---|
| FCP | Dès le début du chargement, au moment où le premier élément s’affiche à l’écran | Instantanée |
| LCP | Pendant le chargement, quand l’élément principal (image, titre, vidéo) devient visible | Instantanée |
| CLS | Pendant toute la durée du chargement, voire après, si des éléments bougent | Cumulative |
| INP | Lorsqu’un utilisateur interagit (clic, saisie, ouverture de menu) | Basée sur les interactions réelles |
| TBT | Entre le FCP et le moment où la page devient interactive | Calculée sur la période de blocage du navigateur |
| Speed Index (SI) | Tout au long du rendu visuel de la page | Moyenne de la vitesse d’affichage |
Revue synthétique de chacune des métriques
Cette partie vous aide à comprendre rapidement le rôle de chaque métrique, ce qu’elle signifie pour vos visiteurs, et comment agir concrètement.
First Contentful Paint (FCP)
Ce que ça mesure : le temps entre le début du chargement et l’apparition du premier élément visible (texte, image, logo…).
Objectif FCP : ≤ 1,8 s sur 75 % des visites.
Résumé FCP : « quand je vois quelque chose s’afficher ».
- Astuce : placez le CSS critique dans le
<head>et différer les scripts non essentiels. - À surveiller sous WordPress :
- Réactivité du serveur et cache actif
- Feuilles CSS ou scripts bloquants dans le
<head>. - Images visibles dès l’arrivée (évitez le lazy-load sur le logo ou la bannière principale).
Largest Contentful Paint (LCP) (Core Web Vital)
Ce que ça mesure : le temps nécessaire pour afficher l’élément principal de la page (image héros, vidéo ou titre).
Objectif LCP : ≤ 2,5 s.
Résumé LCP : « quand je vois le contenu principal apparaître ».
- Astuce : préchargez l’image principale (
<link rel="preload">) et marquez-la avecfetchpriority="high"pour accélérer le rendu. - À surveiller sous WordPress :
- Images trop lourdes dans la bannière.
- Feuilles CSS complexes ou différées trop tard.
- CDN ou cache mal configuré.
Cumulative Layout Shift (CLS) (Core Web Vital)
Ce que ça mesure : la stabilité visuelle d’une page pendant le chargement.
Objectif CLS : ≤ 0,1.
Résumé CLS : « combien de choses bougent pendant le chargement ».
- Astuce : définissez
width,heightouaspect-ratiosur vos médias pour réserver l’espace avant affichage. - À surveiller sous WordPress :
- Images ou iframes sans dimensions définies.
- Bannières ou publicités injectées sans espace réservé.
- Polices web chargées trop tard.
Interaction to Next Paint (INP) (Core Web Vital)
Ce que ça mesure : la réactivité globale du site après une interaction (clic, saisie, ouverture de menu).
Objectif INP : ≤ 200 ms.
Résumé INP : « le délai entre mon clic et la réaction du site ».
Si aucune donnée INP n’est disponible, appuyez-vous sur le TBT comme indicateur de réactivité.
- Astuce : limitez le nombre de scripts exécutés simultanément et chargez les scripts non critiques avec
deferouasync. - À surveiller sous WordPress :
- Extensions injectant beaucoup de JavaScript.
- Animations ou transitions mal optimisées.
- Scripts qui bloquent le thread principal.
Total Blocking Time (TBT)
Ce que ça mesure : le temps total pendant lequel le navigateur reste bloqué par du JavaScript, entre le FCP et la première interaction possible.
Objectif TBT : < 200 ms.
Résumé TBT : « combien de temps la page semble prête, mais ne réagit pas encore ».
- Astuce : chargez les scripts en
deferouasync, et désactivez ceux inutiles sur certaines pages. - À surveiller sous WordPress :
- Scripts non différés.
- Constructeurs de page lourds.
- Suivis externes (Google Analytics, pixels marketing, etc.) mal configurés.
Speed Index (SI)
Ce que ça mesure : la vitesse moyenne à laquelle le contenu visible s’affiche dans la fenêtre du navigateur.
Objectif SI : ≤ 3,4 s sur mobile.
Résumé SI : « à quelle vitesse je vois tout le contenu visible ».
- Astuce : optimisez tout ce qui améliore le FCP et le LCP : ils influencent directement le Speed Index.
- À surveiller sous WordPress :
- Temps de réponse serveur.
- Trop de ressources simultanées (CSS, JS, images).
- Scripts externes retardant le rendu.
Comment agir sur ces métriques
Toutes les métriques ne se corrigent pas de la même manière.
Certaines dépendent de la configuration serveur (TTFB, cache, CDN), d’autres de la mise en page ou du code JavaScript. Ce tableau vous aidera à identifier où concentrer vos efforts selon votre profil technique.
| Métrique | Champ d’intervention | Exemples d’actions |
|---|---|---|
| FCP | Technique / serveur | Optimiser le TTFB, activer le cache LiteSpeed, minifier CSS/JS. |
| LCP | Design / contenu | Alléger les images du héros, ajuster les blocs visibles, utiliser un CDN. |
| INP / TBT | Technique / code | Différer les scripts, limiter le JS des extensions, charger les suivis en différé. |
| CLS | Intégration / ergonomie | Fixer les dimensions des médias, stabiliser les polices, réserver l’espace pub. |
| SI | Global / coordination | Ajuster cache + CDN + ordre de chargement, tester sur mobile. |
Les bons outils pour mesurer vos performances
| Objectif | Outil recommandé | Utilisation |
|---|---|---|
| Mesurer les Core Web Vitals réels | PageSpeed Insights | Évalue FCP, LCP, CLS, INP (et TBT en lab) sur mobile et desktop. |
| Suivre les données CrUX sur 28 jours | Google Search Console – rapport Signaux Web essentiels | Visualise l’évolution réelle des métriques (LCP, CLS, INP). |
| Visualiser le rendu visuel | Chrome DevTools → Performance | Identifie les “long tasks” et décalages de layout (CLS). |
Pour aller plus loin : suivre vos données CrUX dans le temps
CrUX Visualizer est un outil officiel de Google qui permet de consulter et comparer l’évolution des Core Web Vitals d’un site sur la base des données CrUX publiques.
Vous pouvez y saisir n’importe quelle URL ou origine (domaine) et visualiser :
- les distributions de LCP, CLS et INP sur 28 jours ;
- les différences entre mobile et desktop ;
- et la tendance de vos performances réelles dans le temps.
À retenir
Les Core Web Vitals mesurent avant tout la perception de vos visiteurs : vitesse, stabilité et réactivité.
Elles ne traduisent pas seulement la puissance technique d’un serveur, mais la qualité de l’expérience vécue sur votre site.
Chaque amélioration, cache, CDN, compression, scripts différés, agit presque toujours sur plusieurs métriques à la fois. L’objectif n’est pas de “chasser le score parfait”, mais de construire un site rapide, stable et fluide à utiliser.
Cet article est le 3ᵉ volet de notre série “Optimiser son site avec les outils d’o2switch”.
- Volet 1 : Introduction – présentation des outils d’optimisation chez o2switch
- Volet 2 : Activer LiteSpeed Cache chez o2switch
- Volet 3 : Core Web Vitals : les 5 indicateurs essentiels de performance web (vous êtes ici)
- Volet 4 : Configurer LiteSpeed Cache avec WordPress : les réglages recommandés
- Volet 5 : Redis / Memcached
- Volet 6 : Varnish
- Volet 7 : PageSpeed
Cette feuille de route peut évoluer au fil des articles. Par exemple, certains sujets (comme le cache objet Redis/Memcached) pourront être traités en un seul article, tandis que d’autres demanderont deux volets (activation + configuration).
Merci, pour une fois qu’il n’est pas indiqué d’ajouter un loading= »lazy » sur toutes les images au prétexte d’améliorer la performance web, ça change ! L’optimisation pour les Core Web Vitals est un processus très fin qui doit prendre en compte énormément de paramètres. Une des erreurs les plus communes est d’appliquer bêtement des recommandations génériques qui peuvent être contre-productives.
Bonjour, merci pour votre commentaire 🙂
Oui, je compte en parler dans un prochain article et je vous rejoins. L’optimisation d’un site, ce n’est pas une simple liste de cases à cocher. Cela peut être complexe et long… ou pas. C’est au cas par cas.