Core Web Vitals : ce qu'ils sont et comment les améliorer (guide)

Un temps de chargement lent, des éléments qui ne répondent pas ou des changements de page inattendus peuvent frustrer les utilisateurs. C’est pourquoi les Core Web Vitals (littéralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web et augmenter vos chances d’être mieux classé dans les moteurs de recherche.

En améliorant les performances de votre site web par rapport à ces indicateurs, vous pouvez offrir une expérience plus fluide à votre public. Cela se traduit par un meilleur classement dans les moteurs de recherche, un engagement accru et plus de conversions.

Les Core Web Vitals, c’est quoi ?

Core Web Vitals est un ensemble d’indicateurs clés de Google qui mesurent l’expérience utilisateur réelle en termes de performances de chargement, d’interactivité et de stabilité visuelle d’une page web. Il est recommandé d’obtenir de bons Core Web Vitals pour réussir dans la recherche de Google, car cela permet de garantir une expérience utilisateur rapide, réactive et visuellement stable.

Les trois indicateurs de Core Web Vitals sont les suivants : 

• Largest Contentful Paint (LCP) – mesure les performances de chargement.
• Interaction to Next Paint (INP) – suit les interactions de l’utilisateur et mesure le délai d’entrée.
• Cumulative Layout Shift (CLS) – mesure la stabilité visuelle en suivant les changements de mise en page sur la page.

Google utilise ces signaux de qualité dans le cadre de son algorithme de classement, et leur amélioration peut vous aider à votre classement dans les moteurs de recherche.

Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) mesure le temps nécessaire au plus grand élément de contenu visible sur une page pour s’afficher entièrement. Il peut s’agir d’une image, d’une vidéo ou d’un bloc de texte qui occupe le plus d’espace à l’écran. Cet indicateur est important car il donne une vue précise de la vitesse de chargement d’une page web du point de vue de l’utilisateur. 

Voici comment Google définit les scores LCP :

• Excellent : 2,5 secondes ou moins
• Amélioration nécessaire : entre 2,5 et 4 secondes.
• Médiocre : plus de 4,0 secondes

Pour que votre site web réussisse les Core Web Vitals, vous avez besoin d’un score LCP de 2,5 secondes ou moins pour 75% de l’ensemble de vos pages consultées. 

Un score LCP élevé signifie que vos utilisateurs attendent trop longtemps pour charger la partie la plus importante du contenu de votre page. Pour les propriétaires de sites web, cela se traduit par des temps d’affichage trop longs, ce qui entraîne des taux de rebond élevés et des taux de conversion faibles.

Les trois facteurs les plus courants qui affectent négativement le LCP sont :

• Images et vidéos volumineux et non optimisés
• JavaScript bloquant le rendu
• Temps de chargement des ressources lent

Cliquez ici pour savoir comment mesurer et améliorer votre score LCP.

Interaction to Next Paint (INP)

Interaction to Next Paint (INP) est un indicateur de performance web pour un utilisateur réel qui mesure la réactivité d’une page web. Il évalue le temps nécessaire au navigateur pour répondre aux interactions de l’utilisateur, telles que les clics, après le chargement de la page.

L’INP est conçu pour refléter l’expérience de l’utilisateur quant à la rapidité et à la fluidité avec lesquelles un site web réagit à ses commandes. C’est un indicateur clé de l’interactivité et de la réactivité de la page. 

Contrairement au FID, qui ne mesure que la latence d’entrée, l’INP prend en compte la réactivité de la page entière tout au long de la session de l’utilisateur. 

Voici comment Google définit les scores INP :

• Excellent : inférieur ou égal à 200 millisecondes
• Amélioration nécessaire : entre 200 et 500 millisecondes
• Médiocre : plus de 500 millisecondes

Les fichiers JavaScript et CSS non optimisés sont souvent à l’origine d’un mauvais score INP. Nous vous montrerons comment mesurer et améliorer l’INP plus tard.

Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle d’une page en détectant les changements de mise en page inattendus. Ces changements se produisent souvent lors du chargement de nouveaux contenus, tels que des images sans dimensions précises ou des publicités insérées de manière dynamique. Un score CLS élevé indique qu’une page est instable, ce qui rend l’expérience irritante pour les utilisateurs. 

