Comment améliorer vos scores Google Core Web Vitals?

(23 août 2020)

Prochaine ère sur les performances des pages Web

Cela fait quelques mois que je travaille sur les stratégies pour améliorer les performances des pages Web sur les sites Web de mon entreprise et pour être honnête, cest un travail vraiment intéressant à partager avec vous.

Je comprends que travailler sur les performances des pages Web nest pas une nouveauté chose et les gens ont proposé de nombreuses idées et astuces pour augmenter la vitesse de chargement de votre page. Mais maintenant, il semble que ce nest plus suffisant et que vous devez passer au niveau suivant !!

Comme vous devriez connaître limportance du référencement (Search Engine Optimization) et faire ressortir les résultats de votre page Web non seulement sur la première page des résultats Google, mais en haut de la même première page, cest vraiment une bonne affaire! Bref, laissez-moi vous garantir que, par la suite, les Google Core Web Vitals seront lun de ces plus gros contributeurs au classement SEO des résultats de recherche Google.

Short & Explication simple sur Google Core Web Vitals

Core Web Vitals, introduit au premier trimestre de cette année, est un ensemble de mesures liées à la vitesse, à la réactivité et à la stabilité visuelle de votre page Web.

Google les a définis comme les éléments essentiels du Web:

  • La plus grande peinture de contenu : temps nécessaire au chargement du contenu principal dune page. Une mesure LCP idéale est 2,5 secondes ou plus rapide.
  • Premier délai dentrée : Le temps nécessaire à une page pour devenir interactive. Une mesure idéale est inférieure à 100 ms .
  • Décalage cumulatif de la mise en page : la quantité de décalage de mise en page inattendu du contenu visuel de la page. Une mesure idéale est inférieure à 0,1 .

Cet ensemble de métriques a été conçu pour aider les propriétaires de sites à mesurer lexpérience utilisateur quils offrent en matière de chargement, dinteractivité et de stabilité visuelle.

Dans lensemble, les performances de votre page seront classées ci-dessous.

Liste complète des métriques prises en compte pour les métriques de performances des pages.

La section suivante traite essentiellement des idées ou des méthodes pour améliorer les performances de chargement de votre page et les scores CWV.

Conseils pour améliorer vos scores Core Web Vitals

