Google PageSpeed Insights : Améliorer et comprendre sa note de Core Web Vitals 

Avr 30, 2021 | 0 commentaires

Illustration des Core Web Vitals

Pour commencer, que sont les Core Web Vitals ? C’est une note sur 3 critères que vous attribue Google avec par exemple l’outil Google PageSpeed Insights. La note donnée est une note de Core Web Vitals uniquement. Même si elle influe plus ou moins sur votre vitesse de chargement, elle n’est pas entièrement dédiée à la vitesse : votre site pourrait s’afficher en moins d’une seconde mais pourrait avoir une note catastrophique comme 10.

Prenons la recommandation de supprimer le JavaScript bloquant le rendu que l’on verra juste en-dessous. Si vous réglez ce problème, votre score s’améliorera grandement. Cependant, si vous mesurez votre temps de chargement avec Pingdom, vous ne constaterez pas une grande amélioration. Cela est encore plus concret si vous réduisez votre CLS, vous pourriez augmenter votre note de +5 mais ne constater absolument aucun temps de chargement réduit.
Ce n’est pas noir ou blanc, si votre score passe de 10 à 90, votre temps de chargement s’améliora, disons qu’il passera de 2,5 s à 1,9 s par exemple.
Ce n’est pas non plus linéaire, si votre score Google passe de 80 à 90, il est possible que vous ne constatiez aucune amélioration de vitesse de chargement.

C’est parce que le score de Google PageSpeed est principalement une note d’expérience utilisateur globale selon Google. D’ailleurs le temps de chargement est au moins aussi impactant en terme d’expérience utilisateur. Vous ne devriez donc pas négliger votre temps de chargement, vous risqueriez de perdre des utilisateurs et d’importantes conversions.

Vous devez tout de même améliorez vos Core Web Vitals pour optimiser davantage votre expérience utilisateur et la vitesse de chargement. De plus améliorer ces métriques améliore votre SEO, critère de référencement à partir de mai 2021. Vous pouvez en savoir plus en consultant notre Guide complet pour optimiser son SEO.

Petite précision pour la suite : la note de Google PageSpeed est en partie une note d’UX (expérience utilisateur), certes, mais Google a récemment partagé qu’ils commenceront à utiliser « l'expérience de page » dans leurs systèmes de classement à partir de la mi-juin 2021. Cependant je viens de dire que les Core Web Vitals étaient liés à l’expérience utilisateur, alors quelle différence ?
Les Core Web Vitals et « l’expérience de page » sont des critères de référencement plus ou moins liés. L’expérience de page regroupe en partie les Core Web Vitals, le responsive, https et la sécurité.

Vue de la Google Search Console sur l'expérience de page

À noter que ces critères, que ce soit l’expérience de page ou les Core Web Vitals seront ajoutés et revus au fur et à mesure, de quoi ne pas s’attendre à un changement immédiat en terme de SEO.

Comprendre les métriques de Google PageSpeed Insights

Après une analyse sur leur outil Google PageSpeed, vous retrouverez juste en-dessous votre note sur six critères.
Les Core Web Vitals sont ces trois critères :

  • LCP → La statistique "Largest Contentful Paint" indique le temps nécessaire au texte le plus long ou à l'image la plus grande pour s’afficher.
  • FID → Le moment à partir duquel vous pourrez interagir avec les éléments de la page (par exemple un bouton)
  • CLS → Cumulative Layout Shift mesure le mouvement des éléments visibles dans la fenêtre d'affichage. Exemple : "J'étais sur le point de cliquer dessus! Pourquoi a-t-il bougé?"
Vue des 3 notes de Core Web Vitals

Il y a six facteurs qui changent votre note Google PageSpeed mais seulement trois font partie des Core Web Vitals. Oui c’est flou, et vous avez certainement lu auparavant que vous deviez uniquement améliorer ces trois facteurs. Google est clair à ce sujet : « Le classement de l'expérience de page de Google évalue chacun des Core Web Vitals individuellement comme un signal de classement. » Tout en sachant que les « autres Core Web Vitals », pourraient entraîner un classement différent.
Vous l’aurez compris, dans l’idéal vous devez améliorer toutes les métriques de Google PageSpeed.

La note est donc importante à corriger, mais vous ne devez pas vous fier à cette note pour la vitesse de chargement réel.

Lightouse Scoring Calculator pour comprendre comment fonctionne la note de Google PageSpeed

Lighthouse, le service de mesure de l’analyse de Google PageSpeed vous explique désormais comment est mesurée votre note :

Lightouse indique comment le score est calculé par leurs outils comme Google Page Speed Insights

