Core Web Vitals – notre guide complet pour tout comprendre

Core Web Vitals guide complet

Les Core Web Vitals ou Signaux Web Essentiels font partie intégrante de l’expérience utilisateur. Ils mesurent la vitesse, la stabilité et la réactivité d’une page Web.

L’expérience utilisateur est un ensemble de mesures mis en place par Google pour déterminer si une page offre un bon confort d’utilisation aux internautes qui visitent votre site. Par exemple, le temps de chargement, la réactivité, la compatibilité avec les écrans mobiles…

L’expérience utilisateur est divisée en 3 secteurs différents: 

  • Les Core Web Vitals ou Signaux Web Essentiels.
  • L’ergonomie mobile.
  • L’utilisation du protocole HTTPS.

Depuis la mise à jour de son algorithme en 2021, Google a fait de l’expérience utilisateur et des Signaux Web Essentiels en particulier, un critère très important pour déterminer le classement d’une page sur son moteur de recherche.

Cette mise à jour a eu un impact négatif sur le référencement d’un très grand nombre de sites qui ne satisfaisaient pas suffisamment aux nouveaux critères implantés par Google. Selon différentes études, plus de 70 % des sites n’obtiennent pas un score satisfaisant au Core Web Vitals

Si le contenu d’un article demeure le critère le plus important en termes de référencement, l’expérience utilisateur fera la différence parmi les sites traitant du même sujet avec une qualité équivalente. C’est pourquoi beaucoup de sites, depuis cette mise à jour, ont pu constater une chute drastique de leur trafic.

Cet article a pour but de vous aider à bien comprendre ce que sont les différents indicateurs qui composent les Core Web Vitals et comment faire pour les améliorer.

Comment mesurer les Core Web Vitals (Signaux Web Essentiels) ?

Avant de voir en détails tous les indicateurs qui composent les Core Web Vitals de Google, voyons comment les mesurer.

Google PageSpeed Insights est la façon la plus pratique pour tester les Core Web Vitals d’une page.

Cet outil gratuit affiche de manière très claire, pour chaque page que vous lui soumettez, le score de tous les indicateurs Core Web Vitals, accompagnés de recommandations détaillées pour les améliorer.

Son fonctionnement est très simple, il suffit de vous rendre sur PageSpeed Insight, de rentrer l’URL de la page dans le champ de recherche et de cliquer sur Analyser.

mesurer les core web vitals d'une page
mesurer les core web vitals d'une page
Les différents audits fournis par Google Pagespeed Insights :

Google Pagespeed Insights fournis 4 catégories d’audit différents.

  • Performance.
      • Le rapport de performance mesure la vitesse d’un site de plusieurs manières, nous les verrons en détail plus bas dans cet article.
  • Accessibilité.
      • Le rapport mesure le niveau d’accessibilité d’une page pour les personnes souffrant d’un handicap.
      • Il teste si les éléments de votre page peuvent être lus par des lecteurs d’écran dont dispose les personnes malvoyantes. Ces éléments sont, le plus souvent, des liens, des boutons, des images avec l’attribut alt, des champs de formulaires, etc.
  • SEO (référencement).
      • Le score affiché ne fait en aucun cas référence à un bon ou mauvais référencement.
      • Il a pour but de détecter d’éventuelles erreurs techniques pouvant impacter négativement le SEO de la page (page indexable, méta-description présente, liens explorables, titre présent…).
  • Bonne pratique.
      • Ce test vérifie que votre page est conforme aux standards actuels du développement web, notamment en matière de sécurité (utilisation du protocole HTTPS, bibliothèques JavaScript comportant des vulnérabilités, liens vers des sites toxiques…).

Google mesure les Core Web Vitals de deux manières distinctes.

  • Field Data (données de terrain).

Les Field Data mesurent les diffèrent en indicateur en se basant sur le Chrome User Experience Report (CrUX) qui est un ensemble de données basé sur les visiteurs réels de votre site.

Si les Field Data offrent des données d’une grande précision, elles sont aussi très dépendantes des conditions de navigation de vos visiteurs. En effet, même si votre site Web est hébergé sur serveur dédié très performant, les indicateurs des Core Web Vitals seront tout de même impacté de façon négative à chaque fois qu’un lecteur visite votre site avec une mauvaise connexion.

