Qu'est-ce que Core Web Vitals et comment l'optimiser

Publié: 2023-06-12

En 2021, Google a intégré l'expérience de la page comme facteur de classement. Son objectif principal est d'améliorer les performances Web. Avec Page Experience Update, Core Web Vitals est devenu un facteur essentiel à prendre en compte si vous souhaitez que votre site se classe dans les résultats de recherche Google.

Lorsque quelqu'un recherche sur Google un mot-clé spécifique, comment Google déterminera quel site il doit afficher en haut et lequel en bas. Eh bien, sans aucun doute, il considère le contenu en premier. Le contenu dominera toujours le classement, mais en dehors du contenu, Google mesure également de nombreux autres éléments de la page Web, tels que les mots clés, l'utilisation de ces mots clés dans votre page, les backlinks et bien d'autres. Les performances de la page en font également partie. Google mesure les performances des pages en fonction des principaux éléments vitaux du Web.

Dans cet article, nous discuterons de Core Web Vitals et de la manière dont vous pouvez l'optimiser pour vous classer plus haut dans les résultats de recherche et acquérir plus de trafic.

Qu'est-ce que Core Web Vitals

La plus grande peinture de contenu, le premier délai d'entrée et le changement de mise en page cumulé sont les trois indicateurs de performance clés qui composent Core Web Vital, et ils mesurent la rapidité et l'efficacité d'une page qui se charge pour les utilisateurs, ainsi que l'interactivité et la stabilité des éléments du site Web. restent tout au long du processus de chargement.

Décomposons-le davantage pour une meilleure compréhension.

1. LCP (La plus grande peinture de contenu)

LCP évalue la rapidité avec laquelle le plus grand élément du site au-dessus du pli (images, vidéo, animations, texte, etc.) peut se charger et apparaître.

Un bon LCP dure 2,5 secondes, tandis que tout ce qui se situe entre 2,5 et 4 secondes doit être amélioré et au-delà de 4 secondes est considéré comme médiocre par Google.

LES PLUS GRANDES STATISTIQUES DE PEINTURE CONTENU

  1. La plus grande peinture de contenu représente 25 % de votre score de performance Google Lighthouse.
  2. 43 % des URL mobiles et 44 % des URL de bureau passent le test de référence le plus important de Contentful Paint de 2,5 secondes.
  3. Selon les recherches, le site Web B2B moyen a un score mobile de 7,05 secondes, bien au-dessus du score de 2,5 secondes nécessaire pour recevoir une note de passage.
  4. Selon les recherches, le site Web de vente au détail moyen a un score mobile de 9,17 s, bien au-dessus du score de 2,5 s nécessaire pour recevoir une note de passage.

