Les Core Web Vitals sont les mesures essentielles que tous les propriétaires de sites Web doivent optimiser pour offrir une superbe expérience utilisateur, améliorer le référencement et tirer de nombreux avantages.

Il se concentre sur l'optimisation de votre vitesse de chargement du site, la réactivité et la stabilité de tous les visuels afin que les utilisateurs puissent visualiser le contenu plus rapidement et interagir avec votre site sans effort.

Ils ont besoin de sites plus rapides et réactifs pour interagir facilement avec les actions souhaitées et les effectuer, comme commander de la nourriture en ligne. La raison en est que les utilisateurs d'aujourd'hui détestent les sites Web lents qui consomment beaucoup de temps et entraînent de la frustration.

C'est là que Core Web Vitals brille !

Dans cet article, je vais vous éclairer sur Core Web Vitals et sur la manière dont vous pouvez améliorer les Core Web Vitals de votre site.

Commençons la balade !

What Do You Mean by Core Web Vitals?

Les Core Web Vitals de Google sont les trois mesures essentielles associées à la vitesse de chargement des pages, à l'interactivité et à la stabilité visuelle qui mesurent expérience utilisateur sur un site Web.

Vitaux Web de base
Qu'entendez-vous par Core Web Vitals?

Ces mesures ont été incluses par Google en tant que facteur de classement des moteurs de recherche dans son algorithme en 2021. Votre site Web obtient un "bon" ou un "mauvais" score sur ces mesures, indiquant si votre site est optimisé pour les trois éléments vitaux ou s'il a besoin d'améliorations.

Les Web Vitals de base relèvent des Web Vitals applicables à tous les sites Web et pages Web que les propriétaires de sites doivent mesurer et améliorer.

Ainsi, les trois métriques de Core Web Vitals sont :

  • La plus grande peinture contentieuse (LCP)
  • Premier délai d'entrée (FID)
  • Décalage de mise en page cumulatif (CLS)

Core Web Vitals in Detail

# 1. LCP - La plus grande peinture de contenu (chargement)

Large Contentful Paint (LCP) signifie la vitesse de chargement des pages d'un site Web pour garantir que les visiteurs peuvent accéder rapidement à votre site, ce qui est un facteur important pour améliorer l'expérience utilisateur.

Et pour garantir cela, votre LCP doit être dans les 2.5 secondes. Cela implique le temps que prend votre site lorsque l'utilisateur clique sur le lien pour afficher le contenu sur son écran.  

  • S'il est compris entre 2.5 et 4 secondes, votre site a besoin d'améliorations dans le chargement des pages.
  • De plus, s'il est supérieur à 4 secondes, le vitesse de chargement des pages est pauvre, et vous devez rapidement y travailler.
La plus grande peinture riche en contenu
LCP - La plus grande peinture de contenu (chargement)

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

Par exemple, si votre page Web a une image plus grande et un texte simple, l'image la plus grande sera le LCP. C'est parce que c'est le plus gros élément à charger dans votre navigateur et qu'il fait une impression significative. Ainsi, l'optimisation de l'image pour qu'elle se charge plus rapidement aidera la page Web à se charger plus rapidement, offrant ainsi une expérience utilisateur améliorée.

En d'autres termes, le LCP est le temps nécessaire à l'élément ou au contenu le plus important pour se charger sur l'écran de l'utilisateur. L'élément peut être des images, des vidéos, du texte ou d'autres types de contenu.

# 2. FID - Premier délai d'entrée (interactivité)

Le premier délai d'entrée (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 Web.

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

Pour garantir une bonne expérience du site aux utilisateurs, maintenez votre FID dans les 100 millisecondes (ms).

  • Si le FID se situe entre 100 ms et 300 ms, votre site a besoin d'améliorations en termes de réactivité.
  • Mais si elle dépasse 300 ms, la réactivité de votre site est médiocre et vous devez immédiatement la corriger pour offrir une excellente expérience utilisateur.
Premier délai d'entrée
FID - Premier délai d'entrée (interactivité)

Parfois, des retards se produisent si votre navigateur effectue d'autres tâches en arrière-plan. Même lorsqu'il a bien rendu la page et que le contenu est visible, lorsque vous cliquez sur un bouton, il se peut que rien ne se passe. Cela signifie que la page Web ne répond tout simplement pas à votre interaction. même si c'est le cas, c'est lent. Cela peut frustrer un utilisateur, entraînant une mauvaise expérience.

