Le moteur de recherche le plus connu du Web essaie d’améliorer cons­tam­ment ses résultats de recherche pour les uti­li­sa­teurs, entre autres avec des mises à jour ré­gu­lières de Google. Les in­ter­nautes doivent pouvoir obtenir des in­for­ma­tions ra­pi­de­ment et avoir une ex­pé­rience uti­li­sa­teur positive sur les sites Web. C’est pourquoi Google soutient les ad­mi­nis­tra­teurs pour des sites Web encore plus per­for­mants. Afin d’améliorer le contenu des sites Web, Google a instauré Web Vitals : des données uniformes qui per­met­tent de se prononcer clai­re­ment sur la qualité technique d’un site Web. Si vous gérez vous-même un site Web et que vous ne voulez pas vous plonger dans les SERP, les Web Vitals doivent désormais faire partie de votre stratégie SEO.

Vous pouvez d’ores et déjà consulter les Core Web Vitals de votre site Web et commencer à l’optimiser. Les chiffres-clés de­vien­dront per­ti­nents à partir d’août 2021. Google a annoncé que la mise à jour de Page Ex­pe­rience, dont les Web Vitals feront en grande partie, sera déployée à partir de la mi-juin. Il faudra pro­ba­ble­ment attendre deux mois avant que les effets de cette mise à jour ne se fassent sentir. Découvrez comment vous y préparer dès main­te­nant !

Tweet de l‘équipe Google sur les Core Web Vitals
La mise à jour de Page Ex­pe­rience, incluant les Web Vitals, sera appliquée par Google à partir de mi-juin. / Source : https://twitter.com/goo­gle­sear­chc/status/1384173984334237699

Que sont les « Core Web Vitals » ?

Avec les Core Web Vitals, Google introduit des données qui four­nis­sent aux ges­tion­naires de sites Web des in­for­ma­tions sur la qualité de leurs pages. Les Web Vitals ne s’occupent pas du contenu du site Web : elles mesurent les aspects tech­niques qui ont un impact sur l’ex­pé­rience uti­li­sa­teur. Les données se réfèrent plus pré­ci­sé­ment à l’ex­pé­rience que les visiteurs ont dès les premières secondes. Pour cela, Google se réfère à trois facteurs :

  • Largest Con­tent­ful Paint (LCP) : quel est le temps de char­ge­ment du plus grand élément ?
  • First Input Delay (FID) : quand les uti­li­sa­teurs peuvent-ils interagir avec le site Web ?
  • Cu­mu­la­tive Layout Shift (CLS ): la mise en page change-t-elle au fur et à mesure que la page se charge ?

Avec Web Vitals, Google capte l’ex­pé­rience des visiteurs d’un site. Pour mesurer ce phénomène, Google analyse les données du na­vi­ga­teur Chrome pour créer son rapport sur l’ex­pé­rience uti­li­sa­teur Chrome (« Chrome User Ex­pe­rience Report » en anglais). Ici, les données mobiles et celles des or­di­na­teurs sont traitées sé­pa­ré­ment. Le rapport vous indique également un score global, c’est-à-dire une valeur résumée, qui inclut 75 % des visites du site Web. Cette donnée est im­por­tante car les uti­li­sa­teurs peuvent avoir des ex­pé­riences très dif­fé­rentes. Cela dit, dans le meilleur des cas, vous souhaitez concevoir votre site Web de telle sorte que tous les uti­li­sa­teurs aient une ex­pé­rience positive.

Pré­sen­ta­tion des Core Web Vitals de Google

Pour l’instant, Google a présenté trois facteurs dif­fé­rents. Cependant, d’autres chiffres pour­raient bien être ajoutés à l’avenir. Les Web Vitals déjà in­tro­duits con­cer­nent prin­ci­pa­le­ment l’in­te­rac­ti­vité sur le site Web.

Image: Représentation schématique des principaux Core Web Vitals de Google et autres facteurs de classement.
Ac­tuel­le­ment, Google intègre trois mesures dans les Web Vitals et les place à côté d’autres facteurs de clas­se­ment im­por­tants.

Largest Con­tent­ful Paint (LCP)

En combien de temps l’uti­li­sa­teur peut-il voir le contenu du site ? Google mesure à l’aide du LCP le moment où le plus grand bloc de contenu visible (en termes de pré­sen­ta­tion visuelle, et non de volume de données) est affiché à l’uti­li­sa­teur. Il peut s’agir de textes, d’images ou de vidéos, par exemple. Comme l’élément le plus vo­lu­mi­neux est gé­né­ra­le­ment chargé à la fin et qu’il s’agit pro­ba­ble­ment du contenu principal de la page, Google peut ainsi se faire une assez bonne idée du temps qu’il faut aux uti­li­sa­teurs pour lire ou interagir avec le site Web.

