Revenir au blog

Follow and Subscribe

Disponible uniquement en anglais

Cette page n'est actuellement disponible qu'en anglais. Nous nous excusons pour la gêne occasionnée, merci de revenir sur cette page ultérieurement.

Core Web Vitals : comment améliorer la vitesse de votre site web | Fastly

Natalie Griffeth

Senior Content Marketing Manager

Ce n’est plus un secret pour personne : Google accorde une plus grande importance aux sites qui privilégient l’expérience utilisateur. La rapidité de chargement d’une page et la compatibilité mobile d’un site sont depuis longtemps des facteurs qui influencent les résultats de classement dans les recherches

Google utilise un ensemble de trois métriques essentielles pour déterminer l’« usabilité » de votre site web, qui portent le nom de Core Web Vitals (CWV). Les CWV prennent en compte les performances de chargement du site web (ou de la page web), son interactivité et sa stabilité visuelle. Si votre classement est mauvais pour l’une de ces métriques, vos performances dans les résultats de recherche, votre classement et la visibilité de votre site web en seront affectés.

Que sont les Core Web Vitals ?

Les Core Web Vitals sont un ensemble de facteurs que Google considère comme essentiels pour l’expérience utilisateur d’un site web. Ils évaluent les performances des pages de votre site web comme médiocres, à améliorer ou bonnes.

Pour mesurer ces signaux, Google recommande aux sites web de se concentrer sur les métriques de page suivantes :

Quels sont les trois Core Web Vitals et pourquoi sont-ils importants ? 

Les Core Web Vitals aident à évaluer plusieurs facteurs qui influencent l’expérience utilisateur. Obtenir un bon score dans chacune de ces trois catégories est essentiel pour bien se classer auprès de Google et offrir une expérience de qualité à vos clients. 

Décalage cumulatif de mise en page

 Le CLS mesure la stabilité visuelle et quantifie le volume des changements de mise en page qui se produisent de manière inattendue sur le contenu visible. Un changement de mise en page se produit chaque fois qu’un élément visible change de position et passe d’un cadre à l’autre. Le CLS n’est pas une métrique de vitesse, Google calcule donc un score basé sur l’impact et la distance du changement de mise en page.

En termes simples : un utilisateur est sur le point de cliquer sur le bouton « Finaliser l’achat » dans son panier et, sans avertissement, celui-ci se déplace mystérieusement de quelques pixels, l’amenant à cliquer sur « Retirer du panier ». Oups. Un bon score est inférieur à 0,1.

Interaction to Next Paint

Intégré en 2024, l’INP évalue la réactivité globale d’une page aux interactions des utilisateurs en observant la latence des interactions au clavier qui se produisent pendant que les utilisateurs naviguent sur la page. La valeur de l’INP est l’interaction la plus longue observée pendant la visite des utilisateurs. Plus simplement, il s’agit du temps de chargement le plus long d’un élément après qu’un utilisateur a cliqué dessus. 

Quelle est une bonne valeur INP ? 

  • Un INP inférieur ou égal à 200 millisecondes signifie qu’une page a une bonne réactivité.

  • Un INP supérieur à 200 millisecondes et inférieur ou égal à 500 millisecondes signifie que la réactivité d’une page doit être améliorée.

  • Un INP supérieur à 500 millisecondes signifie que la page est peu réactive.

Largest Contentful Paint

Le LCP mesure le temps écoulé entre le début du chargement d’une page et le rendu de l’élément le plus volumineux.  Les éléments mesurés sont généralement des images, des vidéos et des éléments de type bloc contenant des nœuds de texte. 

En termes simples : vous voyez cette vidéo lourde que vous chargez tout en haut de la page d’accueil ? Nous espérons toujours qu’elle se charge rapidement ! Un chargement inférieur à 2,5 secondes est considéré comme une bonne mesure.

Comment améliorer les Core Web Vitals