La raison en est que le navigateur est responsable de nombreuses tâches et ne peut pas tout faire en même temps, ou 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 nécessaire pour rendre votre page Web plus interactive ou plus réactive aux demandes de l'utilisateur.  

# 3. CLS - Changement de disposition cumulatif (stabilité visuelle)

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

Si le site n'est pas stable, cela entraîne une mauvaise expérience utilisateur. Par exemple, un utilisateur souhaite cliquer sur un bouton affiché sur la page Web alors qu'elle est encore en cours de chargement. Lorsqu'ils sont sur le point de cliquer dessus, le chargement de la page se termine et le bouton se déplace un peu. En conséquence, l'utilisateur peut finir par cliquer sur autre chose ou nulle part, ce qui augmente la frustration.

Ces irrégularités et changements peuvent se produire pour de nombreuses raisons, comme des publicités, des éléments lourds sur le site, etc.

Décalage de mise en page cumulatif
CLS - Changement de disposition cumulatif (stabilité visuelle)

Par conséquent, l'optimisation du CLS de votre site est essentielle pour le maintenir stable à tout moment, en veillant à ce que la mise en page, les conceptions et les boutons se comportent comme prévu.

Pour assurer 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 est compris entre 0.1 et 0.25.
  • Et s'il est supérieur à 0.25, la stabilité visuelle est médiocre et nécessite une correction rapide si vous souhaitez offrir une meilleure expérience utilisateur.

Pour atteindre votre cible pour la plupart des utilisateurs, mesurez chacune des métriques de Core Web Vitals au 75th centile.

How Important Are Core Web Vitals for SEO?

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

Maintenant, l'expérience de la page dépend de nombreux facteurs. Certaines des mesures importantes sont :

  • Vitesse de chargement
  • Stabilité visuelle
  • Réactivité
  • Mobile-friendly
  • HTTPS
  • Navigation sûre

Parmi eux, 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 assurer un bon classement sur Google. Ils ont le pouvoir de faire ou de défaire l'affaire.

Ainsi, lorsque vous optimisez pour LCP, FID et CLS, vous améliorer votre score SEO et l'expérience utilisateur, qui vous aideront à développer votre site Web. Voici les avantages que vous pouvez en attendre :

Chargement plus rapide : Les gens aiment les sites plus rapides qui peuvent se charger en un tournemain. Cela leur fait non seulement gagner du temps, mais leur fournit également les informations qu'ils recherchent sans les faire attendre. Cela augmente leur expérience utilisateur et votre apparence sur les moteurs de recherche s'améliore. L'optimisation de votre LCP peut vous aider à y parvenir.

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

Réactivité: C'est inutile si votre site se charge mais ne répond pas bien aux requêtes des utilisateurs. Mais si vous améliorez le FID de votre site, vous pouvez améliorer sa réactivité que tout le monde aime. De ce fait, de plus en plus de personnes viendront interagir régulièrement avec votre site pour lire des articles, faire des achats, chercher des informations, etc. Tout cela augmente votre SEO (Référencement) et de présence, attire plus de visiteurs et les encourage à revenir.

Réalisation de mises en page et d'éléments : Quelle que soit la qualité de la conception de vos éléments tels que les boutons, les arrière-plans, les mises en page, etc., ils risquent de mal fonctionner lors du chargement du site si vous ne les optimisez pas, ce qui entraînera une mauvaise expérience. Mais l'optimisation de la stabilité visuelle de votre site permettrait à chaque élément de fonctionner à merveille et aiderait les utilisateurs à mieux interagir avec les visuels.

How to Improve Core Web Vitals?

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

# 1. Comment améliorer LCP

Idéalement, le Large Contentful Paint (LCP) de votre site doit être inférieur à 2.5 secondes pour un minimum de 75 % du nombre total de visites de pages.

De nombreux facteurs affectent 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 LCP. LCP est le Web vital pour lequel la plupart des sites Web ont besoin optimisation automatisée.

LCP mesure la vitesse de chargement du contenu principal d'une page Web. Ainsi, cette métrique affecte les images principales, les polices multiples, les vidéos, le contenu de chargement paresseux, les images d'arrière-plan, etc.