Grâce au LCP, le moteurs de recherche a développé une al­ter­na­tive aux anciennes mesures comme les évé­ne­ments « load » ou « DOM­Con­tent­Loa­ded ». Ces mesures ont tendance à fournir des in­for­ma­tions théo­riques. En revanche, Largest Con­tent­ful Paint est beaucoup plus lié à l’ex­pé­rience réelle de l’uti­li­sa­teur. Même si la valeur First Con­tent­ful Paint (FCP), très similaire, indique la vitesse à laquelle le premier élément a été chargé, elle n’a, dans de nombreux cas, aucun rapport avec le contenu réel du site Web. Enfin, la mesure First Mea­ning­ful Paint (FMP) s’est avérée trop complexe et sujette aux erreurs dans le passé.

A titre indicatif, Google re­com­mande un Largest Contenful Paint de 2,5 secondes pour les uti­li­sa­teurs. Ce temps de char­ge­ment doit aussi s’appliquer à tous les visiteurs. Les valeurs obtenues par les ad­mi­nis­tra­teurs lors des tests peuvent être très dif­fé­rentes des ex­pé­riences vécues par les dif­fé­rents uti­li­sa­teurs.

Image: Largest Contentful Paint (LCP)
Largest Con­tent­ful Paint (LCP) : vert : jusqu'à 2,5 secondes, jaune : de 2,5 à 4 secondes, rouge : plus de 4 secondes / Source : https://web.dev/vitals/

Les conseils suivants peuvent vous aider à améliorer la valeur de votre LCP :

  • Utilisez un Framework plutôt qu’une grande page HTML, car cela vous permet de mieux contrôler la diffusion des éléments.
  • Utilisez un Content Delivery Network afin que la lo­ca­li­sa­tion de l’uti­li­sa­teur n’affecte pas l’accès au serveur.
  • Faites attention au CSS et au Ja­vaS­cript pour que le na­vi­ga­teur ne soit pas surchargé.
  • Réduisez les images pour diminuer la taille des fichiers, et donc les temps de char­ge­ment.
  • Pour les sites web statiques, utilisez un cache web pour des temps d’accès plus rapides.
  • Éta­blis­sez la connexion avec les sources externes dès le début pour éviter de créer des goulots d’étran­gle­ment ici.
Conseil

Pour un aperçu plus détaillé de la manière dont vous pouvez réduire le temps de char­ge­ment du plus grand élément de contenu, consultez l’article de Google sur le LCP.

First Input Delay (FID)

Les uti­li­sa­teurs veulent pouvoir interagir di­rec­te­ment avec la page dès que le site Web est chargé. Le First Input Delay indique le temps écoulé entre la première in­te­rac­tion du visiteur et la réponse du site. Il peut s’agir d’une tentative de connexion, par exemple, mais aussi du simple clic sur un lien. Pour éviter de nuire à la première im­pres­sion, les serveurs doivent traiter les données le plus ra­pi­de­ment possible. Mais la vitesse du serveur n’est qu’une partie du défi à relever pour obtenir un bon score FID : les ad­mi­nis­tra­teurs doivent également tenir compte des na­vi­ga­teurs des uti­li­sa­teurs. Si le logiciel est occupé par d’autres tâches, il ne peut pas traiter les données saisies. Par con­sé­quent, le point faible le plus fréquent est la présence de gros fichiers Ja­vaS­cript qui mo­no­po­li­sent le na­vi­ga­teur pendant longtemps.

A titre indicatif, Google re­com­mande un temps de réaction d’environ 100 mil­li­se­condes entre le moment où un uti­li­sa­teur déclenche l’in­te­rac­tion et le moment où la mo­di­fi­ca­tion est visible dans le na­vi­ga­teur.

Image: First Input Delay (FID)
First Input Delay (FID) : vert : jusqu'à 100 mil­li­se­condes, jaune : de 100 à 300 mil­li­se­condes, rouge : plus de 300 mil­li­se­condes / Source : https://web.dev/vitals/

Si vous souhaitez améliorer le First Input Delay et offrir aux visiteurs une meilleure ex­pé­rience sur votre site Web, envisagez les pos­si­bi­li­tés d’op­ti­mi­sa­tion suivantes :

  • Essayez de diviser les tâches longues. Tant qu’un Ja­vaS­cript est en cours d’exécution, le na­vi­ga­teur ne peut pas traiter d’autres demandes. Google qualifie de tâches longues tout morceau de code qui bloque l’in­te­rac­tion pendant au moins 50 ms, c’est pourquoi il vaut mieux les éviter.
  • Chargez d’abord les éléments d’in­te­rac­tion les plus im­por­tants. Ainsi, les uti­li­sa­teurs peuvent agir plus ra­pi­de­ment et n’ont pas à attendre des temps de char­ge­ment plus longs.
  • Utilisez un Web Worker qui permet d’effectuer des tâches plus complexes en arrière-plan.