L’utilisation d’un CDN moderne est l’un des moyens les plus rapides et les plus efficaces d’améliorer vos Core Web Vitals, en particulier le Largest Contentful Paint (LCP), le plus important des trois CWV. 

Bien que votre configuration CDN puisse contribuer à améliorer l’INP et le CLS, ce ne sont pas les principaux moteurs. Le Largest Contentful Paint peut être directement impacté par votre configuration CDN et le design d’API.  

Pour améliorer cette métrique, l’une des solutions consiste à réduire le temps de chargement du premier octet (TTFB), et ce, en mettant en cache les réponses API et en compressant les images en périphérie. Cela améliorera également votre LCP. D’autre part, le fait d’optimiser la conception de l’API peut nettement améliorer le temps de chargement du contenu dynamique, offrant une expérience utilisateur non seulement plus personnalisée, mais aussi plus rapide. 

Vraiment, la meilleure approche est d'utiliser un CDN moderne qui peut vous aider à relever tous ces défis : 

Comment améliorer les Core Web Vitals grâce à un CDN

Google recommande de se concentrer sur ses métriques Core Web Vitals. Un CDN moderne peut vous aider à optimiser vos performances pour toutes ces métriques et notamment pour celle que Google considère comme la plus importante, le Largest Contentful Paint (LCP), qui mesure vos performances en matière de chargement. La configuration de votre CDN et la conception de votre API peuvent considérablement améliorer votre LCP en optimisant le temps de chargement du premier octet (TTFB), en mettant en cache les réponses d’API et en compressant les images en périphérie. 

Une conception d’API optimisée et un réseau qui gère activement ses connexions ouvertes peuvent considérablement améliorer le temps de chargement de votre contenu mis en cache, votre contenu dynamique et même votre contenu ne pouvant pas être mis en cache, tout en proposant une expérience utilisateur plus personnalisée et plus rapide. Vous découvrirez plus de détails sur comment Fastly peut vous aider à améliorer votre LCP dans ce rapport

Voici les façons dont un CDN aide à améliorer les CWV :

Distribution de contenu obsolète 
Un CDN moderne peut proposer du contenu obsolète lorsque votre serveur d’origine est trop lent. Imaginez qu’un client recherche une page de FAQ sur un thème sur l’industrie et que votre serveur d’origine ne fonctionne pas ou qu’il met trop de temps à répondre. Un CDN comme celui de Fastly peut continuer à prendre en charge un contenu « obsolète » pour les spectateurs jusqu’à ce que le problème soit résolu. Résultat : aucune interruption dans la distribution de contenu à votre public. Ce processus permet à la fois de préserver l’expérience utilisateur et la satisfaction et de maintenir un bon classement SEO (Google ne voit jamais que votre site ne charge pas de données ou que le chargement est lent), et lorsque votre serveur d’origine est de nouveau actif et fonctionne, le contenu est mis à jour. 

Traitement d’un grand nombre de requêtes
Le web est sans cesse rempli de robots d’exploration, qui consomment tout ce qu’on y trouve. Les demandes des robots d’exploration peuvent être une charge excessive sur vos serveurs et avoir un impact négatif. Les CDN de Fastly peuvent être facilement configurés pour prendre en charge du contenu « obsolète » pour les robots d’exploration, réduisant donc la demande sur vos serveurs. Les robots d’exploration continuent d’obtenir un contenu réel et pertinent, mais il pourrait ne pas s’agir de la toute dernière version. Un bon CDN peut gérer un grand volume de requêtes (même des attaques DDoS) sans sacrifier les performances, en acheminant intelligemment le trafic en fonction de la météo sur Internet. 

Meilleur classement en matière de sécurité
Les grands fournisseurs de CDN proposent des fonctionnalités de sécurité telles que DDoS, Bot Protection et la sécurité de la couche de transport. Les sites web sont ainsi plus sécurisés pour vos clients. Elles contribuent aussi à se prémunir contre différentes cyberattaques. Les mises à jour répétées de l’algorithme de Google montrent clairement que la sécurité d’un site web joue un rôle important dans son classement SEO. Les sites web dont les mesures de sécurité sont insuffisantes ou inexistantes obtiennent un mauvais classement et peu de visibilité dans les résultats de recherche. 

