​​PageSpeed Insights : comprendre et optimiser ses Core Web Vitals

Qu’est-ce que les Core Web Vitals ?

Définition des Core Web Vitals

Avant de vous en dire un peu plus sur le fonctionnement des Core Web Vitals, il faut d’abord savoir à quoi ils correspondent. Pour vous la faire court, c’est l’analyse de trois indicateurs : LCP, FID et CLS. Ils vont permettre de mesurer les performances d’une page web et vérifier que l’expérience utilisateur répond aux exigences attendues.

Le but est de pousser les créateurs de page web à proposer des sites rapides à charger, mobile compatible et sécurisés sans publicités intrusives. Bien sûr, Google avait déjà intégré ces éléments dans son algorithme pour proposer les meilleurs résultats aux internautes.

Mais avec les Core Web Vitals, ce sont 3 nouveaux indicateurs qui s’ajoutent pour obtenir un référencement optimisé, et qui complètent les critères déjà pris en compte par Google :

• LCP (Largest Contentful Paint) = Le temps de chargement
• FID (First Input Delay) = L’interactivité
• CLS (Cumulative Layout Shift) = La stabilité visuelle

Sans l’optimisation de ces trois indicateurs, vous ne pourrez pas offrir aux internautes une expérience utilisateur satisfaisante. Chaque page de votre site web va être analysée, même celles indiquant aux robots de ne pas les indexer. Il faut donc y prêter une attention particulière !

Éléments des Core Web Vitals

Comme indiqué précédemment, Google utilise entre autres trois critères de notation qui font partie des Core Web Vitals : le chargement (LCP), l’interactivité (FID) et la stabilité visuelle (CLS). Ces trois critères sont importants pour offrir une expérience utilisateur réussite.

Largest Contentful Paint (LCP) : Le chargement

Le LCP est l’indicateur qui va permettre de mesurer le temps de chargement d’une page web. Il prend en compte l’élément le plus grand (la page la plus importante) pour effectuer ses calculs. C’est l’un des éléments essentiels pour espérer obtenir une bonne expérience utilisateur au top. Les internautes veulent de l’instantané et n’attendent plus qu’un site internet se charge.

À savoir que le LCP concerne le contenu au-dessus de la ligne de flottaisons. On y retrouve les images, les vidéos et les textes qui s’affichent automatiquement sans que l’internaute ait besoin de scroller.

Avec un score LCP faible, votre taux de rebond aura plus de chance d’être élevé. De plus les mises à jour des Core Web Vitals, fond du LCP une donnée encore importante pour espérer avoir une bonne place dans la SERP.

First Input Delay (FID) : L’interactivité

Le FID mesure l’interactivité d’une page web, c’est-à-dire le temps qu’elle mettra à répondre à la demande d’un internaute à partir du moment où il effectuera une action (exemple : scroller sur une page ou cliquer sur un CTA).

Plus simplement, le FID mesure le temps d’attente pour avoir une réponse de la part d’une interface. Si votre code est mal conçu ou que vous utilisez des scripts bloquants, vous risquez d’obtenir une note FID plutôt faible.

Le FID est une statistique qui se calcule uniquement grâce aux actions d’un utilisateur à un moment donné. Il se peut qu’avec certains outils vous voyiez apparaître le terme TBT à la place de FID. Le TBT (Temps de Blocage Total) permet de mesurer le temps exact durant lequel une page web est bloquée et peut donc estimer le FID avec précision.

Cumulative Layout Shift (CLS) : La stabilité visuelle

Le CLS va analyser la stabilité visuelle d’une page web pendant son chargement. Entre nous, il n’y a rien de plus agaçant que de cliquer sur un élément d’un site internet et que brusquement les éléments se déplacent et vous ne parvenez pas à cliquer sur le bouton.

Cela peut toucher n’importe quels éléments d’une page web : changement de police, des images qui ne se chargent pas correctement ou encore des fenêtres qui modifient la page et qui parfois nous redirige vers une autre page web sans notre consentement.

