Core Web Vitals : définition, introduction à LCP, FID et CLS, et conseils d'optimisation de Core Web Vitals

L'année 2021 est remarquable à plus d'un titre. Les moteurs de recherche ont évolué et sont devenus plus compétitifs que jamais. Google prévoit de lancer une nouvelle métrique révolutionnaire pour classer les sites Web sur son moteur de recherche. Une bonne expérience UX et de page deviendra un facteur de classement crucial - tout cela grâce aux éléments vitaux Web de base récemment introduits et qui seront bientôt lancés par Google.

Avec le déploiement prévu des principaux éléments vitaux Web de Google plus tard cette année, il est devenu de plus en plus essentiel pour les entreprises de rattraper et d'optimiser leurs sites Web en fonction de ce facteur de classement.

Si vous ne savez pas ce que sont les éléments vitaux Web de base, en quoi ils consistent et ce que vous pouvez faire pour optimiser les éléments vitaux Web de base de votre site Web, lisez la suite. Ce blog est fait pour vous.

Dans ce blog, nous couvrirons l'AZ des principaux éléments vitaux du Web et vous aiderons à optimiser votre page Web pour la même chose. Commençons.

Qu'est-ce que Core Web Vitals ?

Source de l'image : web.dev

Les éléments vitaux Web de base sont des signaux de classement ou un ensemble de critères et de mesures que Google utilise pour évaluer l'expérience utilisateur globale de votre site Web. Google Core Web Vitals évalue la vitesse, la réactivité et la stabilité visuelle de votre site Web ainsi que les signaux d'expérience utilisateur existants pour évaluer l'expérience globale de la page et la convivialité.

Google prévoit de lancer ce nouveau signal de classement dans le but d'améliorer la façon dont il étudie l'expérience globale fournie par votre page. L'aboutissement de ces données sera rassemblé par ce moteur de recherche pour classer votre site Web sur ses SERPS.

Plus le classement de votre site Web est élevé, plus sa visibilité sera élevée. Comme l'expérience de la page devient un élément de classement important, il est inévitable que vous y prêtiez attention. Pour vérifier les données Core Web Vitals de votre site Web, recherchez la section "améliorations" de votre compte Google Search Console.

Pourquoi Core Web Vitals est-il important ?

Les Core Web Vitals sont des signaux de classement qui font partie du score "d'expérience de la page" de Google. C'est important car Google fait de l'expérience de la page un facteur de classement officiel sur Google.
Source de l'image: backlinko.com

Voici quelques raisons pour lesquelles les données vitales du Web sont importantes et pourquoi elles devraient vous intéresser :

• Il s'agit d'une énorme opportunité de classement pour les sites Web à venir qui peuvent tirer pleinement parti de ce nouveau changement dans l'évaluation du classement de Google dès le début.
• Dans la guerre entre deux sites Web avec une qualité de contenu et un classement de site Web similaires, l'expérience de la page peut faire toute la différence.
• Les éléments vitaux du Web de base deviennent plus critiques maintenant, car les sites Web qui ont bénéficié d'un classement inégalé sur les SERP de Google courent désormais le risque de perdre leur classement actuel au profit de sites Web tout aussi compétitifs s'ils ne répondent pas aux nouvelles normes d'expérience de page.

Tout bien considéré, il est essentiel de se rappeler que le score d'expérience de votre page n'est que l'un des quelque 200 facteurs de classement que Google utilise pour classer les sites Web.

Pour rester en tête et profiter d'un avantage de classement concurrentiel par rapport aux autres, vous devez continuer à optimiser votre stratégie de référencement sur page et hors page existante tout en optimisant simultanément les éléments vitaux Web de base de votre site Web. Bien que vous ne perdiez pas votre classement du jour au lendemain, vous pouvez très certainement améliorer vos chances de classement en optimisant à l'avance les éléments vitaux de votre site Web.

Trois signaux de Core Web Vitals :

Source de l'image : web.dev

Les trois principales mesures de vitesse de page et d'interaction utilisateur prises en compte par Google dans son évaluation principale de Web Vitals incluent :

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

Signal 1 : Largest Contentful Paint (LCP) : Vérifie les performances de chargement

Le LCP est la première mesure vitale pour le Web que Google utilise pour calculer le score d'expérience de votre page. Il mesure les performances de chargement de votre page Web.