Conseil

Vous souhaitez améliorer votre score FID ? Google a écrit un article détaillé sur l’op­ti­mi­sa­tion du First Input Delay.

Cu­mu­la­tive Layout Shift (CLS)

Souvent, un site Web est chargé de telle manière que les visiteurs peuvent déjà l’utiliser avant que le dernier élément n’ap­pa­raisse dans le na­vi­ga­teur. Cela présente de grands avantages en termes de LCP, mais peut entraîner des chan­ge­ments radicaux au niveau de la pré­sen­ta­tion. En sautant d’un élément de contenu à l’autre, l’uti­li­sa­teur peut être confus en lisant ou cliquer in­vo­lon­tai­re­ment sur le mauvais élément.

Pour le score CLS, Google mesure les chan­ge­ments dans la mise en page. Chaque fois qu’un élément change de place de façon imprévue, cela est en­re­gis­tré. Les chan­ge­ments in­ten­tion­nels dus aux in­te­rac­tions des uti­li­sa­teurs sont donc exclus. Google ne fait pas seulement attention au nombre d’éléments qui se déplacent et à la fréquence de ces dé­pla­ce­ments, mais mesure également la distance parcourue par chaque élément. Tout cela est inclus dans le Cu­mu­la­tive Layout Shift.

Image: Cumulative Layout Shift (CLS)
Cu­mu­la­tive Layout Shift (CLS) : vert : jusqu'à 0,1, jaune : de 0,1 à 0,25, rouge : plus de 0,25 / Source : https://web.dev/vitals/

Pour Google, une valeur CLS de 0,1 est bonne. Si vous êtes bien au-dessus, il est peut-être temps d’optimiser votre site Web. Les options suivantes peuvent vous aider :

  • Précisez toujours les di­men­sions des images intégrées dans le texte source du site Web. De cette façon, le na­vi­ga­teur peut déjà réserver l’espace cor­res­pon­dant lors de la création de la mise en page.
  • Les pu­bli­ci­tés dy­na­miques diffusées par des tiers nuisent également à la mise en page. Il est conseillé de prévoir un em­pla­ce­ment suf­fi­sam­ment grand pour les annonces afin d’éviter de déplacer des objets.
  • Si vous essayez de charger des polices à partir du Web, la mise en page peut parfois se déplacer de manière imprévue. Il est donc re­com­mandé de pré­char­ger les polices.
Conseil

Google donne également quelques conseils sur l’op­ti­mi­sa­tion du CLS et de votre site Web.

Image: Données CLS Web Vital mesurées avec l’extension Chrome
Avec l’extension Chrome CLS « Vi­sua­li­zer », vous pouvez afficher la valeur ainsi que les chan­ge­ments de mise en page de n’importe quel site Web.

Pourquoi les Core Web Vitals sont si im­por­tants ?

Google essaie de façonner le Web. Pour ce faire, la société exploite sa puissance de marché : les sites Web qui n’ap­pa­rais­sent pas sur les premières pages des résultats du moteur de recherche Google ne sont presque jamais remarqués. Les web­mas­ters et les experts en SEO se donnent donc beaucoup de mal pour optimiser leur contenu Web aux exigences du moteur de recherche. Pourtant, tous les facteurs de clas­se­ment ne sont pas of­fi­ciel­le­ment connus. Avec les Web Vitals, Google a main­te­nant présenté des valeurs concrètes que les opé­ra­teurs de sites Web peuvent exploiter.

Les données Web Vital de votre site Web peuvent être con­sul­tées, par exemple, via la Google Search Console. Vous y trouverez une analyse spé­ci­fique pour les té­lé­phones portables et les or­di­na­teurs de bureau. A noter : comme les Core Web Vitals sont issues de données réelles d’uti­li­sa­teurs, vous devrez peut-être attendre un peu pour que Google rassemble suf­fi­sam­ment d’in­for­ma­tions pour une analyse sig­ni­fi­ca­tive en vue de nouveaux projets. Les mesures sont également affichées dans d’autres outils de Google : les données sont également intégrées à Google Ligh­thouse, Page Speed Insights et le rapport sur l’ex­pé­rience uti­li­sa­teur Chrome.

En résumé

Les Core Web Vitals de Google vont ra­pi­de­ment devenir un des facteurs les plus im­por­tants pour l’op­ti­mi­sa­tion des moteurs de recherche. Vous voulez placer votre site web en tête ? Le ran­king­Coach de IONOS vous aide dans votre stratégie de ré­fé­ren­ce­ment.

Aller au menu principal