C’est pourquoi les différentes recommandations proposées par PageSpeed Insights se base sur les Lab Data.

  • Lab Data (données de laboratoire).

Les Lab Data mesurent les différents indicateurs avec des outils tels que Lighthouse qui simulent en laboratoire via un bot (robot) de Google identifié avec l’user-agent Chrome/94.0.450.92.

Le bot visite les pages de votre site en simulant diverse conditions de navigation, Smartphone, connexion lente (3G)… et permet de générer un rapport listant toutes les recommandations d’optimisation permettant d’améliorer chaque indicateur des Core Web Vitals.

mesurer les core web vitals d'une page

Field Data 

mesurer les core web vitals d'une page

Lab Data 

Les recommandations de Google PageSpeed Insights.

En dessous, vous trouvez une liste de toutes les recommandations proposées par Google pour améliorer les performances de votre page. Vous pouvez filtrer ces recommandations pour n’afficher que celle concernant un des indicateurs suivants : FCP, TBT, LCP, CLS.

En cliquant sur l’une de ces recommandations, vous obtenez des informations détaillées pour vous aider à réaliser les optimisations adéquates.

mesurer les core web vitals d'une page
mesurer les core web vitals d'une page

Chrome Dev Tools est l’autre outil phare de Google pour mesurer les signaux Web essentiels. Basé sur Lighthouse (Lab Data) il fournit les mêmes audits que Google Pagespeed Insights avec la catégorie Progressive Web APP (PWA) en supplément.

Le test PWA n’a d’utilité que pour les sites utilisant cette technologie, il vérifie entre autres que la page peut être consulté hors ligne.

Pour obtenir des résultats le plus précis possible, il est conseillé de tester la page souhaitée en navigation anonyme. Cela permet d’éviter que certaines extensions du navigateur ne viennent perturber la fiabilité des tests.

Procédure pour utiliser Dev Tools:

  1. Cliquez sur les 3 petits points en haut à droite de votre navigateur Chrome.
  2. Sélectionnez Plus d’outils.
  3. Cliquez Outils de développement.
  4. Sélectionnez Lighthouse.
  5. Choisissez Mobile ou Bureau.
  6. Cliquez sur Analyser le chargement de la page.
Signaux Web essentiels - chrome web tools
Signaux Web essentiels - chrome web tools

La Search console permet d’avoir une vue d’ensemble des Core Web Vitals (Signaux Web essentiels en français) et d’identifier rapidement les pages qui ont besoin d’être amélioré. Les résultats sont mesurés avec les données basées sur les utilisateurs réels (Field Data). C’est pourquoi il est possible lorsque votre site vient juste d’être créé qu’aucun rapport n’apparaisse, auquel cas, vous devez analyser vos pages via PageSpeed Insight.

Pour ouvrir le rapport, allez dans Search console et cliquez sur Signaux Web Essentiels (1). Sélectionnez ensuite le rapport que vous souhaitez consulter mobile ou ordinateur (2).

Le rapport analyse les URL (pages) à la fois pour les écrans mobiles et les ordinateurs, Il les classe ensuite en 3 catégories.

  • URL rapides en vert.
  • URL à améliorer en orange.
  • URL lente en rouge.
mesurer les core web vitals d'une page

Cliquez ensuite sur la catégorie d’URL que vous souhaitez améliorer (3).

Sélectionner un des indicateurs qui posent un problème pour accéder au groupe d’URL concernées (4).

Dans notre exemple, nous allons sélectionner le problème de Cumulative Layout Shift (CLS) qui concerne 45 pages.

mesurer les core web vitals d'une page

La fenêtre suivante, affiche un graphique montrant le nombre de pages qui ont eu un problème CLS ces dernières semaines.

En dessous, vous trouvez le groupe d’URL, cliquez dessus pour afficher la liste complète (5).

mesurer les core web vitals d'une page

Vous avez maintenant la liste de toutes les pages qui ont un problème de Cumulative Layout Shift (CLS).

En cliquant sur l’un d’entre elle (6), vous pouvez la faire analyser par Google PageSpeed Insights (7) et obtenir les recommandations d’optimisations.

mesurer les core web vitals d'une page

Il existe d’autres outils gratuits qui permettent de tester les performances d’un site Web. Ils apportent des informations supplémentaires et des rapports détaillés. N’hésitez pas les utiliser en complément. 

Quels sont les différents indicateurs des Core Web Vitals (Signaux Web Essentiels) ?