Voici comment Google définit les scores CLS :

• Excellent : inférieur ou égal à 0,1 seconde
• Amélioration nécessaire : inférieur ou égal à 0,25 seconde
• Médiocre : plus de 0,25 seconde

Un score inférieur ou égal à 0,1 seconde signifie que le contenu de la page est totalement statique pendant son cycle de vie. Un score plus élevé signifie que le contenu est dynamique.

En général, les changements de mise en page sont à l’origine de :

• images,
• publicités,
• embeds (ou vecteurs numériques),
• iframes sans dimensions,
• contenu dynamique,
• polices de caractères web, provoquant un flash de texte non stylisé ou un flash de texte invisible

Comment mesurer les Core Web Vitals ?

Il existe plusieurs outils disponibles pour mesurer l’état de Core Web Vitals, à la fois à l’aide de données réelles provenant des utilisateurs et de mesures de laboratoire (tests simulés). Ces outils aident les propriétaires de sites web à suivre les performances de leur Core Web Vitals et à identifier les domaines à améliorer.

Field tools 

Les field tools également connues sous le nom de la surveillance des utilisateurs réels (RUM, en abrégé), reflètent l’expérience de navigation des utilisateurs réels. Il prend en compte les utilisateurs réels, les différents appareils, les différentes connexions réseau et les données historiques. Le résultat est agrégé pour le domaine entier ou par URL. 

Gardez à l’esprit que Google utilise ces données pour classer votre site web. Par conséquent, si vous souhaitez vérifier l’expérience réelle de vos utilisateurs, vous devez utiliser des field tools..

Google Search Console (GSC)

Google Search Console fournit un rapport « Core Web Vitals » qui montre les performances de votre site web sur les ordinateurs de bureau et les appareils mobiles. Il met en évidence les pages concernées et les regroupe en fonction de leurs performances (excellentes, améliorations nécessaires ou médiocres).

PageSpeed Insights

PageSpeed Insights analyse les pages web individuelles et fournit des informations détaillées sur leurs performances dans Core Web Vitals. Il fournit des conseils pour améliorer la vitesse des pages et les performances du site web.

Il est conseillé de vérifier les scores pour les ordinateurs de bureau et les appareils mobiles, car ils peuvent être différents. En haut du rapport, PageSpeed Insights indique clairement si votre page atteint les seuils nécessaires à une bonne expérience, sur la base des Core Web Vitals du site web. 

Rapport Chrome UX (CrUX)

Le rapport sur l’expérience utilisateur de Chrome (CrUX, en abrégé) fournit des données de performances réelles d’utilisateurs de Chrome.Il montre comment les utilisateurs utilisent votre site sur les appareils mobiles et de bureau. Le rapport UX de Chrome se concentre sur les performances de chargement des sites web. Il mesure Core Web Vitals, des paramètres tels que le temps de chargement du premier octet (TTFB), et bien plus encore.

Extension Web Vitals pour Chrome

L’extension Web Vitals vous permet de suivre les indicateurs Core Web Vitals directement dans votre navigateur Chrome lorsque vous naviguez sur votre site web. Il s’agit d’un outil gratuit qui fournit un retour d’information instantané sur les indicateurs Core Web Vitals.

Web.dev

Web.dev fournit un outil de mesure gratuit pour effectuer un audit de performance de votre site web. De plus, vous pouvez vérifier les performances de votre site dans différents domaines et obtenir des conseils pour améliorer des paramètres tels que les performances du site, l’état des progressive web apps (ou PWA), l’accessibilité, l’utilisation des meilleures pratiques et le classement SEO. Il prend également en charge les indicateurs Core Web Vitals.

Lab Tools

Il s’agit de réaliser des tests dans un environnement contrôlé et de voir comment un utilisateur potentiel verra votre site web. Contrairement aux Field Tools, les Lab Tools fonctionnent avec des données simulées, avec des spécifications prédéfinies pour les appareils et le réseau. Ils sont utiles pour reproduire et déboguer d’éventuels problèmes de performance du site web, mais ne vous donnent pas d’informations sur l’expérience réelle de l’utilisateur.