Il faut donc être très vigilant, surtout si vous utilisez un CMS comme Wordpress qui ne serait pas optimisé avec tout un tas de CSS, de scripts ou de fonts obsolètes.

L’importance des Core Web Vitals

Sachez qu’il existe plus de 200 facteurs qui peuvent jouer sur votre ranking. Si vous pensiez qu’en travaillant uniquement vos Core Web Vitals vous parviendrez à améliorer votre référencement d’un seul claquement de doigts, eh bien cela est faux ! On ne sait pas réellement à quel point cela peut influer sur un positionnement.

Les résultats que vous aurez en analysant vos Core Web Vitals seront des indicateurs. Par exemple, même si votre vitesse de chargement est de moins d’une seconde, vous pourriez avoir une note catastrophique liée à d’autres éléments. Ce n’est pas non plus constant, votre score peut passer de 70 à 80 sans que vous ne constatiez aucun changement.

Mais ce n’est pas pour autant qu’il faut les négliger ! En travaillant vos Core Web Vitals vous optimisez votre expérience utilisateur, ce qui impacte directement votre SEO et augmente vos chances de convertir des utilisateurs en clients.

À savoir que Google utilise depuis juin 2021 “l’expérience de page” en plus des Core Web Vitals pour classer et évaluer les pages web. Si les deux sont plus ou moins liés en termes de référencement, “l’expérience de page” compte également le responsive, le https et la sécurité d’un site internet. Voilà pourquoi un site mal codé ou avec des contenus dynamiques indésirables sera mal positionné dans la SERPS. Horrible.

‍

Optimiser ses Core Web Vitals avec ​​PageSpeed Insights

Qu’est-ce que PageSpeed Insights ?

Page Speed Insight est un outil proposé par Google gratuitement pour mesurer les performances d’une page web et obtenir une analyse précise des éléments techniques à améliorer pour optimiser une page, en prenant en considération les 3 Core Web Vitals que nous avons vus précédemment (FCP, FID et CLS).

Il utilise notamment l’outil Lighthouse pour mesurer la vitesse d’un site internet et Chrome User Experience Report (CrUX) pour fournir des données sur l’expérience utilisateur.

Son fonctionnement est simple. Il suffit de saisir l’URL d’une page web dans l’outil PageSpeed Insights pour avoir un rapport détaille et automatique. Un score est alors attribué à la page analysée allant de 1 à 100 avec un code couleur basique reprenant le rouge pour les mauvais scores, l’orange pour les scores moyens et le vert pour les bons scores dépassant les 90.

Le code couleur permet également de voir les points qui doivent être travaillés en priorité et ceux qui sont en adéquation avec les attentes de Googles. PageSpeed Insights va ainsi vous permettre de connaître vos performances et les éléments qui doivent être améliorés.

L’outil à un double intérêt puisqu’il va à la fois donner un rapport pour la version desktop et un rapport pour la version mobile d’une page. Un point non négligeable quand on sait que Google surveille de près l’aspect mobile friendly des sites internet.

Comment sont mesurées vos Core Web Vitals avec PageSpeed Insights ?

Il faut savoir que pour mesurer les performances d’un site web, il existe deux techniques :

• Le monitoring synthétique, traduit par Google de “lab data” ou données laboratoires en français. Ces données sont recueillies grâce à des simulations de navigation et par l’outil Lighthouse à un instant donné.
• Le Real User Monitoring, appelé “field data” par Google ou données de terrain en français. Ces données sont récoltées auprès d’utilisateurs réels sur les 28 derniers jours et sont issues de l’outil CrUX.

La différence entre les données laboratoires et les données de terrain réside dans le fait que les données terrain se fient à de vrais utilisateurs pour tout ce qui concerne la vitesse de chargement, la connexion, le choix des appareils, etc…

