Dans le monde du SEO et de la création web en général, c’est un terme dont on entend presque tout le temps parler. Ah, les fameux Core Web Vitals…

Le genre de truc toujours à la mode depuis leur sortie officielle, en mai 2021. Du coup, si vous êtes dans la boucle, vous avez sûrement envie de savoir comment optimiser les Core Web Vitals sur votre site WordPress.

Un homme dit « Oh yeah ».
Oui, oui, oui, tout de suite !

Il faut dire qu’il serait vraiment dommage de passer à côté, vu les retombées positives que cela peut avoir sur l’expérience utilisateur et vos conversions

Après avoir lu cet article, vous serez incollable sur le sujet. Vous connaîtrez le fonctionnement et les bénéfices des Core Web Vitals.

Et vous disposerez de conseils pratiques, avec des recommandations d’outils, pour tester et améliorer les Core Web Vitals de votre site WordPress.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH
o2switch

Qu’est-ce que les Core Web Vitals ?

Les Core Web Vitals (signaux Web essentiels, en français) sont un ensemble de métriques proposées par Google, destinées à évaluer l’expérience utilisateur réelle vécue par un visiteur sur une page web.

Comme le précise Google, « ces signaux mesurent la manière dont les utilisateurs perçoivent leur interaction avec une page web ».

Pour mesurer l’expérience utilisateur (UX, User Experience), Google se base sur les performances de chargement d’une page web, son interactivité et sa stabilité visuelle.

Les Core Web Vitals font partie de la mise à jour de l’expérience sur la page (« Page Experience ») déployée au sein de l’algorithme de Google entre mai et août 2021.

Comme l’indique Google, les signaux Web essentiels sont pris en compte dans le classement d’une page dans les résultats de recherche depuis mai 2021, aux côtés d’indicateurs tels que : 

  • l’ergonomie mobile (contenu consultable facilement, quel que soit l’appareil utilisé : ordinateur de bureau, smartphone ou tablette) ; 
  • la sécurité HTTPS (Google a par la suite précisé que cet indicateur n’était plus utilisé comme un facteur de classement) ;
  • les consignes concernant les interstitiels intrusifs (ex : une fenêtre pop-up qui recouvre le contenu principal de la page). 
Critères Core Web Vitals sur WordPress.
Capture issue du blog Google Search Central.

Rendre « l’expérience la plus utile et la plus agréable possible »

La mise à jour « Page Experience », et les Core Web Vitals, s’inscrivent dans la volonté globale de Google de proposer à ses utilisateurs « l’expérience la plus utile et la plus agréable possible sur le web ».

En effet, selon Google, « l’optimisation de la qualité de l’expérience utilisateur est la clé du succès à long terme de tout site sur le web ».

Les Core Web Vitals ont été lancées pour relever ce défi. Pour cela, Google précise que les signaux Web essentiels doivent pouvoir être mesurés par n’importe quel propriétaire de site internet, quel que soit son niveau, et sans être un expert en performance web.

Preuve de l’importance que Google accorde à ces signaux, le moteur de recherche précise même qu’il prévoit de « tester un indicateur visuel mettant en évidence les pages les plus conviviales dans les résultats de recherche »

Au moment de rédiger ces lignes, sa mise en application pratique n’a pas encore eu lieu. Mais elle pourrait donc intervenir au cours des prochaines semaines/mois.

Quelles sont les métriques des Core Web Vitals ? 

Actuellement, Google prend en compte 3 métriques dans ses signaux Web essentiels. Ces métriques sont mesurées par des données utilisateur réelles et chacune d’entre elles « représente une facette distincte de l’expérience de l’utilisateur », dévoile Google. 

Pour bien comprendre leur mode de fonctionnement, décortiquons-les une par une. 

Le Largest Contentful Paint (LCP)

La première métrique des Core Web Vitals s’appelle le Largest Contentful Paint (LCP). Elle mesure les performances de chargement d’une page.

Plus spécifiquement, le LCP évalue le temps d’affichage du plus grand élément visible de votre page dans la fenêtre de votre navigateur (viewport), à partir du moment où la page commence à se charger.