Vous pouvez visiter leur page dédiée ici : Lightouse scoring calculator.

Vous pouvez vous apercevoir qu’étonnamment le CLS n’est pas très important pour votre note, en baissant au maximum celle ci vous obtenez 95 :

Image montrant la baisse du CLS sur l'outil de mesure de la note de Lightouse, outil de calcul de Google Page Speed

Cependant comme vu mentionné au début, il prend très au sérieux le « Total Blocking Time » :

Image montrant la baisse du Total Blocking Time sur l'outil de mesure de la note de Lightouse, outil de calcul de Google Page Speed

Cela pourrait-il vous permettre de revoir vos priorités ? En tout cas je vous conseille de ne délaisser aucune métrique.

Les données de terrain et les données de laboratoire

Mais surtout, faite confiance à la Google Search Console, tous les outils vous donnent des données dîtes de «laboratoire» mais ne sont pas représentatifs de la réalité. Par exemple, GPSI n'analysera pas votre site par rapport au pays auxquels vous recevez du trafic (ce qui influe beaucoup). La Google Search Console elle, récoltes des données dîtes «sur le terrain», c'est donc ses données qui doivent être le plus considérées et priorisées. Elle permet également de prioriser vos tâches puisque la console vous informent de toutes les pages présentant des problèmes, ce qui vous évite de tester toutes vos pages une par une. La console permet également d'avoir le nom de la métrique qui pose problème en fonction de la page (FID ou CLS ou les deux etc.).

Prioriser ses tâches Core Web Vitals avec la Google Search Console et ses données de terrain

 

Maintenant, ce qui vous intéresse probablement le plus : concentrons-nous sur l’amélioration de vos Core Web Vitals !

Voici une liste qui vous aidera à améliorer vos métriques. Cette liste optimisera directement ou indirectement vos Core Web Vitals : FCP & TTI & SI & TBT & LCP, c’est à dire « tous » sauf le CLS.

0. Analyser les Core Web Vitals avec les bons outils

Google Search Console.
Google Page Speed Insights.

Web Page Test : Indispensable pour comprendre quels éléments consommes le plus sur vos pages. Si vos images consommes 50% de votre page c'est que vous devez appliquer des modifications à cette page (ici enlever des images). Vous augmenterez alors la note Google Page Speed indirectement (FCP & TTI & SI & LCP).

Utilisez Google Chrome pour comprendre vos CWV : Clique droit → Inspecter → Performance → Click the reload button.

Lancer l'analyse de Google Chrome pour analyser, comprendre et améliorer ses Core Web Vitals
Utiliser l'analyse de Google Chrome pour analyser, comprendre et améliorer ses Core Web Vitals

Vous avez également accès à lightouse depuis l'interface et donc la possibilité de générer un rapport GPSI.

1. Optimiser coté hébergement

  1. Cache directement coté serveur
  2. NGINX & Expires headers
  3. Serveur cloud
  4. DNS premium

2. Utiliser ces techniques d’optimisations

  1. Mise en cache
  2. Compression GZIP
  3. Préchargement du cache, des liens, requêtes DNS et des polices
  4. Minifier les fichiers CSS & JS & HTML
  5. Combiner les fichiers CSS et JavaScript
  6. Éliminer les ressources bloquant le rendu (CSS & JS)
  7. Reporter l’exécution JavaScript
  8. Optimiser ses polices
  9. Mise en place d’un CDN

3. Optimiser ses images, vidéos et iFrames

  1. Optimiser le poids de vos images en les compressant.
  2. N’utilisez pas des images trop grandes si cela n’apporte aucun intérêt, si vous téléversez une image en 3000x3000 mais que vous l’affichez en 800x800 en CSS, téléversez-la directement en 800x800.
  3. Diffusez vos images en format .webp, format d’image adapté au Web. Vous pourriez peut-être aussi utiliser le format .svg pour vos images.
  4. Utilisez les bons formats vidéo : Lottie et/ou WebM sont idéaux pour diffuser vos vidéos.
  5. Utilisez un CDN pour servir vos images, vidéos, polices et autres
  6. Différez le chargement de vos images, vidéos et iFrames avec LazyLoad

(4. Si vous utilisez WordPress)

  1. Trier et supprimer vos plugins
  2. Désactiver des plugins spécifiques pour certaines pages
  3. Utiliser un thème WordPress léger comme GeneratePress
  4. Nettoyer les contenus, les commentaires, les transients de la base de données
  5. Désactiver Heartbeat et/ou Fréquence de Heartbeat
  6. Désactiver les polices Google
  7. Désactiver les commentaires
  8. Intervalle d'enregistrement automatique
  9. Désactiver les scripts
  10. Désactiver la fragmentation du panier
  11. Désactiver la boîte méta de statut
  12. Désactiver les widgets
  13. Désactiver Google Maps
  14. Désactiver les émojis
  15. Désactiver les Embeds
  16. Désactiver le XML-RPC
  17. Supprimer jQuery Migrate