La plus grande peinture de contenu ou LCP peut être définie comme la durée nécessaire pour qu'une page de votre site Web se charge du point de vue d'un utilisateur réel. En termes simples, le temps qu'il faut à votre utilisateur pour cliquer sur un lien et voir la majorité du contenu de votre site Web à l'écran est appelé LCP.

LCP se concentre sur ce qui compte vraiment en termes de vitesse de page, c'est-à-dire la capacité d'un utilisateur à voir et à interagir avec votre page sans obstruction.

Pour vérifier votre score LCP, utilisez Page Speed ​​Insights de Google. Tout ce que tu dois faire est:

• Visitez l'outil Page Speed ​​​​Insights de Google .
• Entrez votre site Web dans le champ de recherche.
• Cliquez sur Analyser.

Après avoir cliqué sur "analyser", Google vous montrera un rapport complet de votre page actuelle. Parcourez-le pour en savoir plus sur les lacunes de votre site Web. Les résultats vous donneront également un aperçu des performances de votre page Web dans le monde réel sur la base des données du navigateur Chrome.

Vous pouvez également consulter directement vos données LCP sur la Search Console (GSC) de Google. Nous le recommandons plutôt que d'utiliser Page Speed ​​Insights de Google pour les raisons suivantes :

• Sur PageSpeed ​​Insights, vous obtiendrez un rapport d'une seule page Web que vous avez entrée dans la barre de recherche pour analyse. Sur la console de recherche, vous verrez les données LCP de l'ensemble de votre site Web.
• Grâce à la console de recherche de Google, vous obtiendrez une liste complète des URL de votre site Web qui sont bonnes, mauvaises ou quelque part entre les deux.
• Les directives LCP de Google classent le LCP de votre site Web comme « bon », « médiocre » et « nécessite une amélioration ».

La mesure LCP idéale est de 2,5 secondes ou plus rapide. Plus le contenu principal de votre page se charge rapidement, meilleur est votre score LCP. Cela peut être difficile pour vous si vous avez un grand site Web avec de grandes pages et de multiples fonctionnalités.

Signal 2 : premier délai d'entrée (FID) : vérifie l'interactivité/la réactivité

Le premier délai d'entrée est le deuxième élément vital du Web de Google. Il mesure l'interactivité.

En termes simples, le premier délai d'entrée (FID) fait référence au temps qu'il faut pour qu'une page devienne interactive. Vous pouvez dire qu'il mesure la durée qu'il faut pour qu'une activité se produise sur une page. Plus précisément, il mesure le temps qu'il faut aux utilisateurs pour faire quelque chose sur votre page.

La mesure FID idéale est inférieure à 100 ms.

Voici quelques exemples d'interactions sur la page qui sont calculées pour la notation FID :

• Le temps nécessaire à un utilisateur pour choisir une option dans le menu.
• Le temps nécessaire à un utilisateur pour saisir votre adresse e-mail dans un champ.
• Le temps qu'il faut à un utilisateur pour cliquer sur un lien dans la navigation du site.

Pour les sites Web professionnels qui collectent des données utilisateur ou demandent des informations de connexion, la notation FID est extrêmement cruciale.

Signal 3 : Décalage cumulatif de la disposition (CLS) : vérifie la stabilité visuelle

Un changement de disposition cumulatif (CLS) est un élément essentiel du Web qui mesure la stabilité visuelle. Il s'agit d'une métrique qui calcule toutes les modifications de mise en page qui ne sont pas causées par l'interaction de l'utilisateur. En d'autres termes, on peut dire que cette métrique prend en compte la stabilité visuelle d'une page lors de son chargement.

Si plus d'éléments sur votre page se déplacent pendant le chargement de la page, plus votre CLS sera élevé. Si moins d'éléments se déplacent pendant le chargement de votre page Web, plus votre CLS est faible.

Plus votre CLS est bas, meilleures sont les performances de votre score de page.

Un score CLS inférieur à 0,1 est considéré comme idéal pour une page Web, alors assurez-vous de cibler cela tout en optimisant votre site Web pour une expérience de page optimale.

Comment optimiser les trois Web Vitals (LCP, FID, CLS)

L'optimisation des trois éléments vitaux de base du Web est importante pour améliorer les performances de la page et l'expérience globale de la page de votre page Web. Voici quelques façons de les améliorer.
Comment optimiser le Largest Contentful Paint (LCP) :

Voici une liste de ce que vous pouvez faire pour améliorer le LCP de votre site Web :