Le Largest Contentful Paint est évalué dans les Core Web Vitals sur WordPress.

Cela peut par exemple concerner une image d’arrière-plan, une vidéo ou un gros bloc de texte contenu dans la partie haute de votre page d’accueil, sous votre de navigation.

Pour offrir une expérience utilisateur de qualité, Google préconise un temps de chargement de moins de 2,5 secondes

Afin de guider l’utilisateur – on y reviendra -, il propose 3 types de plages de performance, avec à chaque fois un code couleur associé proposé par ses différents outils de mesure officiels : 

  • Bon : temps de chargement inférieur à 2,5 secondes (couleur verte) ; 
  • Amélioration nécessaire : temps de chargement inférieur ou égal à 4 secondes (couleur orange) ; 
  • Médiocre : temps de chargement supérieur à 4 secondes (couleur rouge).

Le First Input Delay (FID)

Après le LCP, place au First Input Delay (FID). Google explique que cette métrique mesure l’interactivité.

Le FID représente le délai entre le moment où un internaute interagit pour la première fois avec votre page (moment où il clique sur un lien, appuie sur un bouton ou autre) et le moment où le navigateur répond à cette interaction, quel que soit l’élément interactif sur lequel il a cliqué en premier.

Le First Input Delay est un Core Web Vital.

Voici les seuils fixés par Google pour cette métrique : 

  • Bon : FID inférieur à 100 millisecondes (ms) ; 
  • Amélioration nécessaire : FID inférieur ou égal à 300 ms ;
  • Médiocre : FID supérieur à 300 ms. 

Google indique que l’Interaction to Next Paint (INP) remplacera le FID en tant que signal Web essentiel à partir de mars 2024. À ce propos, si vous avez déjà reçu un mail de Google vous indiquant un problème lié à l’INP, pas de panique ! Vous avez encore du temps pour améliorer ce signal, si vous le souhaitez, comme l’explique cet article.

Le Cumulative Layout Shift (CLS)

Enfin, place à la troisième et dernière métrique : le Cumulative Layout Shift (CLS), qui mesure la stabilité visuelle.

Le CLS évalue chaque décalage inattendu au niveau de votre mise en page, par exemple lorsqu’un élément visible change subitement de position lors du chargement de la page.

Google détaille la chose suivante : « La métrique CLS calcule la somme totale des scores pour chaque décalage de mise en page inattendu survenu pendant toute la durée de vie de la page. »

La métrique CLS fait partie des Core Web Vitals sur WordPress.

Dans la pratique, le CLS cible différents types d’événements

  • vous lisez un article et, subitement, le texte change de position ou disparaît à l’écran ; 
  • vous désirez cliquer sur un lien ou un bouton et au moment de passer à l’action, ce lien ou ce bouton se déplace, ce qui fait que vous cliquez sur autre chose.
Un exemple d'élément ciblé par le CLS sur WordPress.

Voici les seuils fixés par Google pour cette métrique : 

  • Bon : CLS inférieur ou égal à 0,1 ; 
  • Amélioration nécessaire : CLS inférieur ou égal à 0,25 ;
  • Médiocre : CLS supérieur à 0,25.

Le score CLS est compris entre zéro et un nombre positif. Zéro signifie qu’il n’y a pas de décalage et plus le chiffre est élevé, plus la mise en page est décalée.

Voilà pour la présentation générale des signaux Web essentiels. Voyez maintenant pour quelles raisons vous devez soigner les Core Web Vitals sur votre site WordPress. 

Pourquoi optimiser les Signaux web essentiels ?

Booster l’expérience utilisateur et les conversions

De façon globale, comme vous l’avez lu auparavant, les signaux Web essentiels ont pour objectif d’optimiser la qualité de l’expérience utilisateur. 

Et si l’on schématise, plus l’expérience utilisateur que vous proposerez à vos visiteurs sera agréable, plus vous aurez de chances de favoriser l’engagement et les conversions.