2. FID (premier délai d'entrée)

Le FID d'une page est le temps qu'il faut au navigateur pour commencer à traiter les gestionnaires d'événements en réponse à la première interaction de l'utilisateur avec la page, comme un clic, une pression.

Un bon FID est inférieur à 100 ms, tandis que tout ce qui se situe entre 100 et 300 ms doit être amélioré, et au-dessus de 300 ms est considéré comme médiocre.

STATISTIQUES DE RETARD DE LA PREMIÈRE ENTRÉE

  1. Le premier délai d'entrée représente 25 % de votre score de performance Google Lighthouse.
  2. 89 % des URL mobiles et 99 % des URL de bureau respectent la référence de délai de première entrée de 100 millisecondes.

3. CLS (changement de mise en page cumulatif)

CLS est une mesure utile centrée sur l'utilisateur pour mesurer la stabilité visuelle, car elle permet de quantifier la fréquence à laquelle les utilisateurs rencontrent des modifications de mise en page inattendues. C'est un aspect essentiel de la mesure de la stabilité visuelle.

Un bon CLS est inférieur à 0,1, tandis que tout ce qui se situe entre 0,1 et 0,25 doit être amélioré et supérieur à 0,25 est considéré comme médiocre

 

STATISTIQUES CUMULATIVES DE DÉCALAGE DE DISPOSITION

  1. Le changement de mise en page cumulé représente 5 % de votre score de performance Google Lighthouse.
  2. 46 % des URL mobiles et 47 % des URL de bureau passent le test de référence Cumulative Layout Shift de 0,1.

Maintenant pourquoi Core Web Vitals est important

Un outil comme Core Web Vitals aide à améliorer la position de votre site dans les résultats de recherche. Ils sont cruciaux car ils indiquent à Google à quel point un site fonctionne et où il peut être amélioré.

Les Core Web Vitals élèvent indéniablement l'importance de l'UX en tant qu'élément de classement.

Par conséquent, l'optimisation pour les Core Web Vitals peut faire une énorme différence si vous êtes en concurrence dans un domaine où la qualité du contenu est presque comparable, ce qui signifie que si Google doit afficher deux pages avec la même qualité de contenu, il préférera celle ayant un bon score Core Web Vitals. N'oubliez pas que rien ne peut remplacer un contenu de qualité sur votre site Web.

Ce que John Mueller de Google a à dire sur Core Web Vitals

L'autre chose à retenir avec Core Web Vitals est qu'il s'agit de plus qu'un facteur de classement aléatoire. Cela affecte également la convivialité de votre site après son classement (lorsque les gens le visitent). Si vous obtenez plus de trafic (provenant d'autres efforts de référencement) et que votre taux de conversion est faible, ce trafic ne sera pas aussi précieux que lorsque vous avez un taux de conversion plus élevé (en supposant que l'UX/la vitesse affecte votre taux de conversion, ce qui est généralement le cas).

Avoir des Core Web Vitals solides, c'est bien plus que l'optimisation des moteurs de recherche, pour le dire simplement. Chaque propriétaire de site Web doit s'efforcer d'améliorer l'expérience globale de ses visiteurs.

Même si le contenu de votre page est excellent, vous devez toujours vous assurer que chaque aspect de votre site Web est optimisé pour recevoir un classement élevé dans les moteurs de recherche, afin que votre site soit visible pour votre public cible. Core Web Vitals met également l'accent sur l'importance de l'expérience utilisateur.

Comment mesurer les Core Web Vitals

Vous pouvez examiner les Core Web Vitals de votre site à l'aide de plusieurs tests, rapports et extensions.

Les plus importants d'entre eux sont :

  • L'évaluation Core Web Vitals de PageSpeed ​​Insights ;
  • Le rapport Core Web Vitals dans Google Search Console ;
  • L'extension Core Web Vitals pour Chrome.

1. Évaluation Core Web Vitals dans PageSpeed ​​Insights

Google PageSpeed ​​Insights (PSI) est divisé en deux sections :

  • Déterminez ce que vivent vos utilisateurs réels (évaluation Core Web Vitals)
  • Identifier les problèmes de performance (données de laboratoire, score PSI).

Concentrez-vous sur la première partie pour améliorer votre score Core Web Vitals. Le rapport Field Data intègre cette analyse. Les données de cette étude proviennent du rapport sur l'expérience utilisateur de Chrome (CrUX). Ces données sont basées sur les interactions réelles des utilisateurs avec votre site. Google tiendra compte de ces résultats de champ lors de la détermination des classements des moteurs de recherche.

La section « Diagnostics » de PSI est également une bonne ressource pour en savoir plus sur les facteurs qui peuvent modifier l'une des trois mesures :

PSI prend en compte les métriques d'utilisateurs réels et les données de laboratoire lors de la détermination d'un score d'optimisation global et de l'offre de recommandations d'optimisation.

Bien que ces informations soient utiles, elles sont recueillies dans un environnement contrôlé à l'aide d'appareils et de réseaux spécifiques au laboratoire. Cependant, certains des invités de votre site peuvent utiliser une technologie obsolète ou des connexions sous-alimentées. C'est pourquoi comparer les résultats de laboratoire aux performances réelles de votre site n'est pas une bonne idée.

PSI ne fournit pas toujours un résumé de champ.

Lorsque le CrUX n'a ​​pas recueilli suffisamment de données sur le terrain, comme c'est souvent le cas avec les petits sites Web, des problèmes comme celui-ci surviennent. Heureusement, il existe des sources supplémentaires à partir desquelles nous pouvons collecter des données de terrain.

2. Rapport Core Web Vitals dans Google Search Console

Deux nouveaux rapports Core Web Vitals, un pour mobile et un pour ordinateur de bureau, ont été ajoutés à Google Search Console (GSC).

Chaque rapport fournit des informations sur les données de champ et les performances des groupes d'URL.

Ces rapports sont excellents pour découvrir les problèmes courants sur plusieurs URL. Ainsi, vous recevrez des informations sur l'ensemble de votre site Web, et non sur une seule page.

Par exemple, si vous avez un grand nombre de pages identiques où le plus grand élément est une image, la métrique LCP sera la même pour chacune. Dans cette situation, GSC découvre des problèmes LCP sur chaque page.

En bref, ces nouveaux rapports GSC constituent l'approche la plus remarquable pour suivre les performances de Core Web Vitals sur l'ensemble de votre site.

3. Utilisation du rapport d'expérience utilisateur Chrome (CrUX) pour obtenir des données de terrain

L'ensemble de données CrUX est accessible des 2 manières suivantes

  • L'API de rapport Chrome UX - Pour accéder à ce développeur, vous devez être familiarisé avec JavaScript et JSON.
  • BigQuery – Nécessite un projet Google Cloud et des compétences SQL.

Vous aurez besoin de plus de travail que de simplement passer une page via PSI ou GSC. Mais, ils offrent plus d'options pour organiser et visualiser les données. BigQuery, par exemple, dispose de fonctionnalités pour le découpage des données et la jonction avec d'autres ensembles de données.

Essayez les deux stratégies si vous avez les ressources et les connaissances techniques pour les mettre en œuvre.

Quelques statistiques vitales sur Core Web Vitals

  1. 56% des 100 meilleurs domaines de bureau passent Core Web Vitals
  2. Effet de marque lourd - les grandes marques se classent très bien même avec de mauvaises performances.
  3. 61% du top 100 des mobiles ont réussi Core Web Vitals en février 2022
  4. En février 2022, le temps de chargement moyen des 100 meilleurs domaines aux États-Unis était de 2,38 secondes sur ordinateur et de 2,32 secondes sur mobile – en dessous du seuil raisonnable de Google de 2,5 secondes.
  5. En février 2022, les scores CLS moyens pour les ordinateurs de bureau et les mobiles étaient de 0,11 et 0,08, respectivement - c'est la première fois que le CLS moyen sur mobile pour les 100 meilleurs sites est tombé en dessous du seuil approprié de Google de 0,1
  6. En janvier 2020, seuls 22 % des ordinateurs de bureau et 27 % des 100 principaux domaines mobiles ont réussi Core Web Vitals, respectivement. Avance rapide jusqu'en février 2022, et cette proportion a plus que doublé pour atteindre 56 % sur ordinateur et 62 % sur mobile. Cela montre que les domaines les plus performants ont réalisé des gains significatifs en termes de performances Web.
  7. Les sites Top 100, B2B, Healthcare et Dict/Reference ont un LCP moyen de 2,5 secondes ou moins sur les deux appareils.
  8. En moyenne, le LCP mobile pour les voyages est 1,6 fois moins bon que pour les sites de dictionnaires/de référence.
  9. En moyenne, le LCP de bureau pour les voyages est 1,5 fois pire que pour les domaines B2B.
  10. Les URL en position 1 ont 10 % plus de chances de réussir une évaluation Core Web Vitals que les URL en position 9.
  11. De la position 1 à la position 5, il y a une diminution de 2 % du taux de réussite de l'évaluation Core Web Vitals pour chaque position.

Comment optimiser les éléments vitaux Web de base

Maintenant que nous avons une bonne compréhension de Core Web Vitals et de leur fonctionnement, nous pouvons porter notre attention sur certaines étapes recommandées pour améliorer Core Web Vitals. N'oubliez pas que les résultats de votre test dicteront les étapes à suivre pour augmenter vos scores. Par conséquent, il est essentiel de prendre en compte les conseils et suggestions de PageSpeed ​​Insights (ou d'autres outils de test que vous utilisez).

Voici des stratégies de base éprouvées pour augmenter vos scores Core Web Vitals.

1. Utilisez un réseau de diffusion de contenu

L'utilisation de CDN améliore considérablement les performances du site. Les sites qui utilisent CDN se chargent relativement rapidement. Pourquoi? Parce que CDN accélère le transfert de données entre le serveur et l'utilisateur final.

Le CDN est un vaste réseau de serveurs interconnectés. Vous pouvez stocker le contenu de votre site Web sur de nombreux serveurs en utilisant le CDN. Lorsqu'un utilisateur accède à votre site, le serveur géographiquement le plus proche lui rend le site Web, ce qui réduit le temps de transfert des données.

Avec l'utilisation d'un CDN, vous pouvez réduire les temps de chargement LCP des utilisateurs. Time-to-First-Byte peut également être réduit avec son utilisation (TTFB).

2. Optimisez les images

Une autre façon de stimuler le LCP consiste à optimiser l'image. Les images sont volumineuses si elles sont de haute résolution, et leur chargement prend un temps raisonnable, ce qui affecte négativement le score LCP.

L'utilisation d'images compressées accélère le chargement. De nombreux sites comme TinyJPG peuvent réduire la taille d'une image gratuitement sans nuire à sa qualité. Les images peuvent être encore optimisées en s'assurant qu'elles ont la taille et les dimensions correctes.

Par conséquent, il est judicieux de vous assurer que vous n'utilisez pas de dimensions d'image inutiles pour certaines zones de votre site. L'inclusion des attributs appropriés peut aider votre navigateur à fournir l'espace idéal pour les parties de votre page, réduisant ainsi le besoin de changements constants de mise en page.

En apportant des modifications au code source, vous pouvez modifier les propriétés de largeur et de hauteur de vos fichiers multimédias.

3. Mettre en œuvre le chargement paresseux

Votre LCP et le temps de chargement de la page peuvent tous deux bénéficier de l'utilisation du chargement différé. Smush n'est qu'un exemple de plusieurs plugins WordPress offrant un chargement paresseux.

Le chargement différé, également appelé chargement à la demande, est une méthode permettant d'améliorer les performances du contenu Web.

Le chargement paresseux aide à charger uniquement la partie nécessaire et retarde le chargement du reste jusqu'à ce que l'utilisateur en ait besoin, contrairement au chargement en masse, qui charge la page Web entière en une seule fois et la restitue en une seule fois.

4. Optimisez les polices de votre site Web

Les polices que vous utilisez sur votre site Web peuvent affecter son temps de chargement de la même manière que les images. En effet, chaque combinaison de poids de police nécessite que le navigateur charge toute la famille de polices.

L'optimisation des polices Web est un moyen simple d'augmenter la vitesse de votre site. En effet, les polices Web optimisées occupent moins d'espace sur l'ordinateur d'un utilisateur et se chargent beaucoup plus rapidement.

D'un autre côté, si la police Web appropriée n'a pas encore été chargée, le navigateur peut ne pas restituer automatiquement les composants de texte. Cependant, le passage à des polices alternatives peut entraîner des changements de mise en page indésirables, ce qui réduit votre score CLS.

