Optimiser les Core Web Vitals de Google, mon retour d’expérience

Les Core Web Vitals, qu’est-ce que c’est ?

Depuis quelques mois, on entend souvent parler des « Core Web Vitals », et si vous avez un compte Google Search Console, vous avez vu apparaître ce terme barbare, traduit en français par « Signaux Web essentiels ».

Google avait annoncé la sortie de ces nouveaux critères en 2020, et leur documentation complète en anglais se trouve sur cet article d’avril 2020.

Ces Signaux Web Essentiels sont des mesures de performances. Leur petit nom pas très poétique sont : LCP (pour Largest Contentful Paint), FID (First Input Delay) et CLS (Cumulative Layout Shift). Il est fort probable que votre SEO, votre agence web ou autre vous ait récité ces doux acronymes récemment, mais il est également fort à parier que vous ne sachiez ni pourquoi ni comment améliorer ces indicateurs de performance de Google.

Largest Contentful Paint – LCP

Le LCP correspond au temps de rendu du plus grand élément de contenu visible de la page. C’est ça, ce « largest »…

En gros, il calcule le moment exact où le plus grand élément de contenu – bloc, image, vidéo, – est entièrement chargé. Un bon LCP ne doit pas durer plus de 2,5 secondes !

First Input Delay – FID

Le FID, First Input Delay, mesure la réactivité suite à une interaction sur une page web. Pour le dire autrement, le FID indique le temps nécessaire pour que la page soit utilisable. C’est le temps qui s’écoule entre le moment où l’utilisateur effectue une action et celui où le navigateur répond à cette interaction; c’est ce qui explique que ce soit un indicateur lié à l’expérience utilisateur.

Un bon FID doit répondre au moins de 0,1 seconde. Les éléments qui peuvent dégrader cette mesure sont souvent les exécutions de JavaScript bloquant le contenu, ou trop lents. Nous vous recommandons la lecture de cet article très complet pour aller plus loin.

Cumulative Layout Shift – CLS

Le CLS, nom de code pour Cumulative Layout Shift , soit « décalage cumulatif de mise en page »,  mesure la stabilité visuelle. Ce chiffre mesure l’importance des changements inattendus sur une page, comme quand il arrive que l’on clique sur une pub qui vient de décaler tout le contenu de haut de page, ou au dessus d’un bouton, et qui d’ailleurs souvent amène à cliquer dessus involontairement – ce qui fait les affaires des publicitaires. Google sait bien que ce genre de comportement n’est pas du tout apprécié, et en bon hypocrite, nous donne donc cette recommandation (rappelons tout de même que Google nous met lui même des pubs un peu partout et en vit très bien).

Ces paramètres sont à la fois complexes à comprendre, à expliquer, et à améliorer.

Mais pourquoi améliorer les Core Web Vitals ?

Cela fait longtemps que Google nous pousse à améliorer la performance de nos sites, soit-disant pour améliorer le confort des utilisateurs. C’est vrai que nous naviguons sur le web de plus en plus via notre mobile, et que les critères de performances y sont plus élevés. Optimisation de la bande passante, optimisation du rendu utilisateur, etc.

Google doit surtout faire le tri entre les milliards de données qu’il a à gérer, et il va de plus en plus privilégier les contenus performants. Google n’utilise pas encore les Core Web Vitals dans ses algorithmes, mais ces signaux seront pris en compte en Mai 2021, selon la communication officielle.

Est-ce à dire que si votre page reçoit un score de 50 sur 100 sur Page Speed Insight en version Mobile, votre site sera pénalisé ?

Non, car c’est la performance de l’ensemble du site qu’il faut prendre en compte. Google Search Console a d’ailleurs activé de nouvelles vues dans ce sens, qui nous indiquent le pourcentage d’urls rapides, et la liste des urls « ayant échoué ».

Mais là non plus, pas de panique !

D’une part, tous les critères de performance n’ont pas le même poids. Si vous manquez de temps (ou de budget), concentrez-vous sur les critères les plus importants. C’est-à-dire le FID (aussi appelé Time To Interactive, TTI) et le LCP.

D’autre part, parce que selon nous, les performances très élevées ne sont nécessaires que dans les secteurs les plus concurrentiels (assurance, medias, hôtellerie…) et ne seront pas un critère de déclassement.