Les Core Web Vitals se composent de plusieurs indicateurs ou métrique qui mesurent la performance d’une page selon différents critères.

Google n’accorde pas une importance égale à tous les Signaux Web Essentiels pour déterminer la note de performance d’une page. La répartition est la suivante :

  • TBT (Total Blocking Time) : 30% de la note globale.
  • LCP (Largest Contentful Paint) : 25%.
  • CLS (Cumulative Layout Shift) : 15%.
  • FCP (First Contentful Paint): 10%.
  • SI (Speed Index) : 10%.
  • TTI (Time to Interactive) : 10%.
mesurer les core web vitals d'une page

First Contentful Paint (FCP)

Le First Contentful Paint (FCP) mesure le temps écoulé entre le début du chargement d’une page et le moment où le navigateur affiche le premier contenu.

Le First Contentful Paint (FCP)

Pour obtenir un bon score, le FCP doit se situer en dessous de 1,8 seconde. Au-dessus de 3 secondes, le test est considéré comme mauvais et peut impacter le référencement de la page.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
FCP
< 1,8 s
<= 3 s
> 3 s

Comment améliorer le First Contentful Paint (FCP) d'un site WordPress ?

Le First Contentful Paint (FCP) compte pour 10 % dans la note de performance des Core Web Vitals.

Les différentes optimisations pour améliorer le FCP.

  • Mettre en cache le site avec un plugin de cache.
  • Différer le chargement des fichiers JavaScript.
  • Supprimer les ressources CSS initialisées.
  • Éviter les redirections.
  • Minifier et compresser les fichiers CSS et JavaScript.

Toutes ces optimisations peuvent être réalisées avec WP Rocket. D’autre devront l’être séparément.

  • Choisir un hébergeur de qualité.
      • Le choix d’un hébergeur est d’une importance capitale pour améliorer le FCP et plus globalement les performances générales d’un site. Pour les petits budgets, qui souhaite prendre un hébergement mutualisé, je vous conseille o2switch ou Hostinger qui sont des hébergeurs de qualités, offrant de bonnes performances, un service technique de qualité, le tout pour un prix très raisonnable.
  • Éviter le placer du JavaScript en haut de page.
      • Il est préférable d’éviter de placer des scripts JavaScript en haut (début) de pages. Ces derniers sont toujours plus lourds à charger que du simple code HTML et peuvent considérablement retarder le chargement d’une page. Idéalement, il devrait être placé en dessous de la fenêtre d’affichage (viewport).
  • Choix du thème WordPress.
      • Pour les sites hébergés sur un serveur mutualisé, il est plus recommandé de choisir un thème léger.
      • De nombreux thèmes intègrent des scripts en haut de page pour y placer des éléments et comme on vient de le voir, cette pratique n’est pas ce qui fait de mieux en termes de performance. Ne parlons même pas des thèmes mal codés qui pullulent dans la galaxie WordPress et qui vont ruiner les performances de votre site de façon admirable !!!
      • Parmi les thèmes légers et bien codé, je vous conseille ceux créés par StudioPress qui sont parfaitement adaptés aux hébergements mutualisés.

Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) mesure le temps que prend le navigateur pour afficher le plus grand ou le plus important élément visible dans la fenêtre d’affichage à partir du moment ou la page commence à se charger. La fenêtre d’affichage correspond ici au contenu de la page qui apparait sans faire défiler la page vers le bas, on peut aussi dire ligne de flottaison

Ces éléments sont généralement :

  • Du texte.
  • Une image.
  • Une vidéo.
  • Une image en arrière-plan.

À ne pas confondre avec le First Contentful Paint (FCP) qui lui mesure le temps écoulé entre le début du chargement d’une page et le moment où le navigateur affiche le premier contenu.

Le Largest Contentful Paint (LCP)

Pour obtenir un bon score, le LCP doit se situer en dessous de 2,5 secondes. S’il se situe au-dessus, le référencement de la page risque d’être impacté par Google.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
LCP
< 2,5 s
<= 4 s
> 4 s

Comment améliorer le Largest Contentful Paint (LCP) d'un site WordPress ?

Le LCP est l’indicateur le plus important après le TBT (Total Blocking Time) puisqu’il compte à lui seul pour ¼ de la note de performance attribué par Google.