5. Réduire le CLS (cumulative layout shift)

En revanche, comme vu précédemment, cette liste n’améliorera pas votre CLS. Voyons en détail comment résoudre spécifiquement cette métrique.
Pour améliorer le CLS, soyez sûr de comprendre ce à quoi cela correspond. Le CLS c’est tout simplement un élément « perturbateur » par exemple un texte qui se décale, une publicité qui décale le texte, une pop-up beaucoup trop intrusive etc.

Google PageSpeed, vous donnera en majorité les problèmes liés à ce dernier comme la section «  Les éléments d'image ne possèdent pas de width ni de height explicites »

Vue d'une des métriques que propre Google Page speed pour corriger le CLS

Cependant je vous conseille vivement d'utiliser le navigateur Google Chrome qui dispose d'outils développeur incroyable. Pour le CLS, activez "screenshots" puis déplacez-vous en survolant avec votre souris pour voir frame par frame ce qu'il ce passe réellement en image, vous constatrez alors vous même les décalages. En sélectionnant un bloc CLS, vous aurez également le nom de l'élément dérangeant (div, class ...) et des ressources supplémentaires dans "Summary" comme la note total de CLS pour cet élément, comment il ce déplace, etc.

Comprendre le CLS en utilisant Google Chrome permettant d'analyser et de comprendre le décalage

Voyons maintenant ce qui pourrait être les causes générales de CLS et comment les améliorer :

1. Définir une taille exacte aux images, vidéos, iFrames, etc.

Par exemple, la plupart des thèmes WordPress, n’allouent pas une place définie pour vos images et utilisent ce CSS :

votre-image {
width: 100%;
height: auto;
}

Au lieu de la « méthode classique » :
<img src=“votre-image.webp“ width=“800“ height=“400“ alt=“integrer le format webp“>

Vous devez donc donner une valeur explicite afin que vos images, iFrames, vidéos et autres soient correctement définis et qu’aucun élément ne se décale. Sinon ces éléments vont se charger et s’organiser en fonction de leur apparition à l'écran, ce qui est, disons le, terrible.

Pour pallier à ce problème vous pouvez également définir un ratio afin que l’image charge au tout début du calcul :

votre-image {
aspect-ratio: attr(width) / attr(height);
}

2. Les contenus dynamiques externes

Comme vous vous en doutez sûrement, les publicités sont des facteurs importants de décalage et de CLS élevé.
Pour régler ce problème, comme évoqué à l’instant, vous devez leur allouer un espace dédié. Et ça dans tous les cas, qu’elles s’affichent ou non, vous devez leur réserver un espace statique. Par exemple si l’utilisateur utilise Adblock (un bloqueur de publicité), vos éléments pourraient se décaler car la publicité ne s’afficherait pas, mais il peut y avoir aussi d’autres causes.

Vous devriez également vérifier comment vous faites apparaître l’inscription à votre newsletter et toute forme de pop-up, module de RGPD, etc.

3. Les polices

Vous devez vérifier ces éléments :

  • Votre police est remplacée par votre police de secours (« FOUT » : texte sans style)
  • La police rencontre un problème et est invisible jusqu’à sa résolution

Pour pallier à ces problèmes vous pouvez utiliser ces méthodes :

  • Afficher ses polices en utilisant optional : font-display : optional
  • Pré-charger ses polices : <link rel="preload">

4. Les animations

Certaines animations ne sont plus recommandées et pourraient créer des décalages de mise en page. Par exemple il vaut mieux utiliser transform ou opacity plutôt que box-shadow ou box-sizing.

Vous pouvez consulter ces page web pour avoir plus d’informations : Tutorials Speed High Performance Animations et CSS Triggers.

Si vous avez besoin d’aide n’hésitez pas à nous contacter !

Résumé des core web vitals & Google page speed

J’espère que ce guide vous aura aidé à y voir plus clair au sujet des Core Web Vitals et vous aura aidé à améliorer votre note Google Page Speed Insights !

Ne cherchez pas le score 100, ça ne sert à rien et c’est pratiquement impossible d’autant plus qu’avec les changements d’algorithme vous pourriez être déçu. Une note en vert comme 90 est suffisante.

N’hésitez pas à raconter votre expérience dans les commentaires et nous dire comment cet article vous a aidé et s’il vous a appris des choses !

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *