Tout ce que tu as besoin de savoir

Les Indicateurs Web Essentiels, ou Core Web Vitals, sont les mesures clés que chaque propriétaire de site internet doit optimiser pour garantir une expérience utilisateur exceptionnelle, améliorer le référencement naturel (SEO) et bénéficier d'avantages considérables.

L'accent est mis sur l'optimisation de la rapidité de chargement de votre site, de sa réactivité et de la stabilité de tous les éléments visuels. Cela permet aux utilisateurs d'accéder au contenu plus vite et d'interagir avec votre site sans aucune difficulté.

Les internautes d'aujourd'hui exigent des sites web rapides et réactifs pour interagir facilement et effectuer des actions telles que commander un repas en ligne. Ils détestent les sites web lents qui gaspillent leur temps et engendrent de la frustration.

C'est là que les Core Web Vitals entrent en jeu !

Dans cet article, je vais vous éclairer sur les Core Web Vitals et vous montrer comment améliorer les indicateurs de votre site.

C’est parti !

Que signifie Core Web Vitals ?

Les Core Web Vitals de Google sont trois indicateurs fondamentaux liés à la vitesse de chargement des pages, à l'interactivité et à la stabilité visuelle. Ils servent à évaluer l'expérience utilisateur sur un site web.

Ces mesures ont été intégrées par Google en 2021 comme facteur de classement dans son algorithme de recherche. Votre site web obtient un score "bon" ou "mauvais" sur ces indicateurs, signalant si votre site est optimisé pour ces trois aspects essentiels ou s'il a besoin d'améliorations.

Les Core Web Vitals font partie des Web Vitals applicables à tous les sites et pages web, que les propriétaires doivent évaluer et améliorer.

Les trois mesures des Core Web Vitals sont les suivantes :

Le Largest Contentful Paint (LCP), soit le plus grand élément de contenu visible.
Le First Input Delay (FID), soit le délai de la première interaction.
Le Cumulative Layout Shift (CLS), soit le décalage cumulatif de mise en page.

Les Core Web Vitals en détail

#1. LCP – Largest Contentful Paint (chargement)

Le Largest Contentful Paint (LCP) mesure la vitesse de chargement des pages d'un site web afin que les visiteurs puissent y accéder rapidement. C'est un facteur essentiel pour améliorer l'expérience utilisateur.

Pour garantir cela, votre LCP doit être inférieur à 2,5 secondes. Cela correspond au temps que prend votre site pour afficher le contenu à l'écran après que l'utilisateur a cliqué sur un lien.

Si le LCP se situe entre 2,5 et 4 secondes, votre site a besoin d'améliorations en termes de chargement des pages.
S'il est supérieur à 4 secondes, la vitesse de chargement de la page est insuffisante et vous devez agir rapidement.

LCP – Largest Contentful Paint (chargement)

Le LCP se concentre sur l'expérience utilisateur en temps réel en mesurant la vitesse de chargement des pages, permettant aux utilisateurs de voir et d'interagir avec le contenu. C'est différent du First Contextual Paint, du TTFB et d'autres mesures de vitesse de page.

Par exemple, si votre page web contient une grande image et du texte simple, l'image sera le LCP. C'est le plus grand élément à charger dans votre navigateur et celui qui produit un impact significatif. L'optimisation de l'image pour un chargement plus rapide contribuera à accélérer le chargement de la page et à améliorer l'expérience utilisateur.

En d'autres termes, le LCP est le temps nécessaire pour que l'élément ou le contenu le plus important se charge sur l'écran de l'utilisateur. Cet élément peut être une image, une vidéo, du texte ou d'autres types de contenu.

#2. FID – First Input Delay (interactivité)

Le First Input Delay (FID) mesure la réactivité ou l'interactivité des utilisateurs avec votre site web. Le FID est le temps nécessaire au navigateur web pour répondre lorsque l'utilisateur interagit pour la première fois avec la page.

Cela signifie que si le navigateur répond plus rapidement à l'interaction, la page sera plus réactive et affichera le contenu demandé.

Pour garantir une bonne expérience utilisateur, votre FID doit être inférieur à 100 millisecondes (ms).

Si le FID se situe entre 100 ms et 300 ms, la réactivité de votre site nécessite des améliorations.
S'il dépasse 300 ms, la réactivité de votre site est mauvaise et vous devez immédiatement y remédier pour offrir une excellente expérience utilisateur.

FID – First Input Delay (interactivité)

Des retards peuvent se produire si votre navigateur effectue d'autres tâches en arrière-plan. Même si la page s'affiche correctement et que le contenu est visible, il se peut que rien ne se passe lorsque vous cliquez sur un bouton. Cela signifie que la page web ne répond pas à votre interaction, ou du moins, qu'elle répond lentement. Cela peut frustrer un utilisateur et entraîner une mauvaise expérience.