Voici les différents facteurs pouvant affecter le Largest Contentful Paint et les mesures pour les améliorer.

  • Réduire le temps de réponse initial du serveur.
    • Mettre en cache votre site avec un plugin de cache.
    • Optimiser votre base de données.
    • Utiliser la compression GZIP.
    • Choisir un hébergeur de qualité.
  • Réduire le travail du thread principal.
    • Minifier et combiner les fichiers CSS.
    • Minifier et combiner les fichiers JavaScript.
    • Reporter l’exécution du JavaScript.
  • Optimiser les images.
    • Compresser les images.
    • Bien dimensionner les images.
    • Désactiver le lazyload sur l’image spécifique au LCP.
  • Éliminer les ressources qui bloquent le rendu.
    • Différer le chargement des fichiers JavaScript.
    • Supprimer les ressources CSS initialisées.

Pour mettre tout cela en œuvre, vous pouvez utiliser différents plugins, celui que je vous conseille est WP Rocket.

Voir : comment améliorer le LCP avec WP Rocket ?

Speed Index (SI)

L’indicateur Speed Index (SI) ou indice de vitesse en français, mesure la rapidité avec laquelle une page s’affiche dans la fenêtre d’affichage (viewport).

La méthode de calcul du SI diffère de ceux des Indicateurs LCP et FCP car il ne fractionne pas la mesure. En effet, si tous les 3 débutent à partir du moment où le chargement de la page est lancé :

  • Le LCP calcule le temps d’affichage de l’élément le plus important au-dessus de la ligne de flottaison (viewport).
  • Le FCP calcule le temps nécessaire pour que le navigateur reçoive le premier octet de données.
  • Le SI lui calcule le temps que met la partie de la page se trouvant au-dessus de la ligne de flottaison à s’afficher.

De ce fait, le Speed Index, va être fortement influencé par la taille de l’écran sur lequel la page est consultée.

Pour obtenir un bon score a l’indicateur Speed Index, ce dernier doit se situer en dessous de 3,4 secondes.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
SI
< 3,4 s
<= 5,8 s
> 5,8 s

Comment améliorer le Speed Index (SI) d'un site WordPress ?

L’indicateur Speed Index compte pour 10 % dans la note de performance des Core Web Vitals, mais au-delà de ça, le SI est très utile pour évaluer les performances de d’une page dans son ensemble.

Pour améliorer l’indicateur Speed Index (SI), vous devez appliquer les mêmes optimisations que celle Utiliser pour améliorer le Largest Contentful Paint (LCP) et le First Contentful Paint (FCP).

  • Réduire le temps de réponse initial du serveur.
  • Réduire le travail du thread principal.
  • Optimiser les images.
  • Éliminer les ressources qui bloquent le rendu.

First Input Delay (FID)

Le First Input Delay ou délai de première entrée en français, mesure le délai entre le moment où un internaute interagit pour la première fois sur une page (moment où il clique sur un lien, appuie sur un bouton ou autre) et le moment où le navigateur est capable de répondre à cette interaction.

Exemple: Si vous cliquez sur une liste en accordéon, le FID mesure le temps que cela prend pour faire apparaitre la liste.

Pour obtenir un bon score, le FID doit se situer en dessous de 100 millisecondes (0,1 seconde). 

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
FID
< 100 ms
<= 300 ms
> 300 ms

Comment améliorer le First Input Delay (FID) d'un site WordPress ?

En général, un mauvais score FID (First Input Delay) est dû au fait que le navigateur est occupé à analyser et à exécuter un gros fichier JavaScript, ce qui l’empêche d’exécuter rapidement l’interaction demandée par l’utilisateur.

Les différentes optimisations pour améliorer le FID.

  • Différer le chargement des fichiers JavaScript.
  • Minifier les fichiers JavaScript.
  • Reporter l’exécution du JavaScript.
  • Supprimer les ressources CSS inutilisées.

Pour réaliser ces optimisations avec WP Rocket, allez dans Réglages ⇾ WP Rocket ⇾ Optimisation des fichiers.

améliorer First Input Delay wp rocket
améliorer First Input Delay wp rocket
améliorer First Input Delay wp rocket

Time To First Byte (TTFB)

Le Time To First Byte (TTFB) que l’on pourrait traduire en français par temps pour le premier octet, mesure le délai entre le moment où le navigateur envoi sa première requête au serveur et le moment où il reçoit son premier octet de données.