Soyez prudent lorsque vous choisissez une police pour votre site Web. Il est préférable d'utiliser des polices globales pour appliquer de manière sélective les types et les poids nécessaires si vous utilisez plus de deux polices plutôt que d'avoir chacune appliquée à chaque élément. Grâce à cette méthode, vous pouvez limiter les téléchargements de polices à celles strictement nécessaires au contenu.

5. Mettez à niveau votre hébergement WordPress

Si le temps de chargement du site est trop long, cela peut être une indication de changer le plan d'hébergement. Changer votre hébergement de mutualisé à dédié peut considérablement booster le FCP.

Plutôt que de choisir le moins cher, choisir le meilleur site d'hébergement qui offre toutes les fonctionnalités dont vous avez besoin est une sage décision. La qualité du service fourni par votre hébergeur WordPress est cruciale pour le succès de votre site web. Cela a des conséquences considérables, du temps de chargement de la page à la sécurité. Surtout si vous avez un site Web volumineux ou sophistiqué, ce n'est pas un endroit pour couper les coins ronds. Au lieu de cela, la mise à niveau de votre fournisseur d'hébergement ou de votre plan est l'une des stratégies les plus rapides mais les plus puissantes pour optimiser votre site Web et améliorer les temps de chargement.

Pour l'hébergement, lisez: Bluehost Review

6. Éliminer les ressources bloquant le rendu

Les pages du site Web ne peuvent pas être rendues sans les fichiers HTML, CSS et JavaScript qui les accompagnent. Ces fichiers incluent tous des scripts qui pourraient empêcher les gens d'accéder aux éléments qu'ils essaient de voir.

Cependant, vous pouvez empêcher ces scripts d'avoir un impact négatif sur votre UX (et, à son tour, aider à booster Core Web Vitals) en supprimant les ressources bloquant le rendu et tout CSS ou script inutile.

De nombreuses méthodes existent pour y parvenir. La première consiste à supprimer tous les espaces ou commentaires supplémentaires de votre JavaScript et CSS. De plus, vous pouvez réduire la taille de votre JavaScript et CSS en fusionnant les fichiers.

7. Différer le chargement de JavaScript

C'est une autre façon d'éliminer les éléments bloquant le rendu, ce qui donne un coup de pouce significatif au FID.

Cela accélère le chargement des pages Web en bloquant le chargement des fichiers JavaScript.

Il charge d'autres contenus de vos pages plutôt que d'attendre le chargement des fichiers JS. En plus de cela, vous pouvez configurer votre site pour charger rapidement les scripts CSS critiques apparaissant au-dessus du pli. Vous pouvez y parvenir en extrayant le matériel du fichier CSS principal et en l'intégrant dans le code de votre site Web.

8. Implémentez la mise en cache du contenu.

Lorsqu'il s'agit d'améliorer l'expérience utilisateur, la mise en cache de contenu intelligent est l'un des outils les plus puissants à votre disposition. La technique de livraison de contenu centralisée du protocole HTTP utilise la mise en cache ou le stockage temporaire du contenu de requêtes antérieures. Si les politiques de mise en cache du contenu le permettent, les composants à n'importe quel point de la chaîne de diffusion peuvent en stocker des copies pour accélérer les requêtes ultérieures.

La mise en cache aide beaucoup à améliorer les Core Web Vital Scores.

9. Précharger les images de héros

Les images de héros sont généralement l'élément le plus important qui apparaît au-dessus du contenu du pli. Ainsi, s'ils se chargent plus rapidement, l'expérience utilisateur globale est grandement améliorée. Le LCP peut être considérablement réduit en utilisant l'attribut de lien "rel = preload" , qui est particulièrement utile pour les images de héros chargées avec CSS ou JavaScript.

10. S'abstenir de donner la priorité à la publicité ou aux pop-ups par rapport à d'autres contenus.