La raison est que le navigateur est responsable de nombreuses tâches et ne peut pas tout faire en même temps, ou bien il peut mal fonctionner. Les sites web étant de plus en plus complexes, le navigateur se retrouve avec des tâches plus lourdes. Par conséquent, l'optimisation du FID est devenue essentielle pour rendre votre page plus interactive et plus réactive aux requêtes de l'utilisateur.

#3. CLS – Cumulative Layout Shift (stabilité visuelle)

Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle d'un site. Il évalue la stabilité du chargement des éléments de la page sur l'écran de l'utilisateur et leur niveau de fluctuation.

Si le site n'est pas stable, cela engendre une mauvaise expérience utilisateur. Par exemple, un utilisateur souhaite cliquer sur un bouton affiché sur la page web pendant que celle-ci est encore en cours de chargement. Au moment de cliquer, le chargement de la page se termine et le bouton se déplace légèrement. L'utilisateur risque de cliquer sur un autre élément ou sur rien, ce qui est frustrant.

Ces irrégularités et changements peuvent être dus à plusieurs facteurs, comme des publicités, des éléments lourds sur le site, etc.

CLS – Cumulative Layout Shift (stabilité visuelle)

Par conséquent, l'optimisation du CLS de votre site est cruciale pour le maintenir stable à tout moment, en vous assurant que la mise en page, les conceptions et les boutons fonctionnent comme prévu.

Pour une bonne expérience utilisateur, le CLS doit être inférieur à 0,1.

Vous devez améliorer la stabilité visuelle de votre site si le CLS se situe entre 0,1 et 0,25.
S'il est supérieur à 0,25, la stabilité visuelle est mauvaise et nécessite une correction rapide si vous voulez offrir une meilleure expérience utilisateur.

Pour atteindre votre objectif pour la majorité des utilisateurs, mesurez chacune des mesures Core Web Vitals au 75e centile.

Quelle est l'importance des Core Web Vitals pour le référencement ?

Google a intégré l'expérience de la page comme un facteur de classement essentiel et officiel à partir de 2021 pour tous les sites apparaissant dans ses résultats de recherche.

L'expérience de la page dépend de nombreux facteurs, parmi lesquels :

Vitesse de chargement
Stabilité visuelle
Réactivité
Convivialité mobile
HTTPS
Navigation sécurisée

Les trois premiers - vitesse de chargement, réactivité et stabilité visuelle - sont les Core Web Vitals que chaque propriétaire de site doit optimiser pour garantir un bon classement sur Google. Ils ont un impact significatif sur le succès d'un site.

Par conséquent, lorsque vous optimisez le LCP, le FID et le CLS, vous améliorez votre score SEO et votre expérience utilisateur, ce qui favorise le développement de votre site web. Voici les avantages auxquels vous pouvez vous attendre :

Chargement plus rapide : Les internautes apprécient les sites rapides qui se chargent en un clin d'œil. Cela leur fait gagner du temps et leur fournit les informations recherchées sans les faire patienter. Cela améliore leur expérience utilisateur et votre positionnement sur les moteurs de recherche. L'optimisation de votre LCP peut vous aider à y parvenir.

Quelle est l'importance des Core Web Vitals pour le référencement ?

Réactivité : Il ne sert à rien que votre site se charge si les réponses aux requêtes des utilisateurs ne sont pas bonnes. Si vous améliorez le FID de votre site, vous augmentez sa réactivité, ce que tout le monde apprécie. Ainsi, un nombre croissant d'utilisateurs viendront régulièrement interagir avec votre site pour lire des articles, faire des achats, rechercher des informations, etc. Cela améliorera votre SEO et votre présence en ligne, attirera plus de visiteurs et les incitera à revenir.

Mises en page et éléments performants : Même si vos éléments tels que les boutons, les arrière-plans et les mises en page sont de qualité, ils risquent de mal fonctionner lors du chargement du site si vous ne les optimisez pas. L'optimisation de la stabilité visuelle de votre site permettra à chaque élément de fonctionner de manière optimale et d'améliorer l'interaction des utilisateurs avec les visuels.

Comment améliorer les Core Web Vitals ?

Maintenant que nous avons discuté de l'amélioration des principaux éléments vitaux du Web pour garantir une excellente expérience utilisateur, examinons comment procéder.

#1. Comment améliorer le LCP

Idéalement, le Largest Contentful Paint (LCP) de votre site doit être inférieur à 2,5 secondes pour au moins 75 % du nombre total de visites de pages.