Cet indicateur donne un aperçu fiable de la réactivité du serveur en prenant en compte les délais pour les 3 étapes suivantes :

  • Envoi de la requête au serveur.
    • Lorsqu’un internaute veut se rendre sur un site Web, il utilise un navigateur qui envoie une requête HTTP au serveur qui héberge le site.
  • Traitement de la requête par le serveur.
    • Une fois la requête reçue, le serveur traite et génère une réponse.
  • Envoi de la requête traitée au navigateur.
    • Une fois traitée, le serveur renvoie la requête au navigateur qui reçoit son premier octet de données.

Comment améliorer le Time To First Byte (TTFB) d'un site WordPress ?

Plusieurs facteurs peuvent impacter de façon négative l’indicateur TTFB.

Choix de l’hébergeur.

Il va de soi que le principal facteur pour obtenir un bon score à l’indicateur TTFB est le choix d’un hébergeur web de qualité. Les hébergements spécifiques a WordPress comme WP Engine (hébergeur anglophone) ou WPServeur (hébergeur francophone) sont les meilleurs choix possibles en la matière.

Le lieu géographique du serveur est aussi un paramètre important à prendre en compte pour réduire le Time To First Byte de votre site WordPress.  Si votre audience se situe plutôt en France, il est préférable de choisir un hébergeur proposant des serveurs en France. Si votre site se destine plutôt à une audience internationale, il peut être utile d’utiliser un CDN, qui permet de mettre en cache votre site sur différents serveurs éparpillés un peu partout dans le monde.

Mettre en cache votre site.

La mise en cache de votre site va diminuer le nombre de requêtes entre le navigateur et le serveur et réduire le temps de traitement du serveur.

Voir notre article détaillé sur comment améliorer le TTFB d’un site WordPress.

Time to Interactive (TTI)

Le Time to Interactive ou délai avant interactivité en français, mesure le temps nécessaire pour qu’une page devienne entièrement interactive.

En d’autres termes, le TTI mesure la vitesse à laquelle une page est capable d’exécuter tout le code JavaScript qu’elle contient pour que n’importe quel composant ou élément puisse répondre aux actions du lecteur. Cela donne une indication fiable de la qualité d’interactivité d’une page.

Exemple :

Parfois, il peut arriver que l’on clique sur un bouton, mais que rien ne se passe, car l’élément n’est pas encore cliquable, cela signifie que l’interactivité de la page n’est pas complètement fonctionnelle à ce moment-là.

Différence entre TTI et FID

Le FID et le TTI mesurent tous les deux le niveau d’interactivité d’une page Web, mais le FID contrairement au TTI mesure le temps d’interactivité sans nécessairement que la page ait exécuté tout le code JavaScript.

Un bon score TTI doit se situer en dessous de 3,8 secondes. 

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
TTI
< 3,8 s
<= 7,3 s
> 7,3 s

Comment améliorer le Time To Interactive (TTI) d'un site WordPress ?

Le Time To Interactive (TTI) compte pour 10 % dans la note de performance des Core Web Vitals.

Le TTI étant fortement impacté par les scripts JavaScript, c’est là-dessus qu’il va falloir se pencher pour optimiser le chargement et l’interactivité d’une page.

  • Mettre en cache votre site.
  • Différer les fichiers JS.
      • Le fait de différer les fichiers JS signifie qu’ils sont chargés qu’après que le navigateur a affiché le contenu le plus important. L’objectif est d’accélérer le chargement de votre page en donnant la priorité au contenu que vous souhaitez afficher en premier. Vous réduirez le temps passé à analyser, compiler et exécuter les fichiers JS, ce qui contribuera à améliorer le TTI.
  • Retarder l’exécution des fichiers JS.
      • Pour permettre de retarder le chargement de tous les fichiers JS jusqu’à ce qu’une interaction avec l’utilisateur se produise. Par exemple en cliquant sur un bouton ou en faisant défiler la page jusqu’en bas.

Total Blocking Time (TBT)

Le Total Blocking Time (TBT) ou le temps de blocage total en français, mesure en millisecondes les temps de blocage total pour chaque tâche qui se produit entre le First Contentful Paint et le Time to Interactive, lorsque la durée de cette tâche dépasse les 50 millisecondes.