Une conversion est une action que vous souhaitez que vos utilisateurs accomplissent. Cela peut être l’achat d’un produit sur votre boutique WooCommerce, l’inscription à une newsletter, le téléchargement d’un livre blanc, le remplissage d’un formulaire, etc. 

Selon des études relayées par Google, l’optimisation des Core Web Vitals permet d’améliorer certaines métriques métier : 

Une femme dit « Amazing ».

Prendre soin du SEO

Optimiser les Core Web Vitals de votre site WordPress est aussi important pour votre référencement naturel

En effet, les signaux Web essentiels font partie de l’un des nombreux facteurs pris en compte par Google pour positionner une page dans ses résultats de recherche (le moteur de recherche utilise environ 200 facteurs dans son algorithme).

Cependant, attention. Les Core Web Vitals sont loin d’être le facteur le plus important aux yeux de Google, qui précise plusieurs choses à ce sujet

  • de bonnes métriques dans le rapport Signaux Web essentiels « ne sont pas synonymes de bon classement ». Cela veut dire que si vous ne soignez pas d’autres signaux qui coïncident avec l’expérience globale sur la page (ex : ergonomie mobile), l’impact de vos efforts sur l’optimisation des Core Web Vitals n’aura aucune plus-value ; 
  • « la recherche Google s’efforce de toujours afficher le contenu le plus pertinent, même si l’expérience sur la page est décevante ».

Pour autant, n’ignorez surtout pas les Core Web Vitals sur votre site Google ! Déjà, donc, pour l’expérience utilisateur et l’impact positif qu’ils peuvent avoir sur les conversions.

Ensuite, parce que cela peut aussi être un critère sur lequel s’appuie Google pour départager des pages dont le contenu est jugé utile (à « qualité égale », le moteur de recherche peut mieux positionner une page optimisée pour les signaux Web essentiels).

Voici d’ailleurs la position officielle de Google sur le sujet : « Pour de nombreuses requêtes, il existe de nombreux contenus utiles. Dans ce cas, offrir une bonne expérience sur la page peut contribuer à votre réussite dans la recherche Google. »

Quoi qu’il en soit, en matière de SEO, mettez le paquet sur la qualité de votre contenu (qui doit être utile pour votre cible) et les backlinks (liens entrants). 

Pour générer ses résultats de recherche, Google se base sur les principaux facteurs ci-dessous

  • le sens de la requête de l’internaute (l’intention de recherche) ; 
  • la pertinence du contenu par rapport à la recherche
  • la qualité du contenu (expertise, fiabilité, caractère officiel des infos partagées, etc.) ; 
  • sa facilité d’utilisation (ergonomie mobile, vitesse de chargement, etc.). 

C’est tout bon pour vous ? Alors je vous propose tout de suite de laisser la théorie pour passer à la pratique. Votre site WordPress est-il optimisé pour les Core Web Vitals ? Pour le savoir, lisez la partie suivante.

Devenez enfin visible grâce au SEO

Optimisez le référencement de votre site WordPress, obtenez du trafic et augmentez votre chiffre d’affaire grâce à la pédagogie de WPMarmite.

Comment tester et mesurer les Core Web Vitals sur WordPress ?

Les signaux Web essentiels étant une initiative menée par Google, il est possible de mesurer les Core Web Vitals sur WordPress grâce à différents outils maison proposés par le moteur de recherche : 

Google propose différents outils pour mesurer les Core Web Vitals sur WordPress.

Comme l’explique Google, vous n’avez pas besoin d’utiliser tous ces outils à la fois. Servez-vous seulement de ceux qui vous semblent les plus efficaces pour optimiser vos signaux Web essentiels.

En fonction de votre niveau technique et de vos besoins, certains risquent d’être inappropriés.

Par exemple, Lighthouse est surtout utile pour découvrir des axes d’amélioration de la performance lors du développement d’un site en local ou dans un environnement de staging.

L’extension Chrome Dev Tools sera trop complexe à utiliser pour un public débutant, voire intermédiaire.

