Core Web Vitals - Que sont-ils et comment les améliorer ?

Google a introduit un nouveau programme en 2020, qui s'appelle Web Vitals. Il s'agit d'une technique qui offre des conseils sur les signaux de qualité. Selon Google, ces mesures sont essentielles pour offrir une excellente expérience utilisateur sur le Web. En mai 2021, Google a commencé à utiliser Core Web Vitals comme métrique pour le classement de recherche sur sa plateforme.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont des métriques permettant de mesurer l'expérience utilisateur sur un site. Ils mesurent la vitesse à laquelle les utilisateurs peuvent interagir avec un site Web et les résultats qu'ils obtiennent en fonction de leur recherche. Les Core Web Vitals fonctionnent comme des signaux qui évaluent à quel point il est facile et transparent pour les visiteurs du site de naviguer sur un site.

Lorsque vous améliorez votre site et l'expérience utilisateur, l'expérience de votre page obtiendra un score plus élevé en utilisant les métriques de Core Web Vitals. Google identifie trois métriques Core Web Vitals que les propriétaires de sites doivent connaître et intégrer. Ceux-ci sont énumérés ci-dessous :

Chargement : également appelé Largest Contentful Paint (LCP), le chargement mesure la vitesse à laquelle les éléments les plus volumineux se chargent et s'affichent sur un site. Ces éléments incluent des animations, des vidéos, du texte, des images et autres.

Interactivité : Google appelle ce Cumulative Layout Shift (CLS) et s'assure que les pages d'un site Web ne présentent pas de fonctionnalités inattendues ou de mouvements déroutants susceptibles de distraire ou de déranger les utilisateurs lors de la consommation du contenu de votre site.

Stabilité visuelle : c'est ce que l'on appelle techniquement le premier délai d'entrée (FID) et il reflète le niveau de réactivité des pages d'un site lorsque les visiteurs du site interagissent avec elles pour la première fois. FID mesure également la vitesse à laquelle un navigateur peut générer des résultats pour les utilisateurs de votre site.

Comment améliorer Core Web Vitals sur votre site Web

La première chose à faire est d'effectuer une analyse rapide des performances du site Web pour voir comment votre site Web se comporte dans les principales métriques Web Vitals. Vous pouvez utiliser différents outils pour cette analyse, notamment Google Search Console et Page Speed ​​Insights, entre autres. Après avoir exécuté l'analyse, vous découvrirez peut-être que vous devez mettre en œuvre certains des conseils suivants pour vous aider à améliorer votre site.

• Réduire l'exécution de JavaScript

Une mauvaise note FID signifie que la page de votre site Web interagit avec les visiteurs pendant plus de 300 millisecondes. Lorsque vous réduisez et optimisez votre exécution JavaScript, cela réduit le délai entre le moment où votre navigateur exécute les codes JavaScript. Il en résulte un délai d'exécution réduit. Google recommande de différer le JavaScript inutilisé pour réduire l'exécution. Pour savoir si votre site contient des JS inutilisés, suivez les étapes ci-dessous :

• Accédez à votre site et cliquez avec le bouton droit de la souris sur n'importe quel côté, puis sélectionnez "Inspecter"

• Cliquez sur l'onglet "Sources" et cochez les trois points en bas. Ajoutez un outil "Couverture" et cliquez sur la fonction de chargement. Attendez que le chargement soit terminé et vous pourrez voir le volume de JS inutilisé sur votre page.

Avec cette connaissance, vous pouvez commencer à réduire l'exécution de JS. Une façon de réduire l'exécution consiste à utiliser le fractionnement du code. Comment cela marche-t-il? Décomposer le bundle JavaScript en petits morceaux. Les JS groupés sont des fichiers combinés qui sont regroupés pour éviter trop de requêtes HTTP nécessaires pour charger une page Web.

Compresser et optimiser les images

Pour de nombreux sites Web, les images sont les éléments les plus volumineux de leurs pages. Pour vous assurer que votre site Web passe les mesures de chargement, vous devriez envisager d'optimiser les images sur votre site. Avec cela, votre page Web devient plus légère et la vitesse de chargement augmentera considérablement.

Une page plus légère améliorera également l'expérience utilisateur, le score LCP et le classement dans les résultats des moteurs de recherche. Pour réduire la taille de votre page, compressez les images à l'aide d'un outil comme Tiny JPG. La réduction de la taille globale de votre page n'affectera pas la résolution et la qualité, mais elle améliorera les résultats LCP de votre site.

Nous vous recommandons d'utiliser le format PNG pour les graphiques et JPG pour les images de paysage. Outre la compression des images, vous pouvez également activer le CDN (Content Delivery Network) pour les images de votre site.

Content Delivery Network est un groupe de serveurs à travers le monde qui stocke le contenu du Web. Ces serveurs sont répartis sur différents emplacements ; les images peuvent être livrées plus rapidement depuis le serveur le plus proche de l'utilisateur.

Implémenter le chargement paresseux

La mise en œuvre du chargement différé est très cruciale lors de l'affichage d'images sur votre site. Lorsque vous utilisez cette technique, votre score Web Vitals et votre expérience utilisateur sur votre site ne seront pas affectés négativement. Alors, qu'est-ce que le chargement paresseux ? Le chargement différé permet à votre site de charger des images au moment même où un utilisateur fait défiler la page. Cela garantit que la vitesse de chargement de votre site n'est pas compromise et que vous pouvez atteindre un niveau de score LCP supérieur. Il existe de nombreux avantages associés au chargement paresseux. Ils comprennent:

• Amélioration des performances du site

• Restriction d'utilisation de la bande passante

• Amélioration du référencement sur le site

• Fidéliser les visiteurs du site et minimiser le taux de rebond

Si vous exploitez un site Web avec des pages contenant de nombreuses vidéos, animations, images et autres éléments lourds, il est important d'utiliser le chargement différé. Après avoir mis en œuvre cette astuce, vous pouvez comparer votre score LCP précédent au nouveau que vous obtenez après la mise en œuvre du chargement paresseux.

Utiliser les dimensions appropriées pour les intégrations et les images

Un score CLS supérieur à 0,1 est considéré comme médiocre. Les principaux coupables d'un score aussi médiocre sont les éléments lourds, tels que les intégrations, les publicités et les images sans dimension. Pour améliorer le score CLS de votre site, faites attention aux dimensions. Lorsque vous utilisez une largeur et une hauteur précises pour les images et les intégrations, il devient plus facile pour le navigateur d'allouer le bon volume d'espace dans la page pendant le processus de chargement. Assurez-vous de définir les dimensions appropriées pour les images et les intégrations lors de l'insertion de vidéos YouTube sur votre site Web. Voici comment redimensionner les vidéos de YouTube pour les afficher sur votre site.

• Accédez à YouTube et ouvrez la vidéo que vous souhaitez intégrer à votre site.

• Recherchez le bouton de partage et sélectionnez l'option <> Intégrer.

• Vous verrez tous les détails sur la vidéo, y compris la dimension. Copiez le code et collez-le dans le backend de votre site. Cela le changera à la largeur et à la hauteur correctes pour s'adapter correctement à votre site.

Dernières pensées

Ce sont les meilleurs conseils que vous pouvez utiliser pour améliorer les éléments vitaux Web de base de votre site Web. Dans cet article, nous avons examiné les bases des éléments vitaux Web de base et des conseils que vous pouvez utiliser pour améliorer vos scores. Des scores améliorés signifient que votre classement augmentera dans les résultats de recherche et qu'il y aura un taux significatif de taux de rebond sur votre site.