• Minifiez votre CSS : plus le CSS est petit, plus votre LCP est rapide.
• Supprimez les éléments de page volumineux : Heureusement, Page Speed ​​Insights de Google vous indiquera s'il y a un élément sur votre site Web qui ralentit le LCP de votre page. Une fois que vous avez identifié de quoi il s'agit, vous pouvez le résoudre rapidement. Par exemple, une analyse du score LCP de Techmagnate sur Page Speed ​​Insights de Google montre cet élément comme défectueux :
• Mettez à niveau votre hébergeur : un meilleur hébergement s'accompagne de vitesses de chargement plus rapides (y compris LCP).
• Supprimez les scripts tiers inutiles : évitez autant que possible les scripts tiers.
• Configurer le chargement différé : le chargement différé signifie que les images ne se chargent que lorsqu'un utilisateur atteint ce point sur votre page Web qui contient une image. En configurant le chargement différé, vous pouvez atteindre LCP plus rapidement.

L'exécution des conseils mentionnés ci-dessus peut vous aider à améliorer la perfection LCP nécessaire pour obtenir un bon score LCP. Plus votre score LCP est élevé, meilleurs sont le score d'expérience de votre page et vos chances de classement. Alors optimisez votre LCP maintenant si vous ne l'avez pas déjà fait.

Comment optimiser le premier délai d'entrée (FID) :

Voici quelques étapes à suivre pour améliorer les scores FID de votre site :

• Minimiser (ou différer) Javascript : Minimiser ou différer JS sur votre page peut vous aider à améliorer la vitesse FID de votre page Web car la nécessité pour votre navigateur de charger JS est réduite ou éliminée.
• Supprimez les scripts tiers non critiques : les scripts tiers tels que Google Analytics et les cartes thermiques peuvent avoir un impact négatif sur le FID et la vitesse de chargement du contenu. Identifiez ceux qui ne sont pas cruciaux pour votre site Web et supprimez-les s'ils ne le sont pas pour votre page Web.
• Limitez le nombre de requêtes et minimisez la taille des transferts : optimisez le code pour limiter le nombre de requêtes et minimiser les tailles de transfert des fichiers HTML, des médias, des images, etc.

Comment optimiser le Cumulative Layout Shift (CLS) :

Voici quelques actions simples que vous pouvez entreprendre pour améliorer votre CLS :

• Attribuez aux éléments publicitaires un espace réservé sur votre page Web : effectuer cette tâche simple garantira que votre contenu reste là où il devrait être. Les pages Web qui n'ont pas d'espace publicitaire désigné ont tendance à gâcher la structure et le positionnement du contenu, le poussant parfois de haut en bas sur la page, ce qui entraîne un CLS élevé et un mauvais score d'expérience de page.
• Ajoutez de nouveaux éléments d'interface utilisateur sous le pli : lorsqu'un utilisateur parcourt une page de votre site Web, il s'attend à ce que les éléments restent là où ils se trouvent. En ajoutant des éléments d'interface utilisateur, vous pouvez vous assurer que cela se produit et que la structure du contenu de la page reste inchangée.
• Utiliser des dimensions d'attribut de taille définies pour les médias : l'utilisation d'une dimension d'attribut de taille définie pour les médias tels que les vidéos, les images, les GIF, les infographies ou d'autres éléments multimédias est importante. Cela vous montrera combien d'espace cet élément occupera sur cette page, vous aidant ainsi à protéger votre page Web d'un mauvais placement de contenu sans précédent.

Nos services de conception et de développement de sites Web aident à optimiser le score Core Web Vitals.

Comment mesurer le score Web Vitals :

Maintenant que vous savez quels sont les trois principaux éléments vitaux du Web, voici quelques outils pour vous aider à les mesurer.

• La console de recherche de Google : la console de recherche Google est un autre outil puissant et extrêmement pratique pour analyser vos principaux éléments vitaux Web. Il est livré avec un rapport Web vital unique dans la section des améliorations que vous pouvez vérifier chaque fois que vous effectuez un audit de site Web. La meilleure partie : au lieu de présenter les performances d'une seule page Web, la console de recherche vous montre toutes les données de performances des pages Web en une seule fois.
• PageSpeed ​​Insight : PageSpeed ​​Insight de Google est un outil puissant qui vous montre les principaux éléments vitaux de votre page Web ainsi que de précieux conseils sur les améliorations que vous pouvez apporter.
• Lighthouse : Lighthouse est un autre outil de Google que vous pouvez utiliser pour mesurer vos principaux éléments vitaux Web. Autrefois conçu pour auditer les PWA, il s'est maintenant transformé en un puissant outil de surveillance des performances. Armé de fonctionnalités supplémentaires et de vérifications SEO, Lighthouse peut être décrit à juste titre comme un outil puissant pour analyser les données de vitesse et d'expérience de page de votre page Web.
• GT Metrix : GT Metrix est un site Web de test et de surveillance des performances des sites Web. Il s'agit d'un outil gratuit que vous pouvez utiliser pour évaluer vos performances LCP, TBT et CLS.