Un score CLS faible est le résultat d'un changement de contenu sur une page causé par l'ajout de contenu en haut.

Réservez de l'espace pour les publicités, les iframes et d'autres formes de contenu dynamique.

Ne pas leur allouer d'espace spécifique est un moyen infaillible de perturber la mise en page, tout comme c'est le cas avec les images et les vidéos. Pour éviter que le contenu ne déborde d'un conteneur, utilisez la propriété overflow: hidden et choisissez un conteneur de taille adéquate.

11. Séparez les tâches longues

Cela doit être votre priorité absolue. Lorsque de longues tâches retardent le thread principal, il ne peut pas réagir rapidement aux demandes de l'utilisateur. Les performances du site Web peuvent être considérablement améliorées en les décomposant. Cela réduit le FID et améliore l'UX

12. Arrêtez ou reportez l'exécution de tout script tiers inutile

Les scripts de votre propre site Web peuvent ne pas s'exécuter à temps s'ils entrent en conflit avec ceux d'un tiers. Réfléchissez aux scripts les plus utiles pour l'utilisateur final et donnez-leur une priorité plus élevée. Les scripts publicitaires et pop-up ne doivent pas figurer en haut de la liste.

Comment se portent les 10 meilleurs domaines américains en termes de Core Web Vitals basés sur la visibilité SEO de Searchmetrics.

Toutes les métriques et si le domaine passe ou non Core Web Vitals sont rapportées mensuellement au niveau du domaine. En février 2022, 75 % de tous les chargements de pages de bureau Wikipédia ont pris moins de 1,1 seconde, et le domaine a obtenu un score de 0 à la fois en FID (exprimé en millisecondes) et en CLS, dépassant Core Web Vitals.

Rang Domaine LCP(s) FID (ms) CLS CWV passé?
1 wikipedia.org 1.1 0 0 Oui
2 youtube.com 6.2 0 0,15 Non
3 facebook.com 3.7 0 0,05 Non
4 amazon.com 2.0 25 0,2 Non
5 google.com 1.1 0 0 Oui
6 imdb.com 2.3 0 0,15 Non
7 instagram.com 3.2 0 0,1 Non
8 merriam-webster.com 2.2 25 0 Oui
9 twitter.com 3.4 0 0,05 Non
dix britannica.com 2.2 25 0 Oui

Le top 10 des CWV pour appareils mobiles basé sur la métrique Searchmetrics SEO Visibility .

Dans la mesure du possible, une version mobile d'un domaine a été utilisée. Cependant, cela dépend principalement de la collecte de données CrUX. Une part plus élevée de sites mobiles passe Core Web Vitals que de bureau.

Rang Domaine LCP(s) FID (ms) CLS CWV passé?
1 wikipedia.org 1.3 0 0 Oui
2 m.youtube.com 2.3 0 0,1 Oui
3 m.facebook.com 2.9 0 0 Non
4 amazon.com 1.9 0 0,1 Oui
5 instagram.com 4.4 0 0,25 Non
6 imdb.com 2.3 0 0 Oui
7 google.com 1.2 0 0 Oui
8 merriam-webster.com 1.6 50 0 Oui
9 britannica.com 1.7 25 0 Oui
dix LinkedIn.com 1.4 0 0 Oui

Conclusion

Core Web Vitals change la donne pour améliorer l'expérience Web pour tous. Ces mesures continueront d'être incluses dans le système de classement de Google.

C'est pourquoi il est essentiel de les surveiller même si vous ne voyez rien d'anormal.

Pour assurer le bon fonctionnement d'un site Web, il est crucial d'améliorer constamment l'expérience utilisateur. Grâce à la disponibilité de nombreux outils et plugins utiles, ce processus peut être rendu beaucoup plus simple et plus facile qu'il ne le serait autrement. Ou si cela vous semble intimidant, vous pouvez engager un développeur pour le faire pour vous.