Temps de chargement plus rapides pour les fichiers volumineux
Si vous servez des fichiers vidéo plus volumineux à vos clients, l’utilisation d’un CDN peut rapidement améliorer la vitesse de la page. Google n’indexe généralement pas les fichiers vidéo, sauf s’ils se trouvent sur des plateformes comme YouTube. Par conséquent, si votre site web héberge divers fichiers vidéo intégrés sur le même serveur web, votre page risque de se charger plus lentement. L’utilisation d’un CDN pour servir des versions mises en cache des fichiers vidéo peut être un excellent moyen d’éviter ce problème. 

Mise en cache du contenu dynamique 

API
Une autre amélioration des performances traduite par le CDN moderne implique les requêtes API : une bonne solution CDN peut protéger votre serveur d’origine contre des requêtes API excessives. Bien souvent, les entreprises pensent, à tort, que le trafic API est trop dynamique pour pouvoir être pris en charge par leur CDN. Fastly préconise depuis longtemps de bonnes pratiques dans la conception d’API, permettant de mettre en cache en périphérie des réponses d’API. Malheureusement, les réponses d’API sont trop souvent ignorées, car elles ne « peuvent pas être mises en cache », ce qui signifie que vous êtes désavantagés concernant les gains les plus simples que vous pourriez obtenir en termes de performance et de fiabilité, si vous aviez mis en cache uniquement vos réponses d’API sur un réseau en périphérie. La disponibilité des API peut impacter la disponibilité des sites web et des services partenaires, vous devez donc impérativement garantir le plus haut niveau de sécurité pour vos API. Vous pouvez y parvenir en mettant en cache en périphérie davantage de contenu API, avec le CDN approprié. 

Contenu dynamique
Les CDN modernes offrent une fonctionnalité clé vous permettant de mettre en cache plus de contenu. Ils peuvent mettre en cache du contenu « dynamique » ou qui change fréquemment (par exemple, les informations de compte, les produits basés sur la localisation, les modifications de stocks, les unes des journaux locaux). Avec un CDN traditionnel, les clients souffrent, car leur trafic doit renvoyer toutes les données vers les serveurs d’origine, ce qui se traduit par des temps de réponse plus lents, des dépenses d’infrastructure accrues et des coûts associés plus élevés pour la sortie de données pour ces nombreuses réponses (inutiles). Au lieu de cela, les CDN modernes permettent à votre entreprise de prendre en charge du contenu vraiment dynamique qui change avec chaque demande, en périphérie plutôt qu’à partir des serveurs d’origine. Vous pouvez ainsi exécuter votre code au plus près de l’utilisateur final, supprimant les dégradations de performances coûteuses et longues.

Optimisation des images
Un CDN peut contribuer à optimiser considérablement les images. En stockant des copies d’une image sur des serveurs distribués, l’utilisateur final reçoit une image de l’endroit le plus proche de lui. Cela réduit le temps de chargement et vous permet de redimensionner, compresser ou convertir dynamiquement les images en fonction du dispositif et de la taille d’écran de l’utilisateur final. En servant la version la plus optimisée d’une image, un CDN offre non seulement la meilleure expérience possible à l’utilisateur final, mais il minimise également l’impact courant que les temps de chargement des images ont sur un site web. En moyenne, les images représentent 21 % du poids total d’une page web, ce qui signifie qu’un chargement lent peut avoir un impact significatif sur les performances globales de votre site web. Optimiser la gestion et la distribution des images sur votre site ou votre application de sorte à en réduire la taille, à accélérer les temps de chargement et à réduire le nombre d’appels vers le serveur d’origine vous permet d’améliorer considérablement vos performances globales.

Prêt à commencer ?

Contactez-nous dès aujourd’hui