De nombreux facteurs influent sur la capacité du navigateur à charger et à afficher une page web. Tout retard ou blocage dans l'un de ces facteurs peut avoir un impact sur le LCP. Le LCP est l'indicateur que la plupart des sites web doivent optimiser.

Le LCP mesure la vitesse de chargement du contenu principal d'une page web. Cette mesure affecte les images principales, les polices multiples, les vidéos, le contenu à chargement différé, les images d'arrière-plan, etc.

Par conséquent, pour améliorer votre LCP, vous devrez optimiser et rationaliser le processus de chargement dans son ensemble. La tâche peut être complexe, mais la décomposer permet de la rendre plus accessible.

Compresser la taille des fichiers : La compression ou la réduction de la taille des fichiers contribue à accélérer le chargement de votre page. Vous pouvez vérifier s'il existe des codes ou des fichiers inutilisés et vous en débarrasser. La compression de la taille des fichiers est relativement simple pour chaque type de fichier (HTML, CSS, JavaScript ou images).

Comment améliorer le LCP

2. Rapprocher le contenu des utilisateurs : Si la distance est importante entre les utilisateurs et le serveur où le contenu de votre site est stocké, le temps de chargement sera long. Il faut donc choisir un centre de données pour héberger le contenu de votre site dans la zone géographique où se trouve votre public.

Vous pouvez également utiliser un CDN, à moins que votre public ne soit très localisé. Un CDN permet de distribuer votre contenu plus rapidement, quelle que soit sa taille, et d'améliorer l'expérience utilisateur puisque les utilisateurs accèdent au contenu plus vite, où et quand ils le souhaitent.

Dans la mesure du possible, utilisez le même serveur pour éviter des délais supplémentaires et établir une connexion sécurisée entre le serveur et l'utilisateur pour chaque connexion. Vous pouvez également utiliser une prélecture DNS ou une pré-connexion pour démarrer les connexions plus tôt.

3. Mettre en cache les ressources : La mise en cache des ressources permet de télécharger les ressources pour la première vue de la page web sans les télécharger pour les vues suivantes. Les ressources étant déjà disponibles, les autres pages se chargeront plus rapidement.

4. Réduire le TTFB : Fournissez rapidement votre code HTML initial, car il a une incidence directe sur les étapes suivantes. Réduisez votre temps au premier octet (TTFB) pour améliorer d'autres mesures de chargement de page.

Réduire le TTFB

5. Hiérarchiser les ressources : Déterminez la manière dont les ressources de votre site sont chargées dans le chemin de rendu. Assurez-vous qu'elles soient classées en fonction de leur ordre de téléchargement et de traitement. Vous pouvez commencer par charger les ressources essentielles que vous souhaitez que vos utilisateurs voient, puis effectuer le reste.

Par exemple, vous pouvez commencer par charger votre page principale et les feuilles de style de police essentielles. Vous pouvez intégrer ou réduire les feuilles de style bloquant le rendu et charger d'abord les éléments HTML, JavaScript et CSS critiques, puis charger le reste.

#2. Comment améliorer le FID

Le LCP et le First Contentful Paint (FCP) mesurent le temps de chargement d'une page web. Cependant, ces mesures n'évaluent pas la réactivité de la page aux requêtes de l'utilisateur.

Tous vos efforts sont vains si votre site se charge, mais que l'utilisateur ne peut pas effectuer l'action souhaitée.

Le First Input Delay (FID) permet d'évaluer la réactivité ou l'interactivité du site à la demande de l'utilisateur.

Comment améliorer le FID

Le FID mesure le temps écoulé entre la première interaction de l'utilisateur et le moment où le site répond à cette interaction, par exemple, lorsqu'un utilisateur clique sur un bouton et arrive sur la page correspondante. Cette mesure prend en compte le code tiers, JavaScript, les scripts de suivi, etc. Le FID idéal est inférieur à 100 ms. Voici des moyens d'améliorer le FID :

Réduire le volume de JavaScript en cours d'exécution : Si vous utilisez un framework JavaScript, il nécessite beaucoup de JavaScript pour charger la page, ce qui peut prendre un certain temps à traiter dans votre navigateur et provoquer des retards. Si vous utilisez SSR ou le prérendu, vous pouvez transférer cette charge sur le serveur plutôt que sur votre navigateur.

Décomposer votre JavaScript : Diviser votre JavaScript en de plus petits morceaux peut vous aider à le faire fonctionner plus rapidement. Vous pouvez identifier les tâches les plus longues qui retardent la réponse aux demandes des utilisateurs et les diviser en tâches plus petites et moins longues. Le fractionnement de code permet d'y parvenir.