Comment auditer Core Web Vitals à l'aide de Screaming Frog :

Le concept d'audit des éléments vitaux du Web de base est relativement nouveau. Pour ceux d'entre vous qui souhaitent rester préparés et optimiser les éléments vitaux Web de base de votre site Web, l'utilisation d'un outil comme Screaming Frog peut vous aider, surtout si vous avez déjà un abonnement à son abonnement premium.

Voici ce dont vous aurez besoin :

• Une version payante de Screaming Frog.
• Une clé API PageSpeed ​​Insights.
• Le domaine des sites Web que vous souhaitez auditer.

Commençons.

Étape 1 : Connecter la clé API PageSpeed ​​Insights à Screaming Frog

L'étape 1 de l'utilisation de Screaming Frog pour optimiser vos principaux éléments vitaux Web comprend la connexion de votre clé API PageSpeed ​​Insights avec celle-ci. Lorsque vous les connectez, vous pouvez accéder aux données et aux recommandations de PageSpeed ​​Insights page par page sur votre tableau de bord Screaming Frog.

Voici les étapes à suivre :

• Ouvrez Screaming Frog → Configuration → Accès API → PageSpeed ​​Insights.
• Pagez votre clé API de PageSpeed ​​Insights dans la case "Clé secrète".
• Cliquez sur ' Se connecter '.
• Après avoir cliqué sur 'Se connecter', cliquez sur ' Métriques '.
• Choisissez les métriques que vous souhaitez auditer, puis cliquez sur ' Ok '.

Étape 2 : Explorez le site Web.

La prochaine étape comprend l'exploration de votre site Web.

Tout ce que vous avez à faire est d'entrer le nom de domaine du site Web que vous souhaitez explorer dans la case qui se lit comme suit : "Entrez l'URL de l'araignée". Après avoir effectué la saisie, attendez que la barre de progression 'Crawl' et 'API' se charge.

Une fois qu'ils se chargent à 100 %, vous pouvez analyser vos données.

Étape 3 : Signalez le problème aux autorités compétentes.

Une fois que l'outil a chargé vos données, vous obtiendrez une compilation de toutes les pages Web de votre site Web. Ici, vous devez analyser le nombre de pages Web qui ne respectent pas les seuils minimaux de Core Web Vitals en termes de pourcentages.

Voici quelques étapes que vous pouvez suivre :

• Cliquez sur la barre de navigation supérieure.
• Cliquez sur Mise en page .
• Cliquez sur Page Speed ​​dans le menu déroulant.
• Cliquez sur Exporter .

Après avoir exporté les données, remplissez les colonnes suivantes :

• Temps de peinture de contenu le plus important (ms) : placez un filtre pour trouver des pages avec 4 000 ms de LCP ou plus.
• Temps de blocage total (ms) : mettez un filtre pour trouver les pages avec 300 ms TBT ou plus.
• Décalage cumulatif de la mise en page : placez un filtre pour trouver des pages avec 0,25 CLS ou plus.

Sur la base de ces données, vous pouvez créer un rapport et l'envoyer à un client. Si vous effectuez cet audit pour vos exigences d'optimisation de l'expérience de la page interne, vous pouvez envoyer ces données à l'équipe concernée, qui pourra exécuter les optimisations de la page en conséquence.

Étape 4 : Signalez les problèmes liés aux pages avec des recommandations.

Maintenant, c'est l'étape où ça devient intéressant. Vous connaissez maintenant le pourcentage de pages de votre site Web qui ne respectent pas les normes minimales Core Google Web Vitals. Et ensuite ?

Faites une compilation soignée des problèmes pertinents en fonction de la métrique que vous souhaitez cibler. Voici ce que vous pouvez faire :