Lighthouse

Lighthouse est un outil open source d’audit des sites web, qui permet aux développeurs de diagnostiquer les problèmes et d’améliorer la qualité des pages web.

Un outil comme Lighthouse ne peut pas mesurer Interaction to Next Paint (INP), car il nécessite une interaction réelle avec l’utilisateur. Cependant, vous pouvez surveiller le temps de blocage total (TBT), qui mesure le temps total entre le First Contentful Paint et le Time to Interactive. En améliorant votre TBT, vous améliorerez probablement aussi votre INP.

WebPageTest.org

Il s’agit d’un outil gratuit et open source qui mesure la vitesse de chargement de votre site web. Il charge votre page dans un navigateur réel, ce qui vous permet d’identifier les sections du site qui ont besoin de plus de temps pour se charger.

Panneau des performances de Chrome DevTools 

Avec les Chrome DevTools (diminutif de Chrome Developer Tools, généralement appelé DevTools), vous disposez du panneau des performances qui inclut les Core Web Vitals. Ce panneau possède également une section Expérience dans laquelle vous pouvez détecter les changements de mise en page inattendus. Par conséquent, vous pouvez identifier et corriger toute instabilité visuelle et améliorer votre indicateur Cumulative Layout Shift. Pour accéder au panneau des performances de Chrome DevTools, ouvrez Google Chrome (utilisez le mode incognito pour éviter le cache du navigateur) et appuyez sur Cmd+Option+I (Mac) ou Ctrl+Maj+I (Windows, Linux) pour ouvrir les DevTools. 

Sélectionnez la Layout Shift pour voir ses détails dans l’onglet Résumé. 

Gardez à l’esprit que selon l’outil que vous utilisez (basé sur les données de Field Tools or Lab Tools), les indicateurs de Core Web Vitals peuvent donner des résultats différents.

Comment améliorer les Core Web Vitals

La bonne nouvelle, c’est que la plupart des conseils pour améliorer vos Core Web Vitals font déjà partie des bonnes pratiques pour optimiser les performances des sites web.

Comment améliorer le Largest Contentful Paint (LCP)

Activer la mise en cache de la page entière

Lorsque vous activez la mise en cache de la page entière, les pages de votre site web sont stockées sur le serveur après le premier chargement. Seul le premier visiteur chargera le contenu entier de la page depuis la base de données. Tous les autres visiteurs obtiendront la sortie de la page directement à partir de la mémoire du serveur, ce qui rendra votre site beaucoup plus rapide et améliorera en fin de compte votre LCP.

Les utilisateurs de SiteGround tirent parti de notre solution unique de mise en cache de la page entière, appelée « Mise en cache dynamique », activée par défaut pour tous les sites web. En fonction du site, nous constatons que le chargement des pages est jusqu’à 5 fois plus rapide.

Choisir un hébergeur web rapide et fiable

Une des raisons les plus courantes d’un mauvais LCP est un temps de réponse du serveur lent. Tout d’abord, vérifiez votre temps de réponse au premier octet (TTFB), c’est-à-dire le temps nécessaire au navigateur pour recevoir le premier octet de contenu du serveur. Plus votre serveur répond rapidement, plus votre site web sera performant. 

Utiliser un CDN

Outre le serveur qui héberge votre site, vous pouvez utiliser un réseau de diffusion de contenu (CDN) pour accélérer le temps de chargement de tous vos visiteurs. Le CDN mettra votre contenu en cache sur un réseau mondial de serveurs et chargera votre site web à partir de celui qui est le plus proche du visiteur, améliorant ainsi son expérience avec votre page.

SiteGround a développé sa propre infrastructure CDN afin d’augmenter la performance et la sécurité du site web pour tous ses utilisateurs. 

Optimiser les images

L’optimisation des images améliorera votre score Largest Contentful Paint car elles sont souvent l’élément le plus volumineux de la page.Réduisez toujours la taille de vos images et redimensionnez-les correctement. Il est recommandé de distribuer les images dans des formats de nouvelle génération tels que WebP, afin d’améliorer les performances.