Ainsi, pour améliorer votre LCP, vous devrez rationaliser le processus de chargement complet et l'optimiser. Comme cela peut être un peu complexe, décomposer la tâche la rend plus accessible.

  1. Compresser les tailles de fichiers: Si vous pouvez compresser ou supprimer la taille de n'importe quel fichier, cela aidera à accélérer la vitesse de chargement de votre page. Vous voudrez peut-être vérifier tout code ou fichier non utilisé et vous en débarrasser. Et si vous voulez compresser la taille du fichier, c'est plus facile pour chaque type de fichier, que ce soit HTML, CSS, JavaScript, ou des images.
Compresser les tailles de fichiers
Comment améliorer LCP

2. Rapprocher le contenu des utilisateurs: S'il y a une grande distance entre les utilisateurs et le serveur sur lequel le contenu de votre site est stocké, le temps de chargement sera long, ce que nous visons à réduire ici. Par conséquent, choisissez un centre de données pour héberger le contenu de votre site là où se trouve géographiquement votre audience.

Vous pouvez également utiliser un CAN sauf si votre public vient d'une zone géographique plus petite. Un CDN vous aidera à distribuer votre contenu plus rapidement, quelle que soit sa taille, et offrira une meilleure expérience utilisateur puisque les utilisateurs peuvent accéder au contenu plus rapidement quand et où ils le souhaitent.

Si possible, utilisez le même serveur pour éviter des délais supplémentaires tout en établissant une connectivité sécurisée entre le serveur et l'utilisateur pour chaque connexion. Vous pouvez également utiliser un DNS prélecture ou pré-connexion pour démarrer les connexions plus tôt.

3. Ressources de cache: La mise en cache des ressources aidera à télécharger les ressources pour la première vue de la page Web sans nécessairement les télécharger pour les vues suivantes. Comme les ressources seront déjà disponibles, les autres pages se chargeront plus rapidement.

4. Réduire le TTFB: Livrez votre HTML initial rapidement car il impacte directement les prochaines étapes. Par conséquent, réduisez votre temps au premier octet (TTFB) pour aider à améliorer d'autres métriques de chargement de page.

Réduire le TTFB
Réduire le TTFB

5. Prioriser les ressources: Prioriser la manière dont les ressources de votre site sont chargées dans le chemin de rendu. Assurez-vous qu'ils sont classés dans 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 faire le reste.  

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

# 2. Comment améliorer le FID

LCP et First Contentful Paint (FCP) mesurent le temps de chargement d'une page Web. Cependant, ces mesures ne mesurent pas la réactivité de la page aux demandes de l'utilisateur.

Ainsi, tout va en vain même si votre site est chargé et que l'utilisateur ne peut pas effectuer l'action souhaitée.

C'est là que le premier délai d'entrée (FID) aide à capturer la réactivité ou l'interactivité du site à la demande de l'utilisateur.

Améliorer le FID
Comment améliorer le FID

Le FID mesure le temps entre la première interaction de l'utilisateur et le moment où le site répond à cette interaction, comme cliquer sur un bouton et aller sur cette page. Cette métrique affecte le code tiers, JavaScript, les scripts de suivi, etc. Le FID idéal est inférieur à 100 ms, et les moyens d'améliorer le FID sont :

  1. Réduire le volume d'exécution de JavaScript: Si vous utilisez un Framework JavaScript, le chargement de la page nécessite beaucoup de JavaScript, ce qui peut prendre un certain temps à traiter dans votre navigateur. C'est ainsi que des retards peuvent survenir. Ainsi, si vous utilisez SSR ou le prérendu, vous pouvez transférer cette charge sur le serveur et non sur votre navigateur. 
  2. Cassez votre JavaScript : Décomposer votre JavaScript en plus petits morceaux peut vous aider à le faire fonctionner plus rapidement. Ainsi, trouvez les tâches les plus longues qui retardent la réponse aux demandes des utilisateurs et divisez-les en tâches plus petites consommant moins de temps. Vous pouvez le faire à l'aide du fractionnement de code.
  3. Déplacer du JavaScript: Déplacer une partie de votre JavaScript vers un autre service worker. Cela rend votre code moins complexe et s'exécute plus rapidement dans le navigateur. 

De plus, vous devez vous occuper d'une autre chose. Étant donné que le technicien de service ne peut pas accéder au modèle d'objet de document (DOM), il ne peut apporter aucune modification ni mise à jour. Donc, si vous souhaitez déplacer votre JavaScript vers un autre agent de service, assurez-vous qu'un développeur compétent peut s'en occuper.

