Core Web Vitals: Tout ce qu’il faut savoir pour les maitriser en 2024
5,00/5Dans le domaine du marketing SEO, les entreprises, les blogs, les sites web et les plateformes en ligne sont en concurrence quotidienne. Le haut des résultats de recherche Google est l’endroit où ils veulent être.
Parmi les innombrables SERPs de Google, 90 % des sites répertoriés n’atteignent jamais la première page. Les 10 % qui y parviennent sont les annonces payantes, les graphiques de connaissances et une dizaine de sites qui se positionnent de manière organiques. Le trafic entre ces sites est inégal. Moins de 3 % des internautes parviennent aux résultats présent sur la seconde page de Google.
Les principaux mécanismes d’influence du marketing SEO ont été les rubriques, le contenu, les balises de titre, les mots-clés, les descriptions d’images, les liens internes, les backlinks, etc. En mettant l’accent sur le contrôle de la qualité, Google va intègre une autre exigence.
Les « Core Web Vitals » sont aujourd’hui un élément déterminant pour positionner son site sur Google. Alors que le marketing SEO traditionnel s’appuie essentiellement sur la pertinence, la distance et la proéminence, les Core Web Vitals renforceront la valeur. Une agence de création de site internet maitrisant l’optimisation des Core Web Vitals pour la mise en place ou la refonte de son site web est indispensable.
Qu’est-ce que les Core Web Vitals ?
Les Core Web Vitals sont un ensemble distinct de mesures déterminant l’expérience de l’utilisateur (UX) sur les sites web. Ces derniers intègrent trois mesures différentes de la vitesse des pages et de l’interaction entre le nœud et le client. Le cumul de ces facteurs est pris en compte dans un système de notation qui détermine la priorité accordée à une page dans le cadre d’un référencement.
Les trois éléments de Core Web Vitals
Largest Contentful Paint (LCP)
Le Largest Contentful Paint (LCP) est une mesure créée par Google pour garantir la satisfaction des utilisateurs. Ce paramètre se concentre davantage sur les performances que sur la présentation. Si la page met trop de temps à se charger et que l’internaute s’en va, elle est jugée insatisfaisante.
Le temps de chargement de la page web et les facteurs d’expérience de Google tels que les balises d’image et les vignettes vidéo déterminent la note LCP. Les images d’arrière-plan avec CSS et les éléments de texte tels que les paragraphes, les titres et les listes font également l’objet d’un contrôle de fluidité.
Causes d’un mauvais LCP
Temps de réponse lent du serveur
La vitesse de rendu d’un site web dépend du temps de réaction d’un serveur. Plus le serveur est lent, plus il faudra de temps pour afficher quelque chose sur l’écran d’un appareil.
La première solution consiste à optimiser votre serveur. La mise en cache des actifs et du HTML permettent d’accélérer le rendu des pages. En outre, il est conseillé d’acheminer les utilisateurs vers un CDN proche. En établissant des connexions tierces dès le début, la latence devient minimale, ce qui est important pour les sites web mobiles réactifs.
Blocage du rendu CSS et JavaScript.
Les navigateurs fournissent du contenu en analysant les balises HTML dans une arborescence DOM. Si l’analyseur rencontre des feuilles de style externes (CSS), il fait une pause. Les scripts et les feuilles de style externes retardent la distribution des ressources bloquantes du FCP et du LCP.
CSS et Java sont robustes et peuvent perdre « beaucoup de poids » grâce à la déférence, à la minimisation et à la minification. Les logiciels disponibles pour le compactage Java incluent UglifyJS2, Closure Compiler et YUI Compressor. CSSnano, UNCSS et CSSO sont tous des mécanismes capables de compresser CSS. Le temps d’optimisation du chargement s’améliorera avec le déploiement de ces outils.
Mauvais temps de chargement des ressources
Si l’augmentation de l’activité CSS et JavaScript produit de mauvais résultats, d’autres composants s’avèrent tout aussi problématiques. Les éléments affectant négativement LCP sont les images, vidéos ainsi que les composants de niveau bloc contenant des nœuds de texte.
L’optimisation et la compression des fichiers image et texte seront utiles ici. En préchargeant les ressources nécessaires et en mettant les actifs en cache, tout en utilisant un autre service worker, le temps nécessaire est réduit.
Rendu côté utilisateur
Les sites qui effectuent la majeure partie de leur rendu du côté du client perdent une bonne partie du contrôle. L’inconvénient de cette option devient évident avec l’utilisation de gros paquets JavaScript. Dans la plupart des cas, le contenu ne s’affiche pas tant que JavaScript n’a pas terminé son rendu, ce qui compromet les évaluations LCP.
La minimisation du JavaScript est cruciale, et le rendu côté serveur est préférable à celui côté utilisateur. Une autre solution est le pré-rendu, qui permet d’optimiser le temps de chargement.
First Input Delay (FID)
Le First Input Delay (FID) mesure le temps qui s’écoule entre l’interaction initiale avec l’utilisateur et la réponse du navigateur. Il s’agit d’un facteur crucial qui détermine si le client quittera le site ou non. Les retards se produisent généralement lorsque le fil principal du navigateur est occupé.
Les fichiers JavaScript chargés par des applications locales sont généralement à l’origine des problèmes de FID. Les navigateurs tentent d’analyser et d’exécuter les fichiers, mais des latences se produisent, ce qui entraîne un manque de réactivité sur les appareils finaux. Un faible taux de FID peut signifier que le site ou la page en question est inutilisable.
Causes d’un mauvais FID
JavaScript
En général, lorsque le fil principal est occupé, le navigateur ne peut pas répondre aux interactions. L’exécution intensive de JavaScript aggrave ce problème en imposant des retards sur la vitesse de chargement.
La limitation de la durée d’exécution du JavaScript devrait améliorer la réactivité. L’utilisation d’un web worker peut également s’avérer utile. Ce sont là autant de moyens d’optimiser les paramètres du site web pour l’interaction.
Cumulative Layout Shift (CLS)
L’indicateur CLS (Cumulative Layout Shift) mesure la stabilité de la conception d’une page web. Il permet de s’assurer que les interactions avec les clients se déroulent de la manière la plus naturelle possible. Les internautes sont souvent confrontés à des interruptions ou à des sauts lorsqu’ils consultent le contenu d’un site. Ces interruptions entraînent une perte de concentration et une mauvaise expérience.
Ce désagrément est le résultat d’une conception déficiente. Les effets prévalent sur les sites web adaptés aux mobiles et sur les navigateurs de bureau.
L’absence d’éléments de conception corrects entraîne une instabilité visuelle. Cette dernière a tendance à provoquer des changements soudains de mise en page, ce qui amène souvent l’utilisateur à cliquer par inadvertance sur un contenu indésirable. Les exemples typiques sont les sites contenant des publicités pop-up.
Les nouvelles conceptions, même si elles sont correctement structurées, peuvent également ralentir les pages web. L’algorithme de Google compense en autorisant une omission de 500 ms avant de commencer son processus de calcul.
Causes courantes d’un mauvais CLS
Images sans dimensions
L’exclusion des attributs de largeur et de hauteur pour les vidéos et les images se traduira par un mauvais classement. De nombreuses personnes ne réservent pas d’espace pour les médias, ce qui entraîne des sauts et des décalages.
La solution est simple : toujours inclure la largeur et la hauteur. L’autre option consiste à utiliser des boîtes de ratio d’aspect CSS. Elles sont pratiques pour réserver de l’espace sur les sites web. Elles sont particulièrement utiles sur les sites qui hébergent des publicités.
Publicités, éléments intégrés et Iframes sans dimensions
Les publicités contribuent largement à ce problème. Les réseaux publicitaires optent pour un dimensionnement dynamique plutôt que statique, ce qui augmente le trafic sur les sites web. Malheureusement, cela se fait au détriment de l’expérience de l’ordinateur de bureau ou du téléphone portable.
Certains widgets permettent d’intégrer des éléments tels que des vidéos, des cartes et du contenu de médias sociaux dans la page web. Le problème est que le site n’a souvent aucune idée de la taille ou de la composition exacte de l’élément intégré. En ne réservant pas d’espace, l’instabilité devient apparente une fois la page chargée.
En calculant à l’avance les besoins spatiaux nécessaires à l’intégration ou au repli, le site évite de compromettre le CLS. Les outils de développement des navigateurs sont pratiques pour obtenir la hauteur et la largeur du résultat. Une fois ces paramètres établis, l’iframe s’adaptera automatiquement à l’espace réservé à chaque chargement de la page.
Contenu dynamique embeded
Les éléments nouvellement insérés sur d’anciens supports sont également à l’origine des changements de mise en page. Les bannières d’appel à l’action en sont un exemple typique. Non seulement elles bloquent l’interaction, mais elles irritent au lieu de convaincre.
Là encore, réservez de l’espace. En outre, les concepteurs de sites peuvent ajouter un squelette d’interface utilisateur. Ce dernier est un espace réservé qui empêchera le texte de migrer lorsque l’image se chargera.
Polices de caractères Web à l’origine de FOIT/FOUT
Le téléchargement et le rendu des polices de caractères Web sont à l’origine d’un flash de texte non stylisé (FOUT). Dans ce cas, un nouveau style remplace l’impression de secours.
Une autre conséquence est l’éclair de texte invisible (FOIT), qui masque la police de caractères jusqu’à ce qu’un nouveau cas soit disponible.
L’API de chargement des polices réduit le temps nécessaire pour obtenir les styles de lettrage nécessaires, ce qui permet de minimiser ou d’éradiquer les cas de FOUT et FOIT.
Mesures des Core Web Vitals
Comme nous l’avons indiqué, les trois éléments vitaux du web ont des mesures individuelles. Chacun d’entre eux est classé selon des normes de temps différentes.
Une bonne note LCP est inférieure à 2,5 secondes. Google fait preuve d’indulgence pour tout ce qui est inférieur à 4 secondes, mais cela signifie qu’il y a encore de la place pour l’amélioration.
L’unité de mesure de la FID est la milliseconde. Si le temps écoulé entre la saisie de l’utilisateur et la réaction de la page web est inférieur à 100, c’est l’idéal. Un délai de 300 ms est acceptable, mais il laisse présager des problèmes à venir. Tout délai supérieur à 300 ms entraîne la relégation de la page web.
La valeur idéale pour le CLS est zéro. Les algorithmes de Google acceptent 0,1, mais comme le maximum acceptable est de 0,25, la marge de manœuvre est trop faible. Les administrateurs de sites web peuvent tout aussi bien viser la perfection totale.
Principaux outils d’analyse pour les Core Web Vitals
Pour analyser les Core Web Vitals de votre site web, vous pouvez utiliser plusieurs outils qui vous fournissent des informations détaillées sur les performances de votre site en ce qui concerne l’expérience utilisateur. Voici quelques-uns des principaux outils que vous pouvez utiliser :
Google PageSpeed Insights
C’est un outil gratuit de Google qui vous donne des informations sur la vitesse de chargement de votre site pour les appareils mobiles et les ordinateurs. Il mesure également les Core Web Vitals, y compris le Largest Contentful Paint (LCP), le Cumulative Layout Shift (CLS), et la First Input Delay (FID).PageSpeed Insights
Google Search Console
Cet outil fournit des rapports sur les performances de votre site dans les résultats de recherche Google. Il inclut également des données sur les Core Web Vitals. Vous pouvez consulter ces informations dans la section « Améliorations » de la Search Console. (Google Search Console)
Lighthouse
C’est une extension de navigateur développée par Google qui peut être exécutée directement dans Chrome. Lighthouse fournit des audits détaillés pour les performances, l’accessibilité, la SEO, et plus encore. Il mesure également les Core Web Vitals. (Lighthouse)
Web Vitals Extension pour Chrome
Cette extension vous permet de surveiller en temps réel les Core Web Vitals de votre site pendant que vous naviguez. Elle affiche les métriques LCP, FID et CLS pour chaque page visitée. (Web Vitals Extension)
Chrome DevTools
Les DevTools intégrées dans Google Chrome offrent des outils puissants pour le développement web. Vous pouvez utiliser l’onglet « Performance » pour enregistrer et analyser les performances de chargement de votre site, y compris les Core Web Vitals. (Chrome DevTools)
En utilisant ces outils, vous pourrez identifier les domaines de votre site qui nécessitent des améliorations pour répondre aux recommandations des Core Web Vitals et, par conséquent, améliorer l’expérience utilisateur globale.
Pourquoi l’optimisation de Core Web Vitals est-elle importante ?
Depuis la MAJ de Google en 2021, es signaux SEO habituels ne suffisent plus à maintenir un classement élevé sur Google.
Il s’agit de la mise en œuvre d’une norme prônant la qualité de l’interface utilisateur. Les sites en phase avec les critères Core Web Vitals pas affectés. Les pages web qui ne se sont pas adaptées en ressentiront certainement les effets, malgré l’efficacité de leur référencement. Les listings dont le Core Web Vitals est faible baisseront dans le classement, laissant la place aux entités qui sont conformes.
Conclusion
En établissant une nouvelle réglementation en matière de marketing SEO, Google ouvre la voie à l’amélioration. La norme Core Web Vital est la première, et de nombreuses autres suivront certainement. Ces mesures créent une plateforme pour qu’une nouvelle ère de l’internet fusionne avec d’autres technologies émergentes sans faille.