Voici quelques méthodes cela ma aidé à améliorer considérablement mes scores Core Web Vitals ainsi que les performances globales de la page.

  1. Utiliser efficacement le cache du navigateur et du CDN (améliore FID et LCP)
    Ceci est une approche très simple ch pour améliorer vos scores FID et LCP. Assurez-vous que vos actifs statiques sont servis à partir dun CDN (sil sagit dAWS, vous pouvez le mettre en cache dans Cloudfront). Ainsi, cela se traduit par une entrée rapide des ressources dans vos navigateurs. Pour améliorer le deuxième chargement de temps, assurez-vous que les actifs qui ont atteint le côté client sont mis en cache dans votre navigateur.
    cache-control: max-age=120 – signifie que la ressource renvoyée est valide pour 120 secondes, après quoi le navigateur doit demander une version plus récente.
    Vous pouvez également mettre en cache vos pages dynamiques également dans votre CDN avec la valeur TTL appropriée en fonction du comportement de votre application.
  2. Définissez des attributs de taille ou des dimensions exactes pour vos médias et vos annonces (améliore CLS)
    Cest quelque chose de très important pour améliorer vos scores CLS. Assurez-vous que vous avez défini un height:XXpx; width: YYpx approprié sur votre image ou sur nimporte quelle balise multimédia. Encore une fois, cela est très important au moins pour les composants qui sont au-dessus du pli. Un raccourci pour cela est que si vous manquez didées pour obtenir la hauteur exacte de limage, vous pouvez définir comme height:auto; ce qui ma vraiment aidé. Outre les médias, si votre site affiche des publicités, assurez-vous davoir défini des espaces publicitaires appropriés avec des dimensions appropriées, car pousser vers le haut ou vers le bas les composants de la page fera certainement baisser votre score CLS. Gardez donc également un œil sur les publicités!
  3. Chargement différé des images à bonne résolution en fonction du type dappareil (améliore le LCP)
    Cest vraiment une victoire rapide pour vous! Il existe de nombreux packages de chargement paresseux dans le monde que vous pouvez utiliser dans votre page Web pour charger paresseusement toutes les images de votre page.Cela réduira le poids global de la page et le temps de chargement pour le rendu de votre page dans le navigateur. Un autre élément important est que, prédéfinissez la résolution de limage que vous souhaitez charger en fonction du type dappareil. Vous ne devriez pas charger les mêmes images de résolution dans différents types dappareils.
  4. Utilisez efficacement SSR et CSR dans votre page Web (améliorez le FID & LCP)
    Vous devez savoir que Google promeut et encourage les pages Server Side Rendered (SSR) pour obtenir de bonnes valeurs de référencement. Mais idéalement, cest un compromis avec les performances de chargement de page SEO vs. Si votre page est trop grande en termes de contenu et si vous décidez dafficher la page entière sur le serveur, il faudra certainement plus de temps pour charger la page entière ainsi que la page Le poids sera également élevé. En bref, ma recommandation est quil est préférable de faire le rendu SSR pour les composants de votre page qui apparaissent au-dessus du pli et de rendre le reste des composants du côté client qui apparaît sous le pli. De cette façon, lutilisateur charge la page au-dessus du pli et le reste de la page est rendu de manière asynchrone sans entraver lexpérience utilisateur.
  5. Utiliser le code Fractionner & diviser vos actifs en morceaux (améliore le FID & LCP)
    Ce nest toujours pas une bonne idée davoir des actifs énormes (tout ce qui dépasse 100 Ko est énorme) (les fichiers JS en particulier) dans votre application. Il vaut donc mieux utiliser des packages comme «webpack» pour répartir les actifs lourds en petits morceaux qui chargeront vos actifs de manière asynchrone dans votre navigateur (si vous activez le protocole h2). Vous pouvez également tirer parti des fonctionnalités de fractionnement de code pour répartir les composants de votre page en fichiers séparés plutôt que de les regrouper dans un seul fichier HTML.
  6. Compressez tous vos actifs statiques avec la compression Brotli (améliore le LCP)
    Jencourage lutilisation de Brotli pour compresser vos actifs statiques, ce qui donne un bien meilleur co ratios de compression par rapport aux autres bibliothèques du marché. Dans le même temps, gardez à lesprit que lorsque vous utilisez Brotli avec un taux de compression plus élevé, cela augmentera certainement votre temps de construction et de package dans le parcours du pipeline DevOps. Pour moi, cétait bien de sacrifier le temps de création de lapplication, car jobtiens une meilleure valeur en termes de performances de chargement de page.
  7. Optimiser la demande dAPI et contenu de la réponse (améliore le FID & LCP)
    Ceci est très important à considérer car chaque octet compte ici lorsque nous parlons de performances de la page. Jespère que vous ne regretterez pas de revenir en arrière et de vérifier vos demandes dAPI & réponses pour remplir votre page. Assurez-vous de ne récupérer que les données dont vous avez besoin pour votre page être rendu à partir des réponses de lAPI. Une autre chose stupide que vous pourriez peut-être faire une erreur est que vos appels dAPI sont invoqués en interne plutôt que dutiliser des points de terminaison publics ou via Internet – car cela coûte toujours cher en termes de temps lorsque vous invoquez vos API via Internet lorsque vos API sont hébergées dans le même sous-réseau ou au moins dans le même réseau!
  8. Réduisez la page / document global size (améliore LCP)
    Idéalement, si votre page de destination est lourde (je classerais nimporte quelle page avec> 80 Ko comme lourde), cela contribuera certainement mal au score LCP car cela augmentera proportionnellement la vitesse de récupération et de téléchargement de votre page. Assurez-vous donc que vous nobtenez pas de gros morceaux de données inutilisés côté serveur et ne chargez que les données nécessaires au rendu de votre page.
  9. Utilisez les formats dimage NEXT-GEN (améliore le LCP)
    JPEG 2000, JPEG XR et WebP sont des formats dimage qui présentent des caractéristiques de compression et de qualité supérieures par rapport à leur ancien JPEG et Homologues PNG. Encoder vos images dans ces formats plutôt que JPEG ou PNG signifie quelles se chargeront plus rapidement et consommeront moins de données cellulaires. Vous pouvez utiliser nimporte quel type doutil sur le marché pour convertir les images en images au format NEXT-GEN ou vous pouvez même créer un service dimage dexécution qui peut effectuer une conversion dimage en temps réel de JPEG vers WebP et servir dans le navigateur.
  10. Activer le remplacement des polices natives prises en charge par le navigateur (améliore le FID)
    Il est prouvé que les polices peut vraiment faire baisser vos scores de performances si le navigateur tarde à charger la police personnalisée utilisée dans votre application, à moins quil ne sagisse dune police par défaut prise en charge par le navigateur. Dans ce cas, une solution rapide pour vous est davoir une approche de secours lors du chargement votre police avec les polices prises en charge par défaut par le navigateur. Vous trouverez ci-dessous un exemple dextrait de code sur lutilisation dune approche de remplacement avec dautres polices.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Tous les conseils donnés ci-dessus pourraient être implémentés de manière incrémentielle dans votre application et encore une fois comme mentionné avant que les scores Core Web Vitals soient évolués à partir dun utilisateur réel données et non plus à partir de données «Lab». Ainsi, il faut du temps pour refléter les améliorations de votre score, qui est généralement de 28 jours pour refléter. Vous pouvez toujours utiliser loutil PageSpeed de google – https://developers.google.com/speed/pagespeed/insights/ pour obtenir vos scores CWV.

Jespère que cela vous aide et vous souhaite tout le succès dans vos travaux! Bravo!

Laisser un commentaire

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