CORE WEB VITALS : Comprendre et se préparer à l’update « page expérience » de Google
Ecrit par Mathieu CHAPON
le
C’est sans doute la news SEO la plus importante de ces dernières semaines : l’annonce d’un « nouveau » facteur de ranking pour l’année prochaine. Le « page experience » ou en français la « convivialité des pages » sera un facteur de positionnement à ne pas négliger.
Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog.
Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer.
La convivialité des pages, quel impact pour votre SEO
Il aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident.
Dès l’année prochaine la question ne se posera sans doute plus autant : il va falloir améliorer l’expérience utilisateur et donc les temps de chargement !
Google a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une bonne expérience utilisateur.
Maintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations : les Core Web Vitals.
Nous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés.
Quels sites seront touchés ?
Dans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon contenu, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement.
Les sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet : les carrousels « À la une » seront accessibles hors AMP et la convivialité deviendra un critère important.
Cela touche tout le site ou c’est page à page ?
Les deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.
. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.
. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.
Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres.
Quand s’occuper de ces optimisations ?
Contrairement à la « speed update » de 2018, cette mise à jour n’aura pas pour objectif de « punir » les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une « pénalité ». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire.
Il n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner ? Probablement pas.
, nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances.
Cela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap.
Comment optimiser la convivialité de son site ?
Maintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google.
Nous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites.
Pour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article : https://www.search-foresight.com/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/
Optimiser le Largest Contentful Paint (LCP)
Le LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte.
Un bon LCP se situe à 2,5 secondes maximum.
Pour l’optimiser il va donc falloir se poser la question par template : quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer ?
Une étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison.
Attention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP.
Sur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte.
L’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser :
- Les temps de réponse du serveur. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial ! La mise en cache des deux côtés (serveur et client) sera également importante.
- Les fichiers JS et CSS qui bloquent l’affichage. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son CSS.
- L’appel et le chargement des images. Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix ! Vous pouvez également vous référer à cet article qui ressence plusieurs [bonnes pratiques pour le chargement des images.
- La connexion aux third-party. Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel.
Ces 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP.
Optimiser le First Input Delay (FID)
Le FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.
Un bon score si situera en dessous des 100 ms.
Il s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc.
Pour l’optimiser il faudra se focaliser sur :
- La rationalisation et l’optimisation du « thread work ». Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur.
- Optimiser son javascript. Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront : supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.
- Réduire au maximum l’impact des third-party. Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID.
Pour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager.
Optimiser le Cumulative Layout Shift (CLS)
Le CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).
Un bon score se situera en dessous des 0.1.
C’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images.
Les optimisations les plus courantes sont :
- Les images sans taille. En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image.
Pour palier ce problème, il est recommandé d’utiliser les « aspect-ratio » qui permettent de donner implicitement l’information de la taille des images au navigateur.
- Les différents embeds sans taille. Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.
- Faire attention aux contenus dynamiques. Tous les contenus du type « installation d’application » ou encore « newsletter » peuvent provoquer des changements dans la page, ce qui est facilement évitable !
- Le chargement des polices. Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut « font-display ».
Comment monitorer ces indicateurs ?
Il y a deux manières de mesurer les web core vitals : les mesures de champs et les mesures de labo.
Comme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible.
Pour les tests de champs vous pouvez utiliser :
- Le Chrome User Experience Report. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.
- Google Pagespeed Insights. L’outil est mis à jour pour inclure les nouveaux indicateurs.
- La Google Search Console. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.
- L’extension Chrome « Web vitals ».
Pour les tests de laboratoire :
- Chrome DevTools.
- Lighthouse.
A noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation.
Vous avez également la possibilité de faire vos propres mesures en Javascript et construire vos propres dashboards.
Ce qu’il faut retenir (TL ; DR)
Google laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant.
Tous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer.
La convivialité des pages pourra être un critère déterminant selon vos ambitions et votre positionnement. Ne passez pas à côté !
Baromètre Web Vitals
Enfin, l’équipe Data de Search-Foresight à créer un baromètre pour les principaux secteurs mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:
Bien entendu, si vous avez besoin du soutien d’une agence SEO pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact !
Source principale : https://web.dev/