Préparez-vous pour le nouveau facteur de classement Google

Préparez-vous pour le nouveau facteur de classement Google


Si vous voulez en savoir plus sur les trois principes vitaux du Web : LCP, FID et CLS, vous êtes à la bonne adresse. Car vous devriez vous préparez au plus vite au nouveau facteur de classement de Google.

En 2021, Google mettra à jour ses algorithmes pour intégrer un nouveau facteur de classement : l’expérience de page.

Pour mesurer l’expérience des pages, Google a développé un nouvel ensemble de mesures appelé Web Vitals. Il y a 3 piliers de la mise à jour de l’expérience de page de Google.

Aujourd’hui, nous allons tout vous dire sur ces principes vitaux du Web et vous expliquer ce que vous pouvez faire pour vous améliorer !

Êtes-vous prêt à grimper au classement Google ?

Il y a quelque temps, Google a fait sensation en annonçant un nouveau facteur de classement pour 2021 : l’expérience des pages. L’expérience utilisateur a toujours été un élément essentiel de la création du meilleur site, mais maintenant, elle jouera un rôle encore plus important en vous aidant à créer des sites impressionnants pour vos clients.

Tout cela est alimenté par de nouvelles métriques, avec au centre : les Core Web Vitals :

  • LCP
  • FID
  • CLS

 

Voyons ça de plus près !

Le nouveau facteur de classement Google alimentée par les Web Vitals

Nous avons déjà parlé de cette mise à jour de l’expérience de la page, mais dans cet article, nous aimerions jeter un nouveau coup d’œil à ces fondamentaux du Web. En général, les mesures de vitesse du site ont tendance à être difficiles à comprendre et à confondre. De plus, ils ont tendance à changer quelque peu chaque fois que vous testez votre site. Vous n’obtenez pas toujours les mêmes scores. Il est donc facile de dire qu’il suffit de regarder certaines statistiques dans l’espoir qu’elles deviennent vertes.

De toutes les mesures possibles, Google identifie désormais trois soi-disant Core Web Vitals. Ce sont les points sur lesquels Google se focalise pour l’année à venir. Chaque année, Google peut ajouter ou modifier ces statistiques au fur et à mesure de leur évaluation sur une période relativement longue.

Les Web Vitals de base sont le sous-ensemble des Web Vitals qui s’appliquent à toutes les pages Web. Les Web vitals doivent être mesurés par tous les propriétaires de sites et seront présentés dans tous les outils Google. Chacun des Core Web Vitals représente une facette distincte de l’expérience utilisateur, elle est mesurable sur le terrain par le reflet de l’expérience réelle centré de l’utilisateur.

web.dev/vitals/

Les trois piliers de l’expérience des pages

Pour l’instant, les trois piliers de l’expérience des pages sont :

  • Performances de chargement (à quelle vitesse les éléments apparaissent-ils à l’écran ?)
  • Réactivité (à quelle vitesse la page réagit-elle aux commentaires des utilisateurs ?)
  • Stabilité visuelle (les objets se déplacent-ils à l’écran pendant le chargement ?)

Pour mesurer ces aspects essentiels de l’expérience utilisateur, Google a choisi trois mesures correspondantes – alias Core Web Vitals:

  • LCP, Largest Contentful Paint : il mesure le temps nécessaire pour au navigateur pour afficher le plus grand nombre d’informations à l’écran de l’internaute, par rapport au temps écoulé depuis que ce dernier a cliqué sur l’URL en question. Cela peut être une image ou un bloc de texte. Une bonne note donne aux utilisateurs le sentiment que le site se charge rapidement. Un site lent peut entraîner de la frustration.
  • FID, First Input Delay : Mesure le temps qu’il faut au site pour réagir à la première interaction d’un utilisateur. Cela pourrait être un clic sur un bouton, par exemple. Une bonne note donne ici à l’utilisateur le sentiment qu’un site réagit rapidement aux entrées et, par conséquent, est réactif. Une réaction lente du site conduit à la frustration.
  • CLS, Cumulative Layout Shift : Cela mesure la stabilité visuelle de votre site. En d’autres termes, les éléments se déplacent-ils à l’écran pendant le chargement – et à quelle fréquence cela se produit-il ? Rien de plus frustrant que d’essayer de cliquer sur un bouton lorsqu’une annonce à chargement lent apparaît à cet endroit.

Outils différents signifient métriques différentes