Déplacer du JavaScript : Déplacez une partie de votre JavaScript vers un autre service worker. Cela rendra votre code moins complexe et permettra une exécution plus rapide dans le navigateur.

De plus, vous devez tenir compte d'un autre élément. Étant donné que le technicien de service n'a pas accès au modèle d'objet de document (DOM), il ne peut apporter aucune modification ni mise à jour. Par conséquent, si vous souhaitez déplacer votre JavaScript vers un autre agent de service, vous devez vous assurer qu'un développeur compétent s'en occupe.

#3. Comment améliorer le CLS

Le CLS mesure la stabilité des éléments de votre site, tels que les mises en page et les boutons. Il détermine le niveau de déplacement du contenu visible dans la fenêtre d'affichage de votre site en fonction de la taille et de la distance du contenu. Cette mesure prend en compte la taille et les dimensions des images, les polices multiples, les animations, les menus, les popups, etc.

Les changements de mise en page peuvent distraire les utilisateurs. Il est donc difficile pour les utilisateurs de se concentrer sur le contenu qu'ils consultent, par exemple, lorsqu'ils lisent un article ou qu'ils regardent des images. C'est extrêmement agaçant et personne ne voudra rester sur une telle page.

Comment améliorer le CLS

Vous devez donc optimiser votre site pour le CLS. Voici comment procéder.

Optimiser les images : Attribuez de l'espace aux images afin qu'elles puissent occuper leur espace de manière optimale et éviter tout décalage. Pour ce faire, définissez la largeur et la hauteur de vos images dans la balise <img>.

Contenu injecté : Un changement de mise en page peut se produire si vous insérez un élément de contenu dynamique au-dessus de votre contenu existant. Si vous prévoyez de le faire, prévoyez suffisamment d'espace à l'avance.

Polices : Assurez-vous qu'une police n'est pas remplacée par une autre. Elle doit également se charger rapidement à l'écran. En cas de modification de la police, cela peut provoquer un décalage notable, comme un éclair de texte sans style (FOUT) ou un éclair de texte invisible (FOIT), ce qui aura une incidence sur l'expérience utilisateur. L'utilisation d'une police système peut être utile. S'il n'y a rien à charger, il n'y aura ni changement ni retard susceptible de provoquer un décalage.

Comment évaluer les indicateurs Web essentiels de votre site Web ?

Vous pouvez utiliser n'importe quel outil pour vérifier les Core Web Vitals de votre site, par exemple :

Après avoir utilisé un outil, vous pouvez recueillir l'état de vos Core Web Vitals et consulter les mesures : LCP, FID, CLS, FCP, temps de blocage total, temps d'interactivité et indice de vitesse.

First Contentful Paint (FCP) : Il mesure le temps mis par le navigateur d'un utilisateur pour restituer les éléments DOM du site, tels que les SVG et les images. Il détermine également les ressources bloquant le rendu. Un FCP de 0 à 2 secondes est considéré comme rapide, de 2 à 4 secondes comme modéré et de plus de 4 secondes comme lent.
Indice de vitesse : Il indique le temps moyen que le contenu d'un site met à s'afficher pour un utilisateur. Il détermine le volume de JavaScript excessif sur votre site. Un indice de 0 à 4,3 secondes est considéré comme rapide, de 4,4 à 5,8 secondes comme modéré et de plus de 5,8 secondes comme lent.
Time to Interactive (TTI) : Le temps nécessaire pour que le contenu devienne entièrement interactif et fonctionnel. Il détermine les pages web contenant du JavaScript supplémentaire. Un TTI de 0 à 3,8 secondes est considéré comme rapide, de 3,9 à 7,3 secondes comme modéré et de plus de 7,3 secondes comme lent.
Temps de blocage total (TBT) : Il permet de vérifier le temps que met la page web à répondre aux actions de l'utilisateur. Un TBT de 0 à 300 ms est considéré comme rapide, de 300 à 600 ms comme modéré et de plus de 600 ms comme lent.

L'outil affichera le score de performance des Core Web Vitals de votre site. Vous pouvez également consulter les scores individuels de chaque mesure mentionnée ci-dessus et savoir où vous devez vous améliorer.

Offrir une expérience utilisateur exceptionnelle est un processus continu. Par conséquent, surveillez vos Core Web Vitals et optimisez-les régulièrement.

Conclusion

Offrir une excellente expérience utilisateur est essentiel pour la réussite de tous les sites web sur internet. Google l'a reconnu. C'est pourquoi ils ont introduit les Core Web Vitals l'année dernière afin de contribuer à garantir une expérience utilisateur de qualité. Vous pouvez utiliser les outils mentionnés ci-dessus pour vérifier les Core Web Vitals de votre site et les améliorer grâce aux conseils et astuces mentionnés.