Google partage un ensemble mis à jour de recommandations pour optimiser Core Web Vitals afin de vous aider à décider quoi prioriser lorsque le temps est limité. Core Web Vitals sont trois métriques mesurant le temps de chargement, l’interactivité et la stabilité visuelle. Google considère ces mesures comme essentielles pour offrir une expérience positive et les utilise pour classer les sites Web dans ses résultats de recherche. Au fil des ans, Google a fourni de nombreuses suggestions pour améliorer les scores Core Web Vitals. Bien que chacune des recommandations de Google mérite d’être mise en œuvre, l’entreprise se rend compte qu’il est irréaliste de s’attendre à ce que quiconque fasse tout. Si vous n’avez pas beaucoup d’expérience dans l’optimisation des performances d’un site Web, il peut être difficile de déterminer ce qui aura l’impact le plus significatif. Vous ne savez peut-être pas par où commencer avec un temps limité à consacrer à l’amélioration de Core Web Vitals. C’est là qu’intervient la liste révisée des recommandations de Google. Dans un article de blog, Google indique que l’équipe Chrome a passé un an à essayer d’identifier les plus des conseils importants qu’il peut donner concernant Core Web Vitals. L’équipe a dressé une liste de recommandations réalistes pour la plupart des développeurs, applicables à la plupart des sites Web et ayant un impact significatif dans le monde réel. Voici ce que l’équipe Chrome de Google conseille.
Optimisation de la plus grande peinture de contenu (LCP)
La métrique LCP (Largest Contentful Paint) mesure le temps nécessaire pour que le contenu principal d’une page devienne visible pour les utilisateurs. Google indique que seulement environ la moitié de tous les sites Web respectent le seuil LCP recommandé. Voici les principales recommandations de Google pour améliorer LCP.
Assurez-vous que la ressource LCP se trouve facilement dans la source HTML
Selon le Web Almanac 2022 de HTTP Archive, 72 % des pages Web mobiles ont une image comme contenu principal. Pour améliorer LCP, les sites Web doivent s’assurer que les images se chargent rapidement. Il peut être impossible d’atteindre le seuil LCP de Google si une page attend que les fichiers CSS ou JavaScript soient entièrement téléchargés, analysés et traités avant que l’image puisse commencer à se charger. En règle générale, si l’élément LCP est une image, l’URL de l’image doit toujours être détectable à partir de la source HTML.
Assurez-vous que la ressource LCP est prioritaire
En plus d’avoir la ressource LCP dans le code HTML, Google recommande de la prioriser et de ne pas se laisser distancer par d’autres ressources moins critiques. Même si vous avez inclus votre image LCP dans la source HTML à l’aide d’une balise standard, s’il y a plusieurs balises dans la section de votre page Web avant la balise
, cela peut retarder le temps de chargement de votre ressource image. Vous devez également éviter toute action susceptible de réduire la priorité de l’image LCP, telle que l’ajout de l’attribut loading=”lazy”. Soyez prudent lorsque vous utilisez des outils d’optimisation d’image qui appliquent automatiquement le chargement différé à toutes les images.
Utilisez un réseau de diffusion de contenu (CDN) pour réduire le temps de la première bouchée (TTFB)
Un navigateur doit recevoir le premier octet de la réponse initiale du document HTML avant de charger des ressources supplémentaires. La mesure de ce temps est appelée Time to First Byte (TTFB), et plus cela se produit rapidement, plus tôt les autres processus peuvent commencer. Pour minimiser le TTFB, diffusez votre contenu depuis un emplacement proche de vos utilisateurs et utilisez la mise en cache pour le contenu fréquemment demandé. La meilleure façon de faire les deux choses, dit Google, est d’utiliser un réseau de diffusion de contenu (CDN).
Optimisation du décalage de mise en page cumulé (CLS)
Le Cumulative Layout Shift (CLS) est une mesure utilisée pour évaluer la stabilité de la mise en page visuelle d’un site Web. Selon Google, environ 25 % des sites Web ne répondent pas à la norme recommandée pour cette métrique. Voici les principales recommandations de Google pour améliorer CLS.
Définir des tailles explicites pour le contenu de la page
Des changements de mise en page peuvent se produire lorsque le contenu d’un site Web change de position après la fin du chargement. Il est important de réserver l’espace à l’avance autant que possible pour éviter que cela ne se produise. Une cause fréquente de changements de mise en page est les images non dimensionnées, qui peuvent être résolues en définissant explicitement les attributs width et height ou des propriétés CSS équivalentes. Les images ne sont pas le seul facteur susceptible de modifier la mise en page des pages Web. D’autres contenus, tels que des publicités tierces ou des vidéos intégrées qui se chargent ultérieurement, peuvent contribuer à CLS. Une façon de résoudre ce problème consiste à utiliser la propriété de rapport d’aspect dans CSS. Cette propriété est relativement nouvelle et permet aux développeurs de définir un rapport d’aspect pour les images et les éléments non-images. Fournir ces informations permet au navigateur de calculer automatiquement la hauteur appropriée lorsque la largeur est basée sur la taille de l’écran, comme il le fait pour les images aux dimensions définies.
Assurez-vous que les pages sont éligibles pour Bfcache
Les navigateurs utilisent une fonctionnalité appelée cache arrière/avant, ou bfcache en abrégé, qui permet de charger instantanément des pages plus tôt ou plus tard dans l’historique du navigateur en utilisant un instantané de la mémoire. Cette fonctionnalité peut améliorer considérablement les performances en éliminant les décalages de mise en page lors du chargement de la page. Google recommande de vérifier si vos pages sont éligibles pour le bfcache à l’aide de Chrome DevTools et de travailler sur les raisons pour lesquelles elles ne le sont pas.
Évitez les animations/transitions
Une cause fréquente de changements de mise en page est l’animation d’éléments sur le site Web, tels que des bannières de cookies ou d’autres bannières de notification, qui glissent du haut ou du bas. Ces animations peuvent écarter d’autres contenus, ce qui a un impact sur CLS. Même lorsqu’ils ne le font pas, les animer peut toujours avoir un impact sur CLS. Google indique que les pages qui animent toute propriété CSS susceptible d’affecter la mise en page sont 15 % moins susceptibles d’avoir un « bon » CLS. Pour atténuer cela, il est préférable d’éviter d’animer ou de faire la transition d’une propriété CSS qui nécessite que le navigateur mette à jour la mise en page, sauf en réponse à une entrée de l’utilisateur, telle qu’un appui sur une touche ou une touche. Il est recommandé d’utiliser la propriété CSS transform pour les transitions et les animations lorsque cela est possible.
Optimisation du premier délai d’entrée (FID)
Le premier délai d’entrée (FID) est une mesure qui mesure la rapidité avec laquelle un site Web répond aux interactions des utilisateurs. Bien que la plupart des sites Web fonctionnent actuellement bien dans ce domaine, Google suggère qu’il y a place à l’amélioration. La nouvelle mesure de Google, Interaction to Next Paint (INP), est un remplacement potentiel pour FID, et les recommandations fournies ci-dessous sont pertinentes à la fois pour FID et INP.
Éviter ou diviser les longues tâches
Les tâches sont tout élément de travail discret effectué par le navigateur, y compris le rendu, la mise en page, l’analyse, la compilation et l’exécution de scripts. Lorsque les tâches prennent beaucoup de temps, plus de 50 millisecondes, elles bloquent le thread principal et empêchent le navigateur de répondre rapidement aux entrées de l’utilisateur. Pour éviter cela, il est utile de diviser les tâches longues en tâches plus petites en donnant au thread principal plus d’opportunités pour traiter le travail critique visible par l’utilisateur. Ceci peut être réalisé en cédant souvent au thread principal afin que les mises à jour de rendu et les autres interactions de l’utilisateur puissent se produire plus rapidement.
Évitez le JavaScript inutile
Un site Web avec une grande quantité de JavaScript peut conduire à des tâches en concurrence pour l’attention du thread principal, ce qui peut affecter négativement la réactivité du site Web. Pour identifier et supprimer le code inutile des ressources de votre site Web, vous pouvez utiliser l’outil de couverture dans Chrome DevTools. En diminuant la taille des ressources requises pendant le processus de chargement, le site Web passera moins de temps à analyser et à compiler le code, ce qui se traduira par une expérience utilisateur plus transparente.
Évitez les grandes mises à jour de rendu
JavaScript n’est pas la seule chose qui peut avoir un impact sur la réactivité d’un site Web. Le rendu peut être coûteux et interférer avec la capacité du site Web à répondre aux entrées des utilisateurs. L’optimisation du travail de rendu peut être complexe et dépend de l’objectif spécifique. Cependant, il existe des moyens de s’assurer que les mises à jour de rendu sont gérables et ne se transforment pas en longues tâches. Google recommande ce qui suit :
- Évitez d’utiliser requestAnimationFrame() pour effectuer un travail non visuel
- Gardez votre taille DOM petite
- Utilisez le confinement CSS
Conclusion
En résumé, les Core Web Vitals sont une mesure importante pour fournir une expérience utilisateur positive et un classement dans les résultats de recherche Google. Bien que toutes les recommandations de Google valent la peine d’être mises en œuvre, cette liste condensée est réaliste, applicable à la plupart des sites Web et peut avoir un impact significatif. Cela inclut l’utilisation d’un CDN pour réduire le TTFB, la définition de tailles explicites pour le contenu de la page afin d’améliorer le CLS, la création de pages éligibles pour bfcache et l’évitement de JavaScript et d’animations/transitions inutiles pour le FID. En suivant ces recommandations, vous pouvez mieux utiliser votre temps et tirer le meilleur parti de votre site Web.
Source: Web.dev Image en vedette : salarko/Shutterstock