Chaque outil d’expérience de page utilise un certain nombre de Web vitals, recueillies auprès de diverses sources. Comme chaque outil a un objectif différent, les métriques utilisées diffèrent d’un outil à l’autre. Le dénominateur commun, cependant, sont les fondamentaux du Web, car Google les utilise dans chaque outil d’expérience de page dont il dispose.

Mais que signifient tous ces chiffres ? Que devez-vous rechercher sur votre site ? Et quand votre site est-il assez rapide ? Quand ai-je une bonne note ? Vous pouvez poser un million de questions sur ces statistiques. Et tandis que Google tente de combler l’écart entre la compréhension et l’amélioration, cela continue d’être un sujet complexe. Mesurer la vitesse du site et l’expérience utilisateur est difficile – il y a tellement de choses à prendre en compte.

Quels sont ces principes vitaux du Web ?

Les Core Web Vitals ou principes vitaux du web ne fonctionnent pas isolément, car il existe de nombreuses autres mesures. Certains sont basés sur des tests de laboratoire contrôlés, tandis que d’autres sont des mesures qui ne fonctionnent qu’avec des données de terrain. Après avoir fait beaucoup de recherches, Google a déterminé un nouvel ensemble appelé Web Vitals. Ce sont une combinaison de mesures que nous connaissons déjà, ainsi qu’un ensemble de nouvelles. Les trois Core Web Vitals sont les plus importants et Google demande spécifiquement aux propriétaires de sites de garder un œil sur ces scores et de les améliorer là où vous le pouvez.

LCP : Largest Contentful Paint

Le LCP mesure le point auquel le plus grand élément de contenu apparaît à l’écran. Gardez à l’esprit qu’il ne mesure pas le temps nécessaire au chargement complet de votre page, mais il examine simplement le moment où la partie la plus importante se charge.

Si vous avez une page Web simple avec juste un morceau de texte et une grande image, cette grande image sera considérée comme le LCP. Étant donné qu’il s’agit du contenu le plus volumineux à charger dans le navigateur, il est destiné à faire bonne impression. En accélérant le chargement, votre site peut apparaître beaucoup plus rapidement.

Ainsi, parfois, cela pourrait être aussi simple que d’optimiser cette image elle-même.

Dans le passé, il y avait des métriques de mesure comme le First Meaningful Content, qui mesuraient le temps lorsque le premier élément de contenu apparaissait à l’écran, ce qui signifiait quelque chose pour l’utilisateur. Mais, contrairement à ce que son nom l’indique, la métrique FMC ne pouvait souvent pas comprendre quelle était la chose la plus significative qui apparaissait à l’écran.

Des métriques complexes conduisent à des données inutiles.

Le LCP est facile à comprendre : c’est simplement le temps qu’il faut pour que le plus grand élément apparaisse à l’écran. Ces éléments peuvent inclure des images, des vidéos ou d’autres types de contenu.

Ce que vous devez savoir

Maintenant que vous savez ce qu’est le LCP, vous pouvez commencer à l’optimiser. Selon Google, vous devriez viser le LCP à se produire dans les 2,5 premières secondes du chargement de la page. Tout ce qui est entre 2 et 4 secondes doit être amélioré et vous pouvez considérer qu’au-dessus de 4 secondes est plutôt mauvais.

Score LCP

Le LCP est également dynamique, car la première chose qui se charge peut ne pas être immédiatement cette grande image. Le LCP passe à cette grande image lorsqu’elle apparaît à l’écran.

Voici une image par Google qui explique comment cela fonctionne :

Sur la gauche, vous voyez d’abord le logo et la ligne ‘Histoires visuelles’ apparaissent. Dans le deuxième écran, le gros titre apparaît comme un candidat pour LCP. Dans le dernier écran, cependant, vous voyez que la grande image dépasse l’en-tête en tant que LCP. Si vous n’avez qu’un seul gros contenu, cela pourrait être le LCP tout le temps.

Si vous regardez le processus de chargement dans l’image, vous pouvez facilement comprendre pourquoi il s’agit d’une mesure si pratique. Vous pouvez facilement repérer ce qu’est le LCP et optimiser le chargement de cet élément.

Google propose plusieurs outils pour vous aider à trouver tous ces éléments. PageSpeed Insights, par exemple, offre une multitude de données sur le Web Vitals, ainsi que de nombreux conseils pour améliorer votre page. Si nous exécutons Référencement-turbo sur PageSpeed Insights, nous obtenons un certain nombre de scores et en dessous de ce score, des conseils. Dans notre cas, le LCP était moyen et c’est dû au fait qu’il s’agit d’une grande image. Dans la capture d’écran ci-dessous, vous pouvez voir que PageSpeed Insights a correctement identifié cet élément.