Cela va plutôt devenir un critère de préférence : pour une recherche donnée sur Google, si Google doit choisir entre X résultats de qualité éditoriale identique (et la qualité des contenus reste prioritaire !), sans critères de netlinking discriminatoires (on a affaire à des pages et des sites qui reçoivent de bons backlinks), les notes de performance seront le critère majeur.

Ce n’est là qu’une supposition, et l’univers du SEO va surveiller de près et lancer des tonnes d’expériences et d’outils de mesure pour vous faire des retours sur ce sujet d’ici la fin de l’année 2021 !

Optimiser les Core Web Vitals : retour d’expérience avec citations.ouest-france.fr

A vrai dire, tout a déjà été dit sur le sujet des Core Web Vitals pour ce qui est des définitions et des explications. Je vous recommande l’excellent article de nos amis Dareboost.

Entrons maintenant dans le coeur du sujet. En tant qu’éditeur d’un site grand public à grosse audience (entre 3 et 4 millions de pages vues mensuelles), j’ai du m’intéresser de près au problème des performances. Ce site, c’est Citation du jour, le site que je gère depuis près de 12 ans.

La chance que j’ai sur ce point est d’être accompagné par les équipes de Ouest France, qui sont au fait des techniques modernes d’optimisation des performances. Je suis moi-même très au fait du travail sur les performances d’un site web. Ainsi, j’ai depuis longtemps appliqué les techniques suivantes :

• envoi de CSS inline (dans le code HTML) envoi des fichiers CSS restants en AJAX, par de l’injection de script
• injection des fichiers JavaScript en asynchrone par injection de script
• mise en cache des pages via varnish

Mais hélas, bien que ces techniques améliorent la note Page Speed Insight sensiblement et le Speed Index, cela n’améliore par forcément les Core Web Vitals ni l’expérience utilisateur.

D’une part, parce que le site contient des publicités, et que les publicités et l’expérience utilisateur fait rarement bon ménage…

D’autre part, parce qu’il n’est pas toujours aisé de comprendre ce qui impacte le LCP ou le FID.

Pour résumer, j’avais le sentiment d’avoir tout fait « bien comme il faut », et je me prenais une mauvaise note, à cause de l’ajout de publicités sur les pages.

J’ai passé plusieurs jours à potasser, à discuter et à tester pour trouver quelques idées qui ont tout changé.

Explications.

Tout d’abord : l’ajout – obligatoire – du cookie consent.

Depuis début avril 2021, la CNIL impose un bandeau cookie permettant de paramétrer les cookies ou simplement de les refuser, et plus simplement qu’avant. En discutant avec les équipes Ouest France, j’ai bloqué logiquement l’envoi des scripts de publicité avant tout choix de l’utilisateur, quel qu’il soit. Bingo, cela évite de charger des JavaScripts non critiques (sauf pour les régies publicitaires).

Ensuite, l’analyse des performances avec l’onglet dédié dans la console de Chrome : cela m’a permis de mettre le doigt sur les éléments les plus lents, qui détériorent le LCP. En général, il s’agit d’image, ou de fonts, qui par ailleurs agissent aussi sur le CLS. J’ai donc décidé de ne plus charger de fonts Google sur mobile. Basta, on oublie, c’est beau, mais sur ce genre de site, cela ne fait pas de différence.

Pour terminer, mais ça je le savais déjà, il faut penser à précharger les ressources critiques avec l’aide des « Preload, Prefetch et Preconnect ». Mais attention à les utiliser à bon escient, car cela peut être contre-productif.

Le résultat est là, la preuve en images avec une capture écran des « Signaux Web essentiels » de la Search Console :

Comme on peut le voir, le nombre de pages lentes est passé de quasiment 75 000 à 16 en quelques jours !

Optimiser les core web vitals : pour conclure

Pour conclure ce retour d’expérience sur les Core Web Vitals, je pense que c’est un sujet qui prend de l’importance et qui peut être discriminant, car tout le monde n’a pas les moyens d’agir sur ces paramètres : il faut avoir des connaissances techniques pointues. Mais d’un autre côté, il ne faut y passer du temps et y consacrer du budget que sur des sites à forte audience et dans des secteurs concurrentiels. Rien ne sert de pousser l’optimisation à ce point sur un site de 10 ou 100 pages !