# 3. Comment améliorer le CLS

CLS mesure la stabilité des éléments de votre site tels que les mises en page, les boutons, etc. Il détecte à quel point votre contenu visible se déplace dans la fenêtre d'affichage de votre site en fonction de la taille et de la distance du contenu. Cela affecte les tailles et dimensions des images, les polices multiples, les animations, les menus, les popups, etc. 

Les changements de mise en page pourraient distraire les utilisateurs. Il est donc difficile pour les utilisateurs de se concentrer sur le contenu qu'ils consultent, comme la lecture d'un article ou la navigation sur certaines images. C'est extrêmement ennuyeux, et personne n'aimera rester sur une telle page. 

Comment améliorer le CLS
Comment améliorer le CLS

Par conséquent, vous devez optimiser votre site pour CLS. Voici comment procéder. 

  1. Optimisation des images: Allouer l'espace aux images afin qu'elles puissent remplir leur espace de manière optimale et éviter tout décalage. Pour cela, vous voudrez définir la largeur et la hauteur de vos images dans la balise - .
  2. Contenu injecté : Un changement de mise en page peut se produire si vous insérez dynamiquement un élément de contenu au-dessus de votre contenu existant. Donc, si vous le prévoyez, prévoyez suffisamment d'espace au préalable.
  3. Fonts: Assurez-vous qu'une police n'est pas remplacée par une autre pour les polices apparaissant sur votre site. Il doit également se charger rapidement à l'écran. C'est nécessaire car si une police est modifiée, un décalage notable peut se produire, tel qu'un éclair de texte sans style (FOUT) ou un éclair de texte invisible (FOIT). Cela impacte l'expérience utilisateur. Ici, l'utilisation d'une police système peut aider. Ainsi, lorsque vous n'avez rien à charger, il n'y aura pas de changements ou de retards pour provoquer un décalage. 

How to Assess Core Web Vitals for Your Website?

Vous pouvez utiliser n'importe quel outil que vous souhaitez vérifier le Core Web de votre site Vitals, tels que : 

Une fois que vous utilisez un outil, vous pouvez recueillir l'état de vos Core Web Vitals. Vous pouvez afficher les métriques - LCP, FID, CLS, FCP, temps de blocage total, temps d'interactivité et indice de vitesse.

  • Première peinture de contenu (FCP): Il mesure le temps mis par le navigateur d'un utilisateur pour restituer les éléments DOM du site comme les SVG, les images, etc. Il détermine également les ressources bloquant le rendu. 0-2 secondes est considéré comme un FCP rapide, 2-4 secondes modéré et 4+ secondes est considéré 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. 0-4.3 secondes est considéré comme rapide, 4.4-5.8 secondes comme modéré, tandis que 5.8+ secondes est considéré comme lent.  
  • Temps d'interactivité (TTI) : Il faut du temps pour que le contenu devienne entièrement interactif et fonctionnel. Il détermine les pages Web avec JavaScript supplémentaire. 0-3.8 secondes sont considérées comme rapides, 3.9-7.3 secondes modérées et 7.3+ secondes lentes.
  • Temps total de blocage (TBT): Il vous aide à vérifier le temps pris par la page Web pour répondre à l'entrée de l'utilisateur. 0-300 ms est considéré comme rapide, 300-600 ms est modéré et 600+ est lent. 

L'outil affichera le score de performance des Core Web Vitals de votre site. Vous pouvez également voir les scores individuels pour chacune des mesures ci-dessus et expliquer où vous manquez et comment améliorer votre score.   

Étant donné que fournir une expérience utilisateur exceptionnelle est un voyage continu, gardez toujours un œil sur vos Core Web Vitals et optimisez-les régulièrement. 

Conclusion

Fournir une excellente expérience utilisateur est nécessaire pour que tous les sites Web prospèrent sur Internet ; même Google l'a reconnu. C'est pourquoi ils ont introduit Core Web Vitals l'année dernière pour aider à offrir une expérience utilisateur de qualité. Vous pouvez utiliser n'importe quel outil mentionné ci-dessus pour vérifier les Core Web Vitals de votre site et trouver des moyens de les améliorer avec les conseils et astuces mentionnés ci-dessus.