Optimiser JavaScript et CSS

La réduction de la taille des fichiers CSS et JavaScript qui ralentissent le chargement des pages peut améliorer votre score global de Core Web Vital et l’interaction avec les utilisateurs.

• Différer le chargement des fichiers JavaScript

Pendant que le navigateur charge les fichiers JavaScript, les utilisateurs ne peuvent pas interagir avec la page web. C’est pourquoi vous pouvez parfois voir le terme « JavaScript bloquant le rendu ». Différer vos JavaScripts signifie que le navigateur ne traitera et ne chargera les fichiers JS qu’après avoir analysé le document HTML. 

En d’autres termes, le rendu de votre site web sera beaucoup plus rapide car il n’y aura rien pour bloquer le processus. 

• Minifier les fichiers CSS et JS

Pour faciliter la lecture, les développeurs laissent souvent des espaces ou des commentaires dans les fichiers CSS et JS. Cependant, tous ces caractères dans le code ne sont pas essentiels pour le navigateur. 

La minification optimise votre code en supprimant tous les caractères inutiles, ce qui permet d’améliorer le temps de rendu et d’accélérer les sites web. 

Comment améliorer l’Interaction to Next Paint (INP)

Supprimer les éléments de page volumineux et les tâches fastidieuses

La réduction des tâches nécessitant beaucoup de temps et d’efforts permet d’éviter les retards dans la réponse aux interactions avec l’utilisateur. Une tâche fastidieuse désigne tout élément de code JavaScript dont l’exécution prend plus de 50 millisecondes. Les éléments de page volumineux tels que les vidéos ou les images d’arrière-plan peuvent ralentir l’exécution du code et avoir un impact sur l’INP.

Au lieu d’utiliser une image haute résolution pour l’arrière-plan (par exemple, un JPEG de 4 Mo), envisagez d’utiliser une image WebP optimisée qui réduit considérablement la taille du fichier (par exemple, 400 Ko). De même, les vidéos peuvent être chargées différemment ou remplacées par des images statiques pour le chargement initial, en reportant les médias lourds après l’interaction avec l’utilisateur. 

Utiliser les Web Workers

L’utilisation de Web Workers permet aux tâches volumineuses de s’exécuter en arrière-plan, ce qui les empêche de bloquer le fil d’exécution principal. Cela permet de réduire la latence d’entrée de l’utilisateur et de chargement de la page, ce qui optimise le score INP et les performances globales.

Au lieu d’avoir des tâches volumineuses directement exécutées dans le fil d’exécution principal du navigateur (ce qui a pour effet de geler la page), le traitement peut être délégué à un Web Worker. Cela permet à l’utilisateur de continuer à interagir avec le site sans délai notable, pendant que la tâche en arrière-plan se termine.

Optimiser les « Event Handlers » (aussi appelés, gestionnaires d’événements)

Les gestionnaires d’évènements optimisés réduisent la latence d’entrée et améliorent la vitesse du site, contribuant aussi à l’amélioration des indicateurs de Core Web Vitals.

Par exemple, lorsqu’un utilisateur clique sur un bouton, le gestionnaire d’événements enregistre d’abord le clic sur le bouton et reporte le calcul à un moment moins critique, lorsque le fil principal du navigateur est inactif. L’interaction est ainsi fluide et l’utilisateur ne subit pas de retard. 

Réduire les scripts tiers

Il est fortement recommandé de supprimer tous les scripts tiers qui n’apportent pas de valeur ajoutée évidente. Si votre site comprend plusieurs scripts tiers pour les analyses, les publicités ou les widgets de réseaux sociaux, évaluez s’ils sont nécessaires. La suppression des scripts non essentiels, tels qu’un widget de chat redondant ou un tracker publicitaire qui n’est pas utilisé par votre public principal, peut améliorer de manière significative votre score Largest Contentful Paint (LCP) et Interaction to Next Paint (INP).

Comment améliorer le Cumulative Layout Shift (CLS)

Définir les attributs de taille