pagespeed insights

Selon Google, le LCP est affecté par un certain nombre de facteurs :

  • Temps de réponse d’un serveur lents : optimisez donc votre serveur, utilisez un CDN, des ressources de cache, etc.
  • JavaScript et CSS bloquant le rendu : minimisez ainsi votre CSS, différez les CSS non critiques et les CSS critiques en ligne.
  • Ressources à chargement lent : optimisez donc vos images, préchargez les ressources, compressez les fichiers texte, etc.
  • Problèmes sur le rendu côté client : minimisez donc le JavaScript critique, utilisez le rendu côté serveur et le pré-rendu.

Vous pouvez trouver plus de documentation sur le LCP et son optimisation.

FID : First Input Delay

Le premier délai d’entrée mesure le temps nécessaire au navigateur pour répondre à la première interaction de l’utilisateur. Plus le navigateur réagit rapidement, plus la page sera réactive. Si vous cherchez à offrir à vos utilisateurs une expérience positive, alors vous devriez travailler sur la réactivité de vos pages.

Des retards se produisent lorsque le navigateur effectue encore d’autres travaux en arrière-plan. Donc, il a chargé la page et tout semble parfait. Mais lorsque vous appuyez sur ce bouton, rien ne se passe ! C’est une mauvaise expérience et cela mène à la frustration. Même s’il y a juste un petit retard, votre site pourrait se sentir lent.

Un navigateur doit faire beaucoup de travail et parfois il a besoin de garer certaines requêtes, pour y revenir plus tard. Il ne peut pas tout faire en même temps. Comme nous construisons des sites de plus en plus complexes – souvent alimentés par JavaScript – nous demandons beaucoup aux navigateurs. Pour accélérer le processus entre l’obtention du contenu à l’écran et le rendre interactif, nous devons nous concentrer sur le FID.

Le FID mesure toutes les interactions qui se produisent pendant le chargement de la page. Ce sont des actions d’entrée comme les tapotements, les clics et les frappes de touches, mais pas les interactions comme le zoom et le défilement. Les nouvelles statistiques de Google appellent un FID de moins de 100 ms pour apparaître réactif. Tout ce qui se situe entre 100 ms et 300 ms doit être amélioré et vous pouvez voir quoi que ce soit au-dessus de cela comme peu performant.

Score FID

 

Ce que vous devriez savoir

Une des choses dont vous devez vous souvenir est que vous ne pouvez pas mesurer le FID s’il n’y a pas d’interaction avec l’utilisateur. Cela signifie que Google ne peut pas simplement prédire le FID sur la base des données dont il dispose en laboratoire – il a besoin de données d’utilisateurs réels, ou de données dites de terrain.

Cela signifie également que ces données sont moins contrôlables en tant que données de laboratoire car elles collectent des données auprès des utilisateurs de toutes sortes d’appareils et de ceux qui les utilisent de différentes manières et dans différents environnements. C’est l’une des raisons pour lesquelles vous voyez parfois des changements de données.

Si vous cherchez à améliorer vos scores, vous trouverez souvent que JavaScript est le coupable des mauvaises notes. JavaScript nous aide à créer des interactions impressionnantes, mais il peut également conduire à des sites Web lents avec du code complexe. Souvent, le navigateur ne peut pas répondre aux entrées pendant qu’il exécute JavaScript. Si vous travaillez à l’amélioration de votre code JavaScript et à sa gestion, vous travaillez automatiquement à l’amélioration des scores d’expérience de votre page.

C’est la partie la plus difficile, cependant. La plupart des sites peuvent gagner beaucoup en réduisant le temps nécessaire à l’exécution de JavaScript, en fractionnant les tâches complexes ou en supprimant le JavaScript inutilisé.

Vous devriez regarder vos scores et déterminer ce que vous pouvez faire. Essayez de trouver les améliorations les plus faciles à réaliser ou entraînez les plus grands sauts de performances.

Pour vous améliorer, lisez la documentation de Google sur le FID et celle sur la procédure d’optimisation du FID.

CLS : Content Layout Shift

Le troisième Core Web Vital est le plus récent des trois : Content Layout Shift. Cette statistique tente de déterminer la façon dont les éléments «stables» se chargent sur votre écran. Il examine la fréquence à laquelle les objets sautent pendant le chargement et leur quantité.

Vous pouvez imaginer que parfois un bouton se charge sur l’écran, invitant les utilisateurs à cliquer dessus. En arrière-plan, cependant, il reste une grande zone de contenu en cours de chargement. Le résultat ?