• Sur le côté droit de l'onglet "Aperçu", faites défiler jusqu'à PageSpeed.
• Vous trouverez ici des problèmes et des recommandations liés à la vitesse des pages de votre site Web, y compris des solutions potentielles pour améliorer vos principaux éléments vitaux Web.
• La liste déroulante de la vitesse de la page comprendra diverses mesures telles que :
  • Éliminer les ressources bloquant le rendu (impacts LCP)
  • Minifier le CSS (impact LCP)
  • Minifier JavaScript (impacts FID)
  • Supprimer le CSS inutilisé (impact LCP)
  • Suppression du Javascript inutilisé (affecte le FID)
  • (et beaucoup plus)
• Cliquez sur un problème pour voir le nombre de pages concernées et exporter ces données dans votre feuille de calcul. Cela vous aidera à exporter toutes les URL avec les problèmes pertinents.
• Sur la base des données, vous pouvez émettre un jugement concernant la suppression ou le report de ces éléments de votre page Web.

Lecture supplémentaire : Qu'est-ce que le référencement de vitesse de page ?

Étape 5 : Post-audit et optimisation, parcourez à nouveau le site et comparez.

Une fois que vous avez identifié les facteurs affectant vos principaux éléments vitaux de Google Web, vous pouvez effectuer les optimisations. Après l'optimisation, votre travail consiste à explorer à nouveau votre site pour évaluer les résultats.

Comparez le pourcentage de pages Web qui ne répondent pas aux exigences minimales de Web Vitals après l'optimisation avec les chiffres avant l'optimisation.

Autres facteurs d'expérience de page à prendre en compte :

Voici une liste des principaux facteurs supplémentaires que Google considère comme nécessaires à l'expérience utilisateur :

• Navigation sécurisée : si votre site Web ne permet pas une navigation sécurisée, cela sera considéré comme une violation des normes d'expérience de page et vous obtiendrez un score d'expérience de page faible. Assurez-vous donc que votre site Web ne contient pas de contenu malveillant ou trompeur tel que des logiciels malveillants. Vous pouvez vérifier les normes de conformité de sécurité de votre site Web sur le rapport sur les problèmes de sécurité de Google.
• HTTPS : les sites Web qui commencent par HTTPS sont plus susceptibles d'avoir une connexion de site sécurisée. Si vous n'avez pas de site Web commençant par HTTPS, découvrez comment sécuriser votre site Web avec HTTPS ici.
• Convivialité mobile : vérifiez si votre page Web est adaptée aux mobiles à l'aide du test de compatibilité mobile de Google. Si votre page Web n'apparaît pas comme « adaptée aux mobiles » dans cette évaluation rapide, exécutez des stratégies pour optimiser votre site Web pour les téléphones mobiles et les tablettes. Entre autres choses, l'amélioration de l'expérience utilisateur et de l'interface utilisateur et le perfectionnement de la navigation hors toile peuvent aider.
• Pas d'interstitiels intrusifs : le contenu de votre page Web doit être facilement accessible à un utilisateur. L'absence de celui-ci peut vous amener avec un faible score d'expérience de page. Voici les principales choses à éviter pour rendre le contenu des pages Web plus accessible à vos utilisateurs :
  • Évitez d'utiliser des fenêtres contextuelles qui bloquent la majorité du contenu de votre site Web.
  • Évitez d'afficher un interstitiel autonome qui couvre tout l'écran. Ceci est intrusif car un utilisateur doit le rejeter avant de pouvoir accéder au contenu principal.

Conclusion:

Google est prêt à déployer les principaux éléments vitaux du Web en tant que signal de classement clé en mai 2021. Le besoin de l'heure est que les entreprises optimisent à l'avance leurs sites Web pour ce critère de classement clé.

Dans ce blog, nous avons illustré les étapes indispensables que vous pouvez suivre pour améliorer les éléments vitaux de votre site Web. Nous avons discuté de ce qu'est un élément vital Web de base, des trois principales mesures pour les éléments vitaux Web de base et de ce que vous pouvez faire pour optimiser votre page Web afin d'obtenir un bon score SEO pour les éléments vitaux Web de base.

Nous avons également décrit un hack rapide pour analyser l'expérience de la page pour ceux qui utilisent Screaming Frog pour l'audit de site Web. Nous espérons que les informations que nous avons fournies ici ont aidé. Mettez-les en œuvre dans votre stratégie d'optimisation de site Web pour maintenir votre classement Google.

Faites-nous savoir dans la section des commentaires si vous avez des doutes ou des questions.

Nous aimerions avoir de vos nouvelles.