50 millisecondes est la limite à partir de laquelle Google commence à calculer le temps de blocage de la page. Par exemple, si Google relève un blocage de 90 ms, le temps de blocage retenu sera de 40 ms.

En d’autres termes, le TBT calcule et additionne tous les temps de blocages durant lesquels une page est bloquée suite à l’interaction d’un ’utilisateur.

Pour rappel:

Le FCP indique le temps écoulé entre le début du chargement d’une page et le moment où le principal élément apparait dans la fenêtre d’affichage.

Le TTI indique le temps nécessaire pour qu’une page devienne entièrement interactive.

Le score soit se situer en dessous de 200 millisecondes pour ne pas être pénalisé par Google.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
TBT
< 200 ms
<= 600 ms
> 600 ms

Comment améliorer le Total Blocking Time (TBT) d'un site WordPress ?

Le Total Blocking Time (TBT) est l’indicateur le plus important des Core Web Vitals (signaux Web Essentiels), il compte pour 30 % dans la note de performance.

Voici les optimisations à entreprendre pour améliorer votre score TBT :

  • Mettre en cache le site.
  • Différer les fichiers JS.
  • Retarder l’exécution des fichiers JS.
  • Minifier les fichiers JS.
  • Activer la compression GZIP.
  • Minifier les fichiers CSS.
  • Supprimer les ressources CSS inutilisées.
  • Préchargement des requêtes DNS.
  • Préchargement des polices.

Si vous avez intégré sur une page des ressources hébergé sur un site extérieur comme une vidéo par exemple, le préchargement des requêtes DNS permet réduire leur temps de chargement.

Si vous utilisez WP Rocket, il vous suffit de rentrer les URL correspondantes en vous rendant sur le tableau de bord de WordPress puis sur Réglages ⇾ WP Rocket → préchargement ⇾ Préchargement des requêtes DNS.
Il en va de même pour le préchargement des polices de caractères comme celle de Google Fonts.

préchargement des requêtes avec wp rocket

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) ou décalage cumulé de la mise en page en français, n’est pas un indicateur de vitesse. Le CLS mesure le changement de position soudain des éléments qui se trouvent dans la fenêtre d’affichage (au-dessus de la ligne de flottaison), ou si vous préférez, la stabilité des éléments sur une page.

Il est courant lors du chargement d’une page Web de voir des éléments (texte, images, boutons…) se déplacer brusquement. Cela impacte fortement l’expérience utilisateur et est sanctionné par Google via le score du Cumulative Layout Shift.

Pour mieux comprendre voici quelque exemples :

  • Une publicité se charge alors que vous êtes en train de lire un article, ce qui fait changer le texte de position.
  • Vous vous apprêtez à cliquer sur un bouton, mais la mise en page change et le bouton se déplace d’un coup.
Cumulative Layout Shift (CLS) illustration

Illustration d’un bouton qui pousse le texte vers le bas lorsqu’il est chargé.

Un bon score CLS se situe en dessous de 0,1.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
CLS
< 0,1
<= 0,25
> 0,25

Comment améliorer le Cumulative Layout Shift (CLS) d'un site WordPress ?

Le Cumulative Layout Shift (CLS) compte pour 30 % dans la note de performance.

Voici les optimisations à entreprendre pour améliorer votre score CLS:

  • Bien dimensionner les images.

Un mauvais CLS est très souvent du à des images qui ne possèdent pas de dimension. La solution consiste à ajouter sur chacune des images d’une page les attribut Width (largeur) et Height (hauteur). À noter que vous pouvez aussi rajouter ces attributs a vos vidéos.

Sur Google PageSpeed Insight, vous pouvez identifier très facilement les éléments qui posent des problèmes, en cliquant sur l’onglet CLS.

Google PageSpeed Insight image CLS
Google PageSpeed Insight image CLS

Avec WP Rocket, allez sur le tableau de bord de WordPress, puis sur Réglages ⇾ WP Rocket ⇾ Media ⇾ Dimension des images ⇾ cochez Ajouter les dimensions d’image manquantes.

Ajouter les dimensions d’image manquantes avec wp rocket
  • Précharger les polices de caractères (fonts).

Comme vous le savez, les polices de caractères comme celles proposées par Google Fonts se chargent en arrière-plan. Durant ce court laps de temps, le code HTML affiche une police de remplacement. Étant donné que ces polices de base peuvent avoir une taille différentes de celles utilisées au final, un décalage important peut se produire, ce qui va inexorablement impacter le score CLS de la page.

  • Emplacement des publicités.