Lorsque le contenu se charge enfin complètement, le bouton enfonce un peu – tout comme vous voulez appuyer sur ce bouton. Encore une fois, la frustration monte !

Ces changements de mise en page se produisent souvent avec les publicités. Maintenant, les publicités sont une bouée de sauvetage pour de nombreux sites. Néanmoins, elles sont souvent si mal chargées qu’elles frustrent les utilisateurs. De plus, de nombreux sites complexes ont tellement de choses à faire qu’ils sont lourds à charger..

Cela peut également entraîner un contenu ou des CTA qui sautent à l’écran, ce qui laisse de la place pour un chargement plus lent du contenu.

Prenez france24.com, par exemple. Les sites Web d’actualités sont généralement très complexes et lents à charger, et france24 ne fait pas exception. Il obtient de très mauvais résultats lors d’un test PageSpeed ​​Insights. Regardons un instant les conseils correspondants plus bas dans la page. Il se trouve qu’au moins trois éléments en mouvement ont été trouvés au moment de la rédaction. Lors du chargement, cela entraîne de nombreux éléments qui apparaissent partout sur la page et ça tarde à se stabiliser. Les utilisateurs ne sont pas toujours aussi patients. Ils essaient de cliquer sur un bouton au moment où il apparaît à l’écran. ils le manquent parce qu’une grande annonce apparaît à cet endroit.

Ce que vous devriez savoir

Le décalage de disposition cumulative compare les images pour déterminer le mouvement des éléments. Il prend tous les points auxquels les changements de disposition se produisent et calcule la gravité de ces mouvements. Google considère que tout ce qui est inférieur à 0,1 est bon, tandis que tout ce qui est compris entre 0,1 et 0,25 doit fonctionner.

Vous pouvez considérer tout ce qui dépasse 0,25 comme médiocre.

Bien sûr, le score ne tient compte que des changements inattendus. Si un utilisateur clique sur le bouton de menu et qu’un menu dépliant apparaît : cela ne compte pas comme un changement de mise en page. Mais si ce bouton appelle un grand changement dans la conception. vous devez vous assurer que cela reste clair pour l’utilisateur.

J’ai déjà mentionné que les publicités en sont l’un des principaux responsables. Ils sont souvent en JavaScript et ne sont pas bien optimisés, en plus ils sont servis depuis un serveur externe. La lenteur est ajoutée à chaque étape et vous devez travailler dur pour que vos annonces apparaissent au bon endroit à tout moment. Mais il y a un autre élément qui est responsable des grands changements de mise en page : les images.

Les développeurs ne spécifient pas toujours la largeur et la hauteur d’une image dans le code et laissent au navigateur le soin de déterminer comment l’image doit apparaître à l’écran. Sur une page contenant des images et du texte, le texte apparaîtra d’abord à l’écran, suivi des images. Si le développeur n’a pas réservé d’espace pour ces images, la partie supérieure de la page de chargement sera remplie de texte, invitant l’utilisateur à commencer la lecture. Les images, cependant, se chargent plus tard et apparaissent à l’endroit où le texte était en premier. Cela pousse le texte vers le bas, agitant l’utilisateur.

Donc, spécifiez toujours la largeur et la hauteur des images dans le CSS pour réserver un emplacement pour les images à charger.

Plus de documentation de base sur CLS, ainsi que sur la procédure d’optimisation du CLS.

Outils pour mesurer les valeurs vitales du Web

Il existe de nombreux outils pour vous aider à surveiller le Web Vitals

  • PageSpeed ​​Insights : PageSpeed ​​Insights est devenu un outil de mesure à service complet avec des données de terrain et de laboratoire. De plus, vous obtenez des conseils sur ce qu’il faut améliorer.
  • Lighthouse : Google a conçu Lighthouse comme un outil pour auditer les PWA, mais c’est maintenant un excellent outil pour surveiller les performances. Il a plusieurs audits que PageSpeed ​​Insights n’a pas et il a même quelques vérifications SEO.
  • Google Search Console : vous pouvez désormais obtenir des informations sur votre site directement depuis Search Console ! Idéal pour avoir une idée de la performance de votre site.

D’autres facteurs de grande importance sont aussi à prendre en considération pour réussir le référencement de son site internet sur google. Ne les négligez surtout pas. Il ne faut pas oublier que tous les détails compte pour optimiser votre classement.

N’oubliez pas de vous concentrer sur vos utilisateurs !