Core Web vitals de google :

en route vers la page experience ultime !

Les Core Web Vitals (CWV) ou Signaux Web essentiels sont de “nouveaux” critères de l’algorithme SEO de Google.
Ils permettent d’améliorer l’expérience utilisateur en favorisant un temps de chargement plus rapide, à plusieurs niveaux.

Les LCP, FID et CLS vont devenir les KPI essentiels pour la rapidité de votre site, et le ranking Google.

core web vitals seo

1. Introduction aux Signaux Web Essentiels

Les signaux web essentiels sont basés sur 3 critères : le largest contentful paint, le first input delay et le cumulative layout shift.
Des termes techniques et incompréhensibles pour un non anglophone. C’est pour cela qu’il convient d’en faire une petite introduction.

Le Largest Contentful Paint indique le temps que met l’élément le plus lourd de votre page à s’afficher, ça peut être une vidéo ou une image en très haute résolution.

Le First Input Delay désigne l’interactivité de vos URL entre vos serveurs et l’utilisateur final. Lorsqu’il clique sur un lien ou un bouton sur votre page, il y a un temps de latence. 

Quant au Cumulative Layout Shift, ce n’est rien d’autre que la stabilité de votre page. Certains sites, lents, mettent parfois plusieurs secondes à afficher le rendu final.

Si ces décisions ont été prises, c’est pour confirmer l’importance que porte Google à l’expérience utilisateur et à une navigation fluide.

2. Comment mesurer ses performances Core Web Vitals ?

C’est bien joli de savoir ce que c’est, de savoir que ça va être pris en compte par Google, mais concrètement, où est-ce que l’on voit cela ? 

LES CWV via la Google Search Console

Dans un premier temps, si votre site n’est plus tout jeune, vous devriez avoir un premier aperçu de vos Core Web Vitals directement dans la Google Search Console.

Parfois, il se peut que vous ayez un message d’erreur vous indiquant qu’ils n’ont pas assez de données pour vous les fournir.

Ils vous redirigent alors vers PageSpeed Insights, un outil développé par Google.

core web vitals gsc

Les core web vitals via PageSpeed Insights de google

PS Insights est développé par Google pour vous fournir les éléments essentiels liés à la vitesse de chargement de votre site.

Il reprend les points des Core Web Vitals, mais il en prend également en compte de nombreux autres.

Il vous donne les éléments les plus importants, si vous êtes dans le vert, c’est génial ! Même si c’est rarement le cas lorsqu’on ne s’est pas penché dessus.

 

cwv pagespeed insights

 

Utiliser l’extension de Lighthouse

Lighthouse, c’est un peu plus technique. Sur une page web, vous pouvez “inspecter la page” en faisant un clic droit. Avec Chrome, Lighthouse est intégré dans ces outils pour les développeurs.

Pour les profils moins techniques, vous pouvez utiliser l’extension Lighthouse développée spécialement pour Chrome qui fait très bien le travail.

cwv lighthouse

Il en existe d’autres, mais vous avez largement de quoi faire avec ces 3 outils, tous développés par Google. Si vous voulez en savoir plus ou que vous avez un profil plus technique, vous pouvez aller voir du côté de Chrome UX Report ou de Web.dev.

3. Comprendre le Largest Contentful Paint

Core Web Vitals

Le Largest Contentful Paint, c’est quoi ?

cwv lcp

Une image vaut parfois mille mots, et voici une illustration correcte et précise du LCP. 

Contrairement aux autres critères, il s’agit ici du chargement complet de votre page et de tous ses éléments.

Les principaux problèmes qui ralentissent le LCP

De nombreux points impactent le Largest contentful paint, ils peuvent provenir de votre site ou de vos serveurs.

Voyons ensemble quelques-uns des principaux éléments.

 

  • Vos images peuvent être très lourdes et mettre du temps à charger
  • Le serveur qui héberge votre site est sans doute surchargé ou trop lent
  • Les langages JavaScript et CSS peuvent bloquer le rendu sur votre site et mettre plus de temps à charger

Comment améliorer son LCP ?

En fonction des éléments où vous êtes les moins bons, il faudra prendre différentes mesures pour régler la lenteur de votre site.

Pour les images, le passage à de nouvelles extensions Webp peut être une bonne solution, tout comme leur compression.

Au niveau du serveur, il faudra certainement opter pour un CDN et penser à prendre un hébergeur dédié ou plus qualitatif.

Enfin, si vous utilisez WordPress, des extensions pourront vous aider à optimiser le code de votre site, à ne plus bloquer le JS et le CSS.

4. Le First Input Delay

Qu’est-ce que le First Input Delay ?

Une fois que l’utilisateur est arrivé sur votre site, la première chose qu’il va faire, c’est scroller ou cliquer quelque part.
Le first input delay détermine le temps d’interaction entre le navigateur utilisé (Chrome, Safari..) et l’action de l’utilisateur.

Parfois, le code prend un peu plus de temps à s’exécuter et il arrive qu’il ne se passe rien lorsque l’on clique sur une page. Google considère le premier “input delay” comme le plus important puisqu’on n’a qu’une seule opportunité de faire bonne impression.