Pour commencer, vous pouvez vous baser sur deux outils en priorité :

  • la Google Search Console vous permettra d’abord d’identifier les pages qui nécessitent d’être améliorées ; 
  • une fois les pages problématiques identifiées, PageSpeed Insights vous indiquera les points bloquants techniques, avec un score global sur ordinateur de bureau et mobile. L’outil vous proposera des recommandations pour améliorer votre score global. 

Voyez maintenant comment vous servir de ces deux outils incontournables.

Comment mesurer les Core Web Vitals de son site WordPress avec la Google Search Console ?

La Google Search Console est un outil gratuit qui permet de mieux gérer votre site et de suivre votre référencement en fournissant tout un tas d’informations : 

  • erreurs sur votre site ; 
  • analyse de la recherche ; 
  • liens ;
  • état de l’indexation ;
  • erreurs d’exploration, etc.

Pour en profiter, vous devez disposer d’un compte Google et la relier à votre site WordPress. Si vous ne l’avez pas encore fait, servez-vous de ce tutoriel vidéo que vous propose Alex :

Une fois connecté à votre compte Search Console, allez dans le menu Expérience > Signaux Web essentiels :

Menu Signaux web essentiels sur la Google Search Console.

Si des données sont disponibles, vous aurez un aperçu présenté sous la forme d’un graphique, à la fois pour la version mobile et ordinateur de bureau de votre site WordPress.

Cliquez sur le lien « Ouvrir le rapport » pour découvrir la performance de vos URLs :

Création d'un rapport Core Web Vitals sur la Google Search Console.

Vous disposerez d’un panorama qui comprendra des groupes d’URLs problématiques en fonction de leur statut (Bon, Amélioration nécessaire, Lentes), ou encore du type de métrique (LCP, FCP et CLS).

En cliquant sur le groupe d’URLs qui vous intéresse, vous accéderez au détail de chaque URL concernée :

La Google Search Console permet de voir les URLs problématiques sur un site WordPress.

Dès que vous trouvez une URL problématique (priorisez les pages lentes et les pages les plus importantes pour votre business), vous pouvez obtenir des suggestions d’améliorations à l’aide de PageSpeed Insights. 

Comment mesurer les Core Web Vitals de son site WordPress avec PageSpeed Insights ?

PageSpeed Insights est aussi un outil gratuit proposé par Google. Sa finalité est de vous aider à améliorer la vitesse de chargement de vos pages sur tous les appareils. 

Vous pouvez y accéder de deux façons :

  • directement depuis votre interface Google Search Console, cliquez sur l’URL qui vous intéresse, puis sur « Ressources pour les développeurs » ;
Vous pouvez accéder à PageSpeed Insights depuis la Google Sarch Console.

Une fois sur l’interface de PageSpeed Insights, saissisez l’URL de la page web de votre choix dans le champ de recherche, puis cliquez sur le bouton « Analyser » :

PageSpeed Insights permet d'analyser les Core Web Vitals.

Vous obtiendrez alors un rapport concernant l’évaluation des signaux Web essentiels à la fois sur mobile et ordinateur de bureau (les résultats peuvent donc être différents en fonction de l’appareil) :

Un exemple de rapport généré par PageSpeed Insights.

Vous disposerez ensuite d’un score global sur 100 dans 4 grands domaines

  • Performances ; 
  • Accessibilité ; 
  • Bonnes pratiques ; 
  • SEO.

Enfin, si vous scrollez un peu dans la page, vous découvrirez des opportunités d’amélioration, avec la possibilité de trier par type de métrique (FCP, LCP, TBT, CLS). 

Notez que PageSpeed Insights vous suggère aussi des améliorations FCP (First Contentful Paint). Ces dernières ne sont pas prises en compte dans les Core Web Vitals, mais il est important de les optimiser pour la vitesse de chargement de vos pages et l’expérience utilisateur.

Cliquez simplement sur le petit onglet pour découvrir le problème détecté par PageSpeed Insights, et surtout comment le résoudre.

Recommandations pour améliorer les Core Web Vitals de WordPress sur PageSpeed Insights.