Si votre page incorpore des publicités, il est préférable de ne pas les placer en haut de page, mais plutôt au milieu, là où l’impact sur le changement de mise en page sera moins important.

Interaction to Next Paint (INP)

L’INP fait référence à la réactivité d’une page. Il calcule la latence d’interaction globale en sélectionnant l’une des interactions les plus longues de la page.

INP vs FID vs TIT

Ces trois indicateurs mesurent la réactivité d’une page de façons différentes.

  • First Input Delay (FID) ne mesure que la première interaction qui se produit sur une page.
  • Time To Interactive (TIT) mesure le temps que prend une page pour être entièrement interactive.
  • Interaction to Next Paint (INP) mesure la latence globale des interactions que peuvent se produire sur une page.

Un bon score INP doit se situer en dessous de 200 millisecondes.

Expérience sur la page satisfaisante
Amélioration nécessaire
Médiocre
INP
< 200 ms
<= 500 ms
> 500 ms

Comment améliorer le Interaction to Next Paint (INP) d'un site WordPress ?

Les mesures à prendre pour améliorer l’indicateur INP soit les mêmes que celles pour les indicateurs FID et TIT.

Résumer des Core Web Vitals.

Les outils pour mesurer les Core Web Vitals (signaux web essentiels)

Google Chrome Dev Tools
Webpagetest

 Google Chrome Dev Tools
Dareboost

Les differents indicateurs des Core Web Vitals.

First Contentful Paint (FCP) : Mesure le temps écoulé entre le début du chargement d’une page et le moment où le navigateur affiche le premier contenu.

  • Optimisation :
    • Réduire le temps de réponse initial du serveur.
    • Hébergeur rapide.
    • Thème léger.
    • Éviter le placer du JavaScript en haut de page.

Largest Contentful Paint (LCP) :  Mesure les performances de chargement d’une page en mesurant le temps qu’elle prend pour afficher le premier élément Important.

  • Optimisation :
    • Réduire le temps de réponse initial du serveur.
    • Réduire le travail du thread principal.
    • Optimiser les images.
    • Éliminer les ressources qui bloquent le rendu.

Speed Index (SI) : mesure la rapidité avec laquelle une page s’affiche dans la fenêtre d’affichage (viewport).

  • Optimisation :
    • Réduire le temps de réponse initial du serveur.
    • Réduire le travail du thread principal.
    • Optimiser les images.
    • Éliminer les ressources qui bloquent le rendu.

First Input Delay : mesure le délai entre le moment où un internaute interagit pour la première fois sur une page et le moment où le navigateur est capable de répondre à cette interaction.

  • Optimisation :
    • Différer le chargement des fichiers JavaScript.
    • Minifier les fichiers JavaScript.
    • Reporter l’exécution du JavaScript.
    • Supprimer les ressources CSS inutilisées.

Time To First Byte (TTFB) : mesure le délai entre le moment où le navigateur envoi sa première requête au serveur et le moment où il reçoit son premier octet de données.

  • Optimisation :
    • Hébergeur web performant et proche (géographiquement).

Time to Interactive : mesure le temps nécessaire pour qu’une page devienne entièrement interactive.

  • Optimisation :
    • Différer les fichiers JS.
    • Retarder l’exécution des fichiers JS.

Total Blocking Time (TBT) : mesure le temps de blocage total pour chaque tâche qui se produit entre le First Contentful Paint et le Time to Interactive, lorsque la durée de cette tâche dépasse les 50 millisecondes.

  • Optimisation :
    • Différer les fichiers JS.
    • Retarder l’exécution des fichiers JS.
    • Minifier les fichiers JS.
    • Activer la compression GZIP.
    • Minifier les fichiers CSS.
    • Supprimer les ressources CSS inutilisées.
    • Préchargement des requêtes DNS.
    • Préchargement des polices.

Cumulative Layout Shift (CLS) : mesure le changement de position soudain des éléments.

  • Optimisation :
    • Bien dimensionner les images.
    • Précharger les polices de caractères (fonts).
    • Ne pas placer des publicités en haut de page.

Évaluation des scores des Core Web Vitals

PageSpeed Insights  -  Core Web Vitals evaluation scores
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Contenu protégé - DMCA
globalwordpress
Logo