Qu’est-ce qui ralentit le FIP ?

Comme pour le LCP, le problème peut venir de certaines images trop lourdes et qui demandent trop de ressources à votre navigateur web.

L’un des facteurs qui revient le plus, ce sont les “third parties”, mais malheureusement nous n’avons pas la main là-dessus. Ils proviennent généralement de codes ajoutés à votre site : le pixel Facebook, un A/B testing ou même des boutons de partages de réseaux sociaux.

Tout ce qui apporte un contenu supplémentaire au code source de votre page est mauvais pour le first input delay.

Comment améliorer son score First Input Delay ?

Dans un premier temps, il faut évidemment vous concentrer sur les choses les plus simples à faire. La compression des images est un gros avantage pour votre site, et pour les core web vitals en général.

Ensuite, vous pouvez vous attaquer à d’autres formes de problèmes : un robots.txt non valide, l’utilisation d’HTTP plutôt qu’HTTPS, une taille trop importante des ressources CSS et JS…

5. Le Cumulative Layout Shift, c’est quoi ?

En quoi consiste le CLS ?

Le cumulative layout shift concerne la stabilité graphique de votre site. Peu sont concernés, mais il est important d’y jeter un oeil attentivement.

Plus votre page sera stable, meilleur sera votre CLS.

Voici une illustration proposée par Google pour vous aider à visualiser les problèmes liés au CLS.

Les principaux problèmes rencontrés avec le CLS

Souvent, il s’agit d’images sans dimensions précises dans votre CMS, des publicités si vous faites de l’Adsense, les polices web ou même le contenu intégré dynamiquement.

Si vous ne résolvez pas ces caractéristiques avant leur apparition sur votre site, vous allez avoir des problèmes quant à la lenteur de votre CLS.

Comment résoudre les problèmes liés au Cumulative Layout Shift ?

Lorsque vous placez des images sur votre site, attribuez constamment des longueurs et largeurs précises pour chaque appareil (PC, tablette, smartphone…). Ainsi, vous laissez le moins de choix possible au navigateur, et il ne s’en porte que mieux.

Aussi, vous pouvez utiliser les CSS aspect ratio boxes, qui vous plutôt s’axer sur les encarts, les marges et le positionnement de vos médias.

Si vous utilisez Adsense, les encarts publicitaires sont un véritable enfer pour le CLS si vous ne les paramétrez pas correctement.

Les changements de mises en page peuvent être très nombreux.

Veillez à toujours réserver un espace statique pour vos spots publicitaires.

Enfin, il peut s’agir des contenus dynamiques : un contenu s’affiche par dessus un autre existant. Ça peut être le cas lors de notification push, de pop-up lié à la newsletter, des suggestions, une netiquette ou autre. Si vous ne comprenez pas ce dernier point, pas de panique : si vous êtes concernés, vous le savez certainement déjà !

6. AMP vs Core Web Vitals ?

Alors que Google a mis en avant ses pages AMP, Accelerated Mobile Page, les voici qui sont surplombées par les Core Web Vitals.

Y a-t-il un match ? Ont-ils les mêmes rôles ?

L’importance d’AMP

La technologie AMP est Open-Source, elle est loin d’être propre à Google. Bing s’en sert aussi pour ses moteurs de recherche.

Il s’agit d’un format différent des pages classiques, beaucoup moins lourdes et beaucoup plus épurées. En réalité, vous perdez quasiment tous les artifices de votre page : exit les mises en page stylish, les logos ou la personnalisation avancée.

Le format AMP n’a rien de magique, il se contente d’enlever toute mise en page avancée pour permettre aux pages de charger plus rapidement. Beaucoup de ces pages AMP ont été mises en avant, notamment dans Discover et dans les Stories Google. 

Ça a été un joli tremplin de trafic pour certains sites qui ont fait l’effort de passer à AMP. Toutefois, AMP n’a de sens que lorsque les autres pages ne font pas le travail de rapidité correctement. Et la mise en avant des Core Web Vitals par Google va permettre aux sites de se rapprocher des performances d’AMP.  

AMP et CWV, une combinaison gagnante

Si vous deviez choisir entre l’un ou l’autre, choisissez plutôt les deux.  Google n’a d’intérêt que ses utilisateurs, tout comme vous n’avez d’intérêt que pour les utilisateurs de Google. Lorsqu’une mise à jour aussi importante s’apprête à être mise en ligne, et compter pour le classement sur Google, il faut s’y mettre.

Dès 2021, votre site se devra de respecter les règles des Core Web Vitals, auquel cas il risquerait d’être sanctionné sur la SERP. C’est une relation win-win, pour Google, vous et les visiteurs de votre site. 

C’est certes un casse-tête pour les développeurs, mais cela va dans le sens d’une amélioration générale de l’expérience utilisateur sur Google et sur internet. Dès que cela n’impacte pas l’UX de votre site, n’hésitez pas à créer une version AMP de vos pages. Vous pourrez traquer facilement le trafic que ça vous aura permis de générer grâce à Google Analytics.