Grâce à la Google Search Console et à PageSpeed Insights, vous avez de quoi détecter et corriger les problèmes liés au chargement, à l’interactivité et à la stabilité visuelle des pages de votre site WordPress. 

Afin d’optimiser vos chances d’obtenir un score qui se rapproche des 100/100, découvrez maintenant nos conseils pour optimiser les Core Web Vitals de votre installation WordPress.

Devenez enfin visible grâce au SEO

Optimisez le référencement de votre site WordPress, obtenez du trafic et augmentez votre chiffre d’affaire grâce à la pédagogie de WPMarmite.

5 conseils pour optimiser un site WordPress pour les Core Web Vitals

Améliorez vos performances serveur

Pour commencer, traitez à la racine – si besoin – l’une des causes majeures d’un mauvais score Largest Contentful Paint (LCP) : un serveur lent.

Comprenez un serveur qui met trop de temps à répondre à une requête effectuée par votre navigateur web.

Pour optimiser cet aspect-là, vous disposez de plusieurs solutions : 

  • choisissez un hébergement performant, à l’image d’o2switch (lien aff), l’hébergeur qu’utilise et recommande WPMarmite ;
  • mettez en cache vos pages à l’aide d’une extension premium comme WP Rocket (lien aff), qui s’en occupe automatiquement pour vous. Au passage, WP Rocket optimisera aussi le cache de votre navigateur tout seul, comme un grand ;
  • activez la compression GZIP (ou Brotli). Votre hébergeur peut l’avoir déjà activée pour vous. Rapprochez-vous de lui pour en savoir plus. Sinon, WP Rocket s’en charge aussi automatiquement.  

Si vous recherchez un équivalent gratuit à WP Rocket, tournez-vous vers WP Fastest Cache

Apprenez à vider le cache de WordPress dans notre tutoriel.

En parallèle, un réseau trop lent peut aussi impacter négativement votre score LCP, y compris si votre serveur est déjà correctement optimisé.

Cela peut être le cas si vous avez une audience internationale. Si votre serveur d’hébergement est basé en France mais que la majorité de vos visiteurs consultent votre site depuis l’Australie, le temps de chargement de la page pourrait ralentir.

Une parade consiste à utiliser un Content Delivery Network (CDN). Cependant, partez sur cette option uniquement si vous avez un site d’envergure avec beaucoup de contenu et que votre cible est à l’international. 

Si vous débutez, ne vous embêtez pas avec ça. Alex fait le point sur l’utilisation (ou non) d’un CDN dans cette vidéo, si cela vous intéresse :

Optimisez vos images

Continuons à parler du LCP avec un autre élément qui peut impacter (très) négativement son score : vos images. 

En effet, bien souvent, c’est une image qui constitue le plus grand élément visible d’une page web, au début de son chargement (en particulier sur une page d’accueil).

Une seule image peut représenter jusqu’à 50 % du temps de chargement d’une page ! Il est donc nécessaire d’optimiser vos images.

Compressez vos images

Pour cela, vous pouvez d’abord les compresser à l’aide d’un plugin freemium comme Imagify (lien aff).

Ce dernier va vous aider à réduire leur poids, sans perte de qualité. Il dispose aussi d’une option pour automatiser la compression de vos images en masse, ce qui est pratique si vous avez de nombreux médias. 

Découvrez notre guide pratique pour configurer et utiliser Imagify comme un pro.

Il est aussi possible de vous servir d’un outil en ligne comme : 

Par contre, avec eux, vous devrez procéder au cas par cas et ne pourrez pas réaliser vos ajustements depuis l’interface de WordPress.

Un homme fait OK avec sa main.

Adoptez le format WebP

Le WebP est un format d’image matricielle proposé par Google qui permet de compresser encore plus les images qu’en JPG ou PNG, sans perte de qualité.

Selon Google, les images WebP sont 25 % à 34 % plus légères que celles en JPG, ce qui n’est pas négligeable au moment d’optimiser vos Core Web Vitals sur WordPress.

Depuis la sortie de sa version 5.8, en juillet 2021, WordPress prend en charge le format WebP, mais vous devez d’abord télécharger et mettre en ligne vos images dans ce format.

Grâce à un plugin dédié, vous pouvez convertir toutes les images de votre Médiathèque au format WebP. Pour cela, servez-vous soit d’Imagify ou de Converter for Media.

Bannière de Converter for Media – Optimize images | Convert WebP & AVIF

Optimisez le code de votre site WordPress

Dans un troisième temps, attelez-vous à « nettoyer » le code qui va s’afficher en front-end (l’interface visible par vos visiteurs), car il peut avoir tendance à être surchargé par des éléments qui ralentissent la vitesse de chargement.

Par exemple, un mauvais score FID peut être causé par un fichier JavaScript que votre navigateur aurait du mal à exécuter.

De façon globale, il est important d’optimiser votre code (HTML, CSS et JavaScript). Pour cela, vous pouvez : 

  • minifier les fichiers CSS et JavaScript ;
  • supprimer les ressources CSS inutilisées
  • charger le JavaScript en différé, pour éliminer les ressources qui bloquent le rendu de votre page ;
  • reporter l’exécution du JavaScript en retardant le chargement des fichiers JavaScript jusqu’à l’interaction avec l’utilisateur.

Ces réglages peuvent être directement effectués via le menu « Optimisation des fichiers » de WP Rocket :

WP Rocket permet d'optimiser les Core Web Vitals sur WordPress.

Si vous préférez un outil gratuit, voici quelques options à envisager : 

Améliorez la performance globale de votre site

En appliquant les conseils ci-dessus, vous devriez déjà améliorer les Core Web Vitals de votre site WordPress. 

En parallèle, pensez à appliquer les bonnes pratiques suivantes, afin de prendre soin de la vitesse de chargement de vos pages et de l’expérience utilisateur : 

Testez régulièrement les Core Web Vitals de votre site WordPress

Pour terminer, pensez à procéder à des tests réguliers des Core Web Vitals de votre site WordPress. 

Même si votre score est bon à un moment donné, il peut évoluer au fil du temps suite à l’ajout de nouveaux plugins ou fonctionnalités sur votre site.

Planifiez des points d’étape dès que vous opérez un ou des changements majeurs sur vos pages. Comme ça, vous serez en mesure de rectifier au plus vite si des blocages majeurs se présentent.

Il serait dommage d’impacter négativement l’expérience utilisateur et vos actions SEO après tant de bon boulot, vous ne trouvez pas ?

Et si vous souhaitez creuser le sujet des Core Web Vitals sur WordPress et découvrir des astuces supplémentaires, consultez l’excellent e-book gratuit sur le sujet de WP Rocket (en anglais). 

Grâce à l’outil de maintenance WP Umbrella (lien aff), vous pouvez aussi avoir un aperçu en temps réel des métriques Core Web Vitals de votre site WordPress. Au passage, depuis l’interface de l’outil, vous pouvez réaliser les mises à jour et sauvegardes de vos différents sites à partir d’un seul et même tableau de bord.

WP Umbrella : L’outil incontournable pour gérer vos sites WordPress

Mettez à jour vos thèmes et extensions, monitorez et sauvegardez vos sites WordPress à partir d’un tableau de bord unique. 

Je mets mes sites à l’abri
wp umbrella

Conclusion 

L’optimisation de votre site WordPress pour les Core Web Vitals est essentielle pour prendre soin de l’expérience utilisateur de vos visiteurs. 

Grâce à un bon score aux métriques des signaux Web essentiels, vous renforcez vos chances d’améliorer vos conversions et limitez l’impact négatif que peut avoir un site lent à se charger (augmentation du taux de rebond, baisse de trafic, etc.).

Grâce à nos conseils (optimisation des images, du code, du serveur, etc.), vous disposez de différents leviers à activer pour améliorer votre score Core Web Vitals chez vous. 

Est-ce un aspect sur lequel vous avez déjà commencé à travailler ? Si oui, avez-vous des astuces supplémentaires à nous partager, ainsi qu’aux lecteurs de WPMarmite ?

Partagez-nous votre retour d’expérience dans la zone de commentaires située juste en dessous.