Certaines interactions (exemple : le scrolling) ne peuvent pas être analysées simplement dans des conditions spécifiques, comme pour les données laboratoires. Le FID par exemple, qui représente l’ensemble des interactions, peut difficilement se faire analyser par les données laboratoires puisqu’il faut des conditions réelles pour les obtenir.

Attention ! Les données laboratoire restent importantes pour analyser l’expérience utilisateur. En dehors du trio LCP, FID et CLS vous aurez également accès au TTI (Time to Interactive) au Speed Index et au Total Blocking Time (qui remplace parfois le FID dans certains outils de mesure) grâce aux données laboratoire.

Comment améliorer les Core Web Vitals ?

Largest Contentful Paint (LCP) : Le chargement

Les problèmes impactant le LCP correspondent souvent à un temps de réponse du serveur trop lent. Si vos données ne sont pas optimisées, que votre structure est mal pensée ou que vous rencontrez des bugs au niveau des API, c’est un problème de fond que vous rencontrez. L’une des premières choses à faire est alors de vérifier votre serveur.

Pour améliorer la vitesse de votre serveur, vous pouvez notamment :

• obtenir un serveur plus puissant,
• utiliser un CDN (réseau de diffusion de contenu) comme OVH ou Cloudfront,
• mettre en cache vos ressources HTML, CSS et images.

Également, l’ajout de JavaScript et de CSS sur votre site web peut avoir une influence sur le temps de chargement de votre contenu. Pour éviter d’alourdir vos pages web, il vaut mieux réduire le nombre de vos plugins, surtout ceux au-dessus de la ligne de flottaison, et :

• supprimer les codes inutilisés,
• vérifier les mises à jour de vos codes,
• et réduire les fichiers CSS utilisés.

Les contenus visuellement imposants ou complexes prennent forcément plus de temps à charger. Si par exemple vous avez des GIF ou des images non optimisées au-dessus de la ligne de flottaison, votre score LCP risque d’être faible. Vous devez alors optimiser vos images (compression et formats) et “pré-charger” vos ressources.

First Input Delay (FID) : L’interactivité

La majorité des blocages qui impactent le FID sont liés à la phase de chargement d’une page web. Pour augmenter votre score FID, vous devez regarder du côté des Longs Tasks.

Les longs Tasks sont des moments d’exécution de JavaScript durant lesquels un internaute attend qu’une page web réponde. À partir du moment où le thread principal a été bloqué pendant plus de 50 à 100 millisecondes, il y a un souci de Longs Tasks à résoudre.

Pour identifier ses Longs Tasks, vous devez dans un premier temps déterminer les pages qui posent problème. Vous pouvez par la suite utiliser l’outil Lighthouse pour les détecter.

Il est possible également, et comme pour le LCP, que JavaScript soi en cause dans le manque d’interactivité d’un site web. Grosso modo, quand JavaScript charge, le navigateur n’arrive pas à répondre à l’interaction de l’internaute, qui bien évidemment ne peut pas voir ce qui se déroule en coulisse et décide de quitter le site.

Pour résoudre le problème, vous pouvez limiter votre utilisation de JavaScript sur chacune de vos pages, tout simplement. Si votre site est sous Wordpress et utilise un nombre incalculable de plugins, vous avez très certainement des chargements inutiles qui nuisent à la vitesse de votre site internet.

Cumulative Layout Shift (CLS) : La stabilité visuelle

Un score CLS faible correspond à un élément qui perturbe le bon fonctionnement d’un site internet (exemple : un souci de mise en page, une publicité ou un pop-up intrusive, etc…).

• Les images

L’un des premiers soucis que l’on rencontre en tant qu’internaute est lié à l’utilisation de CSS pour redimensionner les images. Le souci avec cette façon de faire est que l’espace d’affichage ne sera visible qu’une fois l’image importée et que le navigateur aura déterminé ses dimensions. Du coup, lorsque cette situation se produit, d’autres éléments viennent remplir l’espace et crée un décalage une fois l’image visible.

