Qu'est-ce que Core Web Vitals et comment les améliorer ? [2020]

Selon Google, l'expérience utilisateur est l'un des nombreux facteurs de classement (environ 200) qu'ils utilisent pour classer les sites Web sur la page de résultats de recherche.

Ainsi, l'optimisation pour une meilleure expérience utilisateur aide un site Web à réussir à long terme sur Internet. Les métriques de base Web Vitals vous aident à mesurer l'expérience utilisateur sur votre site Web et vous offrent des opportunités de l'améliorer.

Alors, comprenons ce que c'est et comment vous pouvez améliorer votre score et donner à votre site Web un avantage par rapport aux autres.

Que sont les Core Web Vitals ?

Les éléments vitaux Web de base sont un ensemble de facteurs spécifiques qui sont essentiels pour offrir une expérience utilisateur de qualité sur le Web. Il est composé de trois mesures principales de la vitesse de la page et de l'interaction de l'utilisateur : la plus grande peinture de contenu, le premier délai d'entrée et le changement de mise en page cumulé.

En d'autres termes, les Core Web Vitals sont le sous-ensemble des Web Vitals utilisés par les propriétaires de sites et tous les outils Google pour mesurer l'expérience utilisateur.

Il existe plusieurs autres éléments vitaux Web tels que Mobile friendly, navigation sécurisée, HTTPS, pas d'interstitiels intrusifs, etc. qui mesurent l'expérience utilisateur sur un site Web. Mais il est très difficile pour certains utilisateurs de suivre toutes les métriques d'utilisation à la fois. C'est pourquoi Google a introduit le concept de base Web Vitals où il se concentre uniquement sur le chargement, l'interactivité et la stabilité visuelle des métriques clés.

Vous pouvez suivre les données vitales Web de base de votre site Web dans la section "améliorations" de votre compte de console de recherche. Vous pouvez voir la liste des pages où l'expérience utilisateur n'est pas très bonne et elle suggère également comment vous pouvez l'améliorer.

Pourquoi les éléments vitaux Web de base sont-ils importants pour le référencement ?

Cette année, Google a annoncé dans le blog central de recherche le signal d'expérience de page.

Auparavant, Google prenait en compte plusieurs signaux d'expérience de page pour le classement, notamment :

• HTTPS
• Convivialité mobile
• Manque de pop-ups interstitiels
• « Navigation sécurisée » (essentiellement, ne pas avoir de logiciels malveillants sur votre page)

Mais maintenant, ils y ont ajouté les éléments vitaux du Web. Il y tient une place majeure. Une bonne expérience de page ne remplace pas un contenu pertinent. Mais cela vous donne un avantage concurrentiel sur la page à faible expérience de page.

Si la qualité du contenu des deux sites Web est la même, Google utilise le signal d'expérience de page pour choisir le gagnant. C'est pourquoi vous devez travailler sur les éléments vitaux de base de votre site Web.

Mais ne vous inquiétez pas, vous avez le temps de résoudre ce problème jusqu'à l'année prochaine 2021. Mais Google utilise également le score de performance passé pour le classement. C'est pourquoi vous devez commencer à travailler là-dessus.

Dans cet article, je vais vous guider sur la façon dont vous pouvez améliorer votre score Web Vitals.

La plus grande peinture de contenu (LCP)

LCP mesure les performances de chargement d'un site Web. Cela signifie combien de temps le site Web prend pour charger complètement la page.

Il compte le temps de chargement de la première section visible du site Web. C'est pourquoi vous pouvez hiérarchiser vos ressources et charger le contenu essentiel en premier.

Selon Google, LCP ne dépasse pas 2,5 secondes lorsque la page commence à se charger.

LCP est différent d'autres mesures telles que Time To First Byte (TTFY) et First contentful paint car il mesure les performances réelles du rapport chrome UX.

Il se concentre sur le temps de chargement de la page pour voir l'utilisateur réel et commencer à interagir avec la page Web.

Vous pouvez vérifier votre score LCP dans Google Page Speed ​​Insight . Il affiche les données en vérifiant l'intégralité du site Web et affiche la liste des URL où des améliorations doivent être apportées.

Vous pouvez voir le score mobile de mon site Web qui est d'environ 60 et cela peut être amélioré si je travaille sur la conception de mon site Web mobile. Sur le bureau, le score de mon site Web est supérieur à 90, mais sur l'appareil mobile, il n'est que de 60 en raison d'une grande quantité de peinture de contenu.

Mais ne vous fiez pas complètement à ce score car il change avec le temps et vous demande parfois de supprimer des plugins ou des scripts essentiels pour améliorer les performances.

Vous pouvez également voir une alerte concernant la peinture de contenu volumineux dans la console de recherche Google . (CGC)

Le LCP est également divisé en trois catégories.

1. Bien
2. A besoin d'amélioration
3. Pauvre.

Si votre LCP est inférieur à 2,5 secondes , cela est considéré comme bon, un score compris entre 2,5 et 4 secondes est considéré comme nécessitant une amélioration et un score supérieur à 4 secondes est considéré comme médiocre.

Vous pouvez également remarquer qu'il est très difficile d'atteindre un LCP inférieur à 2,5 sur les appareils mobiles. Essayez toujours de le garder en dessous de 4 secondes.

Étapes pour améliorer le score LCP :

Configurer le chargement différé

pensez à utiliser le Lazy Loading sur votre site Web. Si vous utilisez WordPress 5.4 ou supérieur , le chargement différé est activé par défaut sur les images. Vous devriez vous concentrer sur les vidéos Lazy Loading car cela ralentit les pages.