Définir les dimensions de l’attribut de taille indiquera au navigateur de l’utilisateur exactement l’espace nécessaire à cet élément. Prenons l’exemple d’un élément image.

Si vous ne définissez pas les attributs de largeur et de hauteur d’une image, le navigateur ne connaîtra pas la taille exacte de l’image jusqu’à ce qu’elle soit complètement chargée, ce qui peut provoquer un changement de la mise en page.  

<img src=”image.jpg” width=”600″ height=”400″ alt=”A scenic view of mountains”>

En spécifiant la largeur et la hauteur, vous permettez au navigateur de calculer le rapport hauteur/largeur de l’image et de lui réserver l’espace nécessaire. Ceci réduira au minimum les changements cumulés de la mise en page.  

Précharger les polices de caractères 

Les polices de caractères améliorent la lisibilité de votre page et véhiculent votre image de marque. Cependant, chaque police utilisée est une ressource supplémentaire qui peut ralentir votre site web. Il est recommandé de précharger les polices afin d’éviter les changements de mise en page et les flashs de texte invisible.

Pour précharger des polices, utilisez la balise <link rel=« preload »> dans la <head> de votre document HTML. Vous devez spécifier l’ attribut as=”font” et inclure crossorigin si la police est chargée depuis une source externe (tel qu’ un CDN). 

En faisant cela, vous améliorerez votre score CLS. 

Réserver de l’espace pour les publicités

Les publicités sont de nature dynamique, ce qui peut entraîner des modifications inattendues de la mise en page. Cela peut avoir un effet négatif sur votre score CLS. Si vous ne réservez pas suffisamment d’espace pour les publicités sur votre site, elles peuvent apparaître de manière inattendue et nuire à l’expérience utilisateur.

Utiliser CSS transform pour les vidéos animées

Les changements de mise en page pendant les animations perturbent souvent l’expérience de l’utilisateur et peuvent avoir un impact significatif sur votre score Cumulative Layout Shift (CLS). L’utilisation de la fonctionnalité CSS transform pour les vidéos animées  permet d’éviter que les éléments de la page ne se déplacent de manière imprévisible. 

Les vidéos animées traitées avec la fonctionnalité transform, possède l’option scale ou translate qui aident à maintenir la position d’autres contenus sur la page. Cela conduit à une expérience plus stable sur votre site web.

Réduire au minimum le contenu dynamique

Le contenu dynamique, tel que les publicités, les images ou les vidéos qui se chargent après la page web initiale, entraîne souvent des changements de mise en page. Ces changements peuvent affecter négativement le score de Cumulative Layout Shift (CLS). Pour améliorer la stabilité visuelle, il est important de pré-allouer de l’espace pour le contenu dynamique. Il existe plusieurs techniques pour ce faire, comme la définition de dimensions dans CSS, JavaScript ou l’utilisation de boîtes de rapport hauteur/largeur ou de caractères génériques. Vous trouverez ci-dessous un exemple de configuration des dimensions avant l’insertion de contenu dynamique avec JavaScript :

Pourquoi les Core Web Vitals sont-ils importants ?

Les conseils ci-dessus sont à la fois de bonnes pratiques recommandées pour l’optimisation des sites web et influencent également positivement les signaux d’expérience de la page mesurés par les Core Web Vitals de Google.

En tant que propriétaire de site web, il est important de comprendre ces indicateurs. Cela peut vous aider à offrir une expérience utilisateur positive, à améliorer votre classement dans les moteurs de recherche et les performances globales de votre page web. 

Il est important de noter que l’algorithme de classement de Google est mis à jour en permanence.  En surveillant régulièrement vos Core Web Vitals à l’aide d’outils tels que PageSpeed Insights ou Search Console, vous pourrez procéder aux ajustements nécessaires, même si les attentes des utilisateurs et les algorithmes de classement de Google évoluent. De cette façon, vous préparez votre site à une réussite à long terme. Pour plus de conseils d’experts sur l’optimisation de sites web, vous pouvez télécharger notre guide sur l’optimisation de la vitesse de WordPress et apprendre à créer un site web performant.