Pour éviter ce problème, vous devez inclure les attributs de largeur et de hauteur sur vos images et vidéos. Le navigateur comprendra alors la place qu’il doit allouer à l’image avant son téléchargement.

• Les publicités et contenus dynamiques

Les publicités sont des éléments intégrés à une page qui peuvent décaler la mise en forme d’un site web. Provenant d’un site tiers, le navigateur ne sait pas quelle taille lui attribuer tant qu’elle n’est pas téléchargée. Heureusement, vous avez la possibilité de réserver un espace stable qui ne changera pas pour vos encarts publicitaires en stylisant d’avance l’élément.

Si aucune publicité ne se charge, cet espace doit quand même avoir un contenu ou rester vide. Car s’il disparaît parce qu’il n’y a aucune publicité de présente, tous vos contenus vont se décaler pour combler le vide. Ce qui désorganisera votre page web !

Pensez également à vérifier vos contenus dynamiques, comme l’inscription à votre newsletter ou autre forme de pop-up.

• Les embeds et iframes

Ici, on retrouve le même problème que pour les attributs de tailles des images. Le navigateur n’arrive pas à reconnaître la taille des widgets “embed” (exemple : vidéos ou maps) et iframes tant qu’ils ne sont pas chargés. Pour résoudre ce problème, vous pouvez inspecter vos éléments en utilisant les outils de développement de votre navigateur.

Vous connaîtrez alors les dimensions de vos éléments finaux et pourrez ainsi réserver suffisamment d’espace pour vos éléments.

• Les polices de caractères personnalisées

Si vous utilisez des polices de caractères personnalisées, il se peut que vous rencontriez des problèmes de téléchargement et de mise en page (exemple : la police sélectionnée est remplacée par une autre police ou encore le texte est rendu “invisible”).

Pour éviter ce type de problème, vous devez vous assurer que toutes vos polices sont optimisées et que les polices de “secours” sont bien en placent et pré-chargées. Si vous utilisez des polices provenant des Google Fonts, vous pouvez également les héberger vous-même pour réduire les temps de chargement.

Les autres outils pour mesurer ses Core Web Vitals

Google Search Console

La Google Search Console permet d’analyser les Core Web Vitals en un seul coup d’œil. Cet outil vous offre deux rapports : l’un pour mobile et l’autre pour l’ordinateur avec tous les détails de vos performances et les améliorations que vous pourriez apporter pour chacune des pages de votre site internet.

Il faut quand même que votre site internet soit suffisamment fréquenté pour recueillir des données intéressantes sur les visiteurs que vous pourriez utiliser.

Web Dev

Web Dev est un super outil pour analyser vos performances web et la vitesse de chargement de vos pages. Il n’est pas réservé uniquement aux développeurs, puisqu’il permet également de mesurer les Core Web Vitals de façon très simple. Comme avec PageSpeed Insight, si tout est vert cela signifie que vous êtes dans les clous.

Pour ceux qui utilisent un autre navigateur que Chrome, vous pouvez également retrouver les fonctionnalités proposées par Lighthouse sur Web Dev. En revanche, vous ne pourrez pas faire de test en navigation privée et la plupart de vos analyses seront directement dirigées vers les appareils mobiles.

GT Metrix

GT Metrix est un peu comme PageSpeed Insights. En effet, il fournit des rapports similaires en utilisant les métriques de Lighthouse. Le petit plus ? Les diagrammes en cascade qui peuvent devenir très pratiques pour détecter et analyser les mauvais éléments.

Également, GT Metrix mesure le TTFB et vous donne des recommandations techniques pour améliorer et optimiser votre temps de chargement. La version payante de GT Metrix va vous apporter d’autres fonctionnalités : tests sur plusieurs serveurs, alerte par mails, etc…