Supprimez tous les scripts tiers inutiles :

Assurez-vous d'utiliser uniquement le script nécessaire et supprimez tous les scripts tiers de votre site Web. Assurez-vous de réduire le blocage du thread principal à environ 150 à 160 ms.

Mettre à niveau l'hébergement Web :

Essayez d'utiliser un hébergement Web meilleur et plus fiable en fonction de la taille de votre site Web. Il joue un rôle très important dans la vitesse de chargement du site Web.

Si vous ne savez pas comment choisir le meilleur hébergement Web, vous devriez consulter le Guide sur Différents types d'hébergement web avec guide d'achat .

Supprimez les éléments de page volumineux :

L'outil d'analyse de la vitesse de la page vous montre les éléments de page volumineux que vous pouvez supprimer pour améliorer votre score.

Minifier le CSS

Les éléments CSS volumineux affectent le score LCP d'un site Web. C'est pourquoi vous devez minifier votre code CSS pour améliorer LCP.

Premier délai d'entrée (FID)

Le premier délai d'entrée mesure le temps que prend l'utilisateur pour interagir avec votre page. Cela signifie le temps pris par un navigateur Web pour traiter votre page Web et l'utilisateur pourra interagir avec la page comme cliquer sur un lien, faire défiler la page ou saisir les informations de connexion , etc.

La principale raison du retard dans l'interaction de l'utilisateur est les principales tâches de script bloquant les threads .

Il est très important de maintenir le temps FID bas car il affecte directement l'expérience utilisateur sur votre site Web. Google a défini le score FID acceptable en dessous de 100 MS .

Pour les sites Web comme les blogs ou les articles , le FID n'a pas le plus d'importance car l'interaction qui se produit est le défilement de la page ou le zoom avant ou arrière, l'inscription à une newsletter par e-mail.

Mais pour le site Web où la connexion ou l'inscription est requise, le FID y joue un rôle majeur. Parce que les utilisateurs doivent saisir les informations de connexion dans le formulaire et que le site Web met très longtemps à accepter les informations, cela créera une très mauvaise expérience utilisateur.

Le FID est également important pour les sites Web tels que les sites Web de commerce électronique où les utilisateurs doivent ajouter le produit au panier et se connecter au compte d'utilisateur. C'est pourquoi vous devez travailler sur la minimisation du premier délai d'entrée (FID).

Étapes pour améliorer le score FID :

Supprimez les scripts tiers inutiles :

Vous pouvez améliorer votre score FID en supprimant les scripts inutiles (comme Google Analytics, heatmaps, Onesignal, etc.)

Différer JavaScript :

Si votre site Web charge du javascript au début du chargement de la page, il est difficile pour les utilisateurs d'interagir rapidement. C'est pourquoi vous pouvez activer le Defer javascript en utilisant des plugins de cache comme WP-Rocket, Litespeed cache, etc.

Il chargera les fichiers javascript qui ne sont pas nécessaires au début du chargement de la page. Cela améliorera considérablement la vitesse globale de votre site Web.

Activer le cache du navigateur :

En activant le cache du navigateur, vous économiserez beaucoup de ressources serveur et votre site Web ne demandera pas tous les fichiers pour les anciens visiteurs. Le navigateur chargera certains fichiers de base à partir du fichier cache et améliorera votre score FID.

Activer la compression Gzip

Vous pouvez réduire la taille de vos fichiers HTML et CSS jusqu'à 80 % en activant la compression Gzip. Vous pouvez le faire via Cloudflare CDN ou depuis votre tableau de bord d'hébergement Web.

Décalage de mise en page cumulé (CLS)

Le changement de mise en page cumulatif se concentre sur la stabilité visuelle globale de votre site Web. Cela se produit généralement en raison de la manipulation du DOM ou du manque d'attributs de dimension pour les principaux éléments multimédias.

Selon Google, le CLS devrait être inférieur à 0,1 . Vous pouvez mieux comprendre comment les changements de mise en page cumulatifs se produisent sur le site Web dans les graphiques ci-dessous.

Étapes pour améliorer le score CLS

Utilisez des fichiers multimédias de dimensions d'attribut de taille définie (vidéo, images, GIF, infographies, etc.) :

Vous pouvez définir une taille spécifique de média afin que le navigateur de l'utilisateur sache combien d'espace cet élément va occuper. Ainsi, cela ne changera pas une fois la page entièrement chargée.

Espace réservé pour le placement d'annonces

Si vous utilisez des annonces automatiques sur Adsense, vos annonces s'affichent de manière aléatoire et parfois, elles poussent le contenu ci-dessous pour afficher des annonces. C'est pourquoi vous devez réserver un espace spécifique pour le placement d'annonces sur le site Web.

Ajoutez de nouveaux éléments d'interface utilisateur sous la page Web :

Si vous utilisez des éléments d'interface utilisateur tels que des fenêtres contextuelles, vous pouvez les afficher au bas de votre site Web. De cette façon, cela ne poussera pas le contenu vers le bas et n'améliorera pas votre score CLS.

Conclusion

Les éléments vitaux Web de base font partie des meilleurs signaux d'expérience utilisateur dont disposent aujourd'hui les développeurs et les propriétaires de sites Web. Si vous suivez correctement les directives ci-dessus, vous pouvez facilement améliorer votre vitesse globale et améliorer votre score Web Vitals.

Maintenant c'est ton tour.

Quelle méthode allez-vous essayer en premier, faites-le moi savoir dans la section des commentaires ?

Si vous aimez cet article, partagez-le avec votre communauté de blogueurs sur les réseaux sociaux.