Comment accélérer son site avec Google Pagespeed insights?

google page speed tuto 1

Nous allons voir comment Google PageSpeed Insights peut t’aider à améliorer la rapidité d’affichage de ton site.

La rapidité de ton site devient un critère essentiel qui sera pris en compte par l’algorithme de Google pour déterminer la position de ton site dans les SERP. Google le dit dans cet article de 2019 (en anglais).

De toute évidence, cette tendance ne fera que de s’accentuer dans le futur.

Ce qui est logique, puisque Google souhaite toujours répondre rapidement aux questions de ses visiteurs.

Comme nous l’avons vu dans l’article précédent, l’expérience utilisateur est au cœur des préoccupations du grand moteur de recherche.

Cet article parle de l’expérience des visiteurs de ta boutique en ligne. Si tu ne l’as pas déjà lu, je t’invite d’abord à lire Découverte des Google Insights.

Évidemment, la rapidité d’affichage d’un site arrive rapidement en première ligne dès qu’il est question d’expérience utilisateur.

Qu’est ce que PageSpeed Insights ?

Google met cet outil SEO gratuit à disposition des webmasters et propriétaires de sites pour les aider à cibler les améliorations possibles.

Grâce à ces résultats, tu pourras cibler les optimisations à faire pour t’aider à rendre ton site plus efficace dans sa vitesse d’affichage.

Et ainsi espérer être mieux positionné dans les résultats naturels.

Le problème, c’est que les données ne sont pas toujours très claires.

Cela dit, il est aussi possible que tu ne sois pas un programmeur et que la vitesse du site soit une donnée un peu étrangère pour toi.

Du moins, sur le côté fondamental de la chose.

Malgré cela, il faut réagir dès que possible pour éviter de se voir pénalisé par le moteur de recherche.

Aujourd’hui, il existe un grand nombre de possibilités pour accélérer la vitesse de son site (que nous allons voir ici). Plus d’excuses ne sont possibles.

Si un site concurrent a un site plus fluide et plus rapide, il y a des chances qu’il te passe devant sur ce seul critère.

N’oublie pas que Google pense à ses visiteurs, ceux qu’il t’envoie. Et si ton site ne les satisfait pas, il ne va aimer l’expérience que tu as fait connaitre à ses visiteurs.

Fonctionnement de chargement d’une page web

On va regarder un peu sous le capot.

Si tu n’avais jamais testé la rapidité de ton site avant, je te conseille :

  • choisi le top 10 des pages de ton site avec le plus de vues
  • teste les une fois chacune pour identifier les problèmes
  • analyse les problèmes communs et les plus rapides en premier
  • et continue la lecture de cet article

 

Prenons un exemple concret :

temps-chargement page
Temps & structure de chargement d’une page web

Wow, je ne veux pas te faire peur, je vais juste t’imager la situation simplement.

Le navigateur a téléchargé 57 éléments pour pouvoir afficher cette page web.

Dans ces éléments, on retrouve des images, des scripts, des feuilles de style CSS…

Par logique, plus il y a d’éléments, plus c’est long.

Toutefois, le poids joue également un rôle crucial.

Si ton magnifique site a une image de 1Mo à charger, ton site semblera lent à charger. D’autant que certains éléments en bloquent d’autres avant d’être chargés.

Tu le vois sur l’image ci-dessus, le chargement est plus ou moins en cascade.

Tu remarques les barres colorées les plus longues ? Ce sont les chargements qui font ralentir ton site.

Autrement dit, on remarque que sont les scripts de Facebook, en plus d’être plusieurs, sont longs à charger. Il y a également FontAwesome (affichage des icônes) et sib, qui correspond à une technologie d’emailing automatique. On a aussi le script de Nosto qui prend 0,7s à charger (recommandations de produits in-site). Ceux-ci sont cumulés et pèsent pour plus de la moitié du chargement de la page.

Techniquement, ça veut dire que le site est opérationnel sans ces scripts.

Toujours sur cette image, tu remarques la barre bleue à droite ? C’est la fin du chargement de la page, qui met tout juste moins de 3 secondes à se charger.

C’est assez juste, mais c’est pas mal. Il faut optimiser… on testera cette même page dans PageSpeed Insights après.

Pourquoi améliorer la rapidité de son site ?

On l’a vu, Google demande toujours plus aux sites qui sont dans son index.

Et la vitesse est directement reliée à l’expérience de l’utilisateur du site. Qui compte toujours un peu plus, surtout sur mobile.

Combien de fois tu es parti d’un site qui était trop long à charger ?

  • De 1 à 3 secondes, les probabilités de sortie sont d’environ 32%
  • Jusqu’à 5 secondes, les probabilités de sortie sont d’environ 90%
  • Jusqu’à 6 secondes, les probabilités de sortie sont d’environ 106%
  • Jusqu’à 10 secondes, les probabilités de sortie sont d’environ 123%

En d’autres termes, plus ton site charge vite moins tu vas faire fuir tes visiteurs qui ne patienteront pas le temps complet du chargement de la page.

Pour une boutique en ligne, que tu as probablement, c’est une perte sèche sur ton C.A et la chute assurée de ton taux de transformation.

En effet, chaque seconde de chargement est précieuse, et je dirais même qu’on peut parler en millisecondes.

Le temps de chargement idéal d’un site est de moins de 2 secondes.

Test de vitesse sur Google PageSpeed Insights

Avant de paniquer, sache qu’une étude menée en 2019 sur plus de 5 millions de sites montre que le temps de chargement complet d’une page était d’en moyenne 10 secondes sur ordinateur, et plus de 27 secondes sur smartphone ! On a le temps de se faire un café.

Rends toi sur la page : https://developers.google.com/speed/pagespeed/insights/

Ajoute l’URL de la page la plus visitée de ton site par exemple (pas forcément la page d’accueil).

Et run le test.

Test Google PageSpeed
Test Google PageSpeed – mobile

Sur ce test mobile, la page ne s’en sort pas trop mal avec quelques erreurs à corriger.

On va être clair, atteindre le score de 100 sur mobile ne sert à rien, et je ne suis pas certain que cela soit possible pour une boutique en ligne qui a forcément des scripts à charger.

Avant de détailler chaque point, je te mets la même page de test sur ordinateur.

test-insightspagespeed-desktop-e
Test Google PageSpeed – desktop

On ne va pas s’attarder sur le pourquoi des différences, puisque Google se concentre assurément sur les mobiles.

Vu qu’ils représentent à eux seuls une bonne moitié du trafic web mondial, on peut comprendre.

Avec un tel résultat, franchement, il vaut mieux ne pas perdre son temps pour optimiser desktop.

Pour conclure ce point et si tu es familier avec l’anglais, je te propose ce site qui te donnera beaucoup de ressources sur le sujet : https://web.dev/vitals/

Comprendre les résultats de Google PageSpeed Insights

On remarque 4 grands axes dans nos résultats.

Comparé à notre première image en cascade, qui fait un peu peur au début, les Insights offerts par Google sont plus facilement compréhensibles. Et aussi plus agréables à regarder !

First Contentful Paint (FCP)

Cette donnée est simplement le temps de chargement du premier élément affichable par le navigateur à l’entrée dans la page du site. Cela est généralement une image, comme le logo du site s’il se trouve en haut du site.

À noter qu’avant que cette image puisse d’afficher au visiteur, le navigateur doit télécharger d’autres éléments en premier lieu. L’ordre de téléchargement par le navigateur est donc crucial.

Ce qu’il faut viser :

FCP chargement en secondes Score attendu
0–1.8 90 – 100
1.8–3 50 – 89
3 et + 0 – 49

Pour notre exemple, il est possible que le script Font Awesome charge avant, tout comme le fichier CSS. Pour passer en vert sur FCP, il conviendrait de faire sans ce script ou de différer son chargement avec la balise async.

A première vue, la modification peut être simple à faire pour un résultat intéressant.

Comment augmenter son score First Contentful Paint (FCP) ?

Étant donné que cette mesure concerne le premier élément affiché à l’écran, je te conseille de suivre ses quelques idées :

  • Différer le chargement des scripts avec async ou defer
  • Optimiser les images, en évitant le redimensionnement et en utilisant une compression aux nouveaux formats comme .webp
  • Continuer à optimiser ses feuilles de style CSS, en retirant les valeurs bloquant l’affichage et/ou en retirant les règles inutiles au début du chargement de la page (comme le style du footer qui ne se voit pas au chargement)
  • Vérifier et optimiser ses scripts JS en les réduisant au minimum requis
  • Alléger ses webfonts, par leur nombre ou la police d’écriture choisie

Dans le résultat, tu verras un bouton Consultez la carte proportionnelle.

Clique dessus pour arriver sur la page Lighthouse Treemap. Cela te donnera des informations précieuses sur les éléments de ton site qui sont lourds et inutiles.

Largest Contentful Paint (LCP)

Cette donnée indique le temps qu’il faut au navigateur pour afficher le contenu le plus lourd de la page. On peut considérer que cette donnée est chargée à environ 75% du chargement total de la page.

Cela peut être :

  • une image
  • une vidéo
  • une image en background
  • un paragraphe de texte le cas échéant

Ce qu’il faut viser :

LCP en secondes Color-coding
0-2.5 90 – 100
2.5-4 50 – 89
4 et + 0 – 49

Malgré tout, ces deux premiers éléments que sont FCP et LCP sont plutôt corrélés dans la mesure où l’optimisation de l’un influera sur l’autre.

Prenons un exemple concret pour comprendre comment ça fonctionne vraiment.

frp-lcp-pagespeed
Processus de chargement FCP et LCP d’une page web

Le FCP ici est le premier texte affiché et le LCP est l’image de l’article pour cet exemple.

On remarque que le chargement LCP tout à droite arrive après d’autres éléments, comme une autre image que l’on peut voir en bas de page. Techniquement, on peut encore améliorer le LCP de ce site.

Une étude menée par Google indique la meilleure pratique pour une page web, est de ne pas dépasser 500KB, soit 0,5MB. Dans la réalité, personne ou presque ne peut faire une page aussi légère.

Dans l’absolu, je te recommande de prendre garde aux images que tu affiches sur ton site. Ce point est souvent source de ralentissements.

First Input Delay (FID)

Le FID est une mesure qui calcule le temps écoulé entre l’ouverture et le moment où un utilisateur interagit pour la première fois avec une page. Comme cliquer sur un bouton ou un lien, et ce, jusqu’au moment où le navigateur est en mesure de commencer à traiter les événements en réponse à cette interaction.

La métrique First Input Delay (FID) sera la donnée qui jouera un rôle sur la première impression qu’aura un visiteur sur ton site à propos de la réactivité de ce dernier. Et faire bonne impression dès le début, c’est important.

Le plus courant, c’est un lien ou un bouton, et selon la page, cela peut être un champ de formulaire ou de recherche.

En conclusion, pour améliorer le temps de réponse du FID, concentre toi sur l’élément Total Blocking Time (TBT).

Cumulative Layout Shift (CLS)

J’ai trouvé cette vidéo qui illustre parfaitement la problématique liée aux mouvements des éléments visibles dans la page.

Tu connais ça toi aussi ?

Quelle expérience en retiens-tu ?

C’est détestable, surtout quand tu viens de commander 12 palettes de papier toilette.

Ce problème peut arriver pour pas grand chose, comme une image qui charge de manière asynchrone.

Si tu es dans le orange ou le rouge sur tes pages, identifie la source du problème rapidement.

Et pas que pour faire un 100% dans PageSpeed Insights, mais bien parce que tes visiteurs détestent ça tout autant que toi. On a vu aussi que cela était très contraignant pour un clic sur un bouton ou pendant la lecture de texte.

Ensuite, on passe au chapitre suivant.

Total Blocking Time (TBT)

Non, ce n’est pas un Throwback Thursday.

En tout cas, ce n’est pas aussi fun que ces photos où on est à la mode du siècle dernier.

Le TBT, ou Total Blocking Time, mesure le temps total pendant lequel une page est bloquée. C’est-à-dire qu’elle puisse répondre aux actions du visiteur, comme un clic ou appui d’écran.

Toute tâche est censée s’exécuter en 50 millisecondes ou moins. Chaque milliseconde en plus constitue une tâche qui sera considérée comme longue. Le laps de temps après 50 ms est la partie bloquante ; et donc, une tâche de 70 ms aura 20 ms de partie bloquante calculée.

C’est chinois ?

Temps TBT
(en millisecondes)
Note attendue
0–200 90 – 100
200-600 50 – 89
Plus de 600 0 – 49

Comment améliorer le Total Blocking Time (TBT)

Comme le dit Google : « Le chargement, l’analyse ou l’exécution de JavaScript inutiles sont généralement une opportunité d’amélioration beaucoup plus importante sur la plupart des sites. »

On revient à nouveau sur les données que le navigateur va charger, pour rien.

Cela peut aussi être un CSS mal construit ; en effet, des règles contradictoires et/ou bloquantes ne feront qu’augmenter le TBT de la page.

En définitive, élimine les ressources inutiles au bon fonctionnement de la page.

Time to Interactive (TTI)

J’ai gardé le meilleur pour la fin, tu me connais.

Qu’est ce que la mesure TTI, ou Time to Interactive ? Je vais vous le dire…

Le TTI mesure le temps nécessaire à une page pour devenir entièrement utilisable par le visiteur. Quand je dis utilisable, je précise que l’on puisse cliquer ou scroller par exemple.

Pour t’imager cette mesure, c’est comme si le site s’affichait sur ton écran, mais qu’il était comme freezé. Le site semble prêt et est en fait inutilisable. Un bouton apparait, mais on ne peut pas cliquer dessus.

De toute évidence tu sasis l’idée.

Cette mesure prend en compte le contenu utile, qui est calculé en amont par le First Contentful Paint.

Il faut aussi que le page réponde aux demandes de l’internaute, dans le laps de temps de 50ms.

Temps TTI
(en secondes)
Note attendue
0–3,8 90 – 100
3,9-7,3 50 – 89
Plus de 7,3 0 – 49

Pour améliorer ce résultat, considère réduire tes scripts et notamment supprimer les éléments inutiles de ces derniers.

Tu peux également réduire la taille excessive du DOM en évitant les balises imbriquées inutilement de <div><section><b><span> etc…

4 solutions rapides pour améliorer son score PageSpeed (pour les semi-nuls)

J’ai donné des informations assez techniques, ce qui n’est pas forcément ta tasse de thé.

Je ne suis moi-même pas technicien, mais par la force des choses, on plonge les mains dans le cambouis.

En fait, avoir un 100 parfait sur Google PageSpeed Insights relève de l’impossible avec une boutique en ligne. Et c’est OK.

On veut améliorer simplement ce qu’on peut améliorer pour être dans les clous, et répondre aux attentes de nos visiteurs et celles de Google qui nous envoie gentiment ses visiteurs.

1. Réduire la taille des images

Sans mystère, les images ça peut être lourd et personne ne veut attendre 2 minutes pour une image.

Même si comme moi, tu as eu un modem Wanadoo à 521Kb/s, tu ne veux plus attendre maintenant.

En bref, corriger la taille des images va rapidement améliorer la vitesse de ton site !

Dans certains cas, tu peux sauver près de 50% rien qu’avec les images.

Prenons l’exemple suivant. Je vais faire l’expérience avec une image que j’ai utilisé pour illustrer le FCP, avec l’outil gratuit CompressJPEG.

compressjpeg-example-ecm
Compression image pour le web

Initialement, mon image pesait 172Ko avant compression contre 124Ko après compression. La compression de l’image m’a donné 28% de réduction sur son poids.

Je te laisse imaginer ce que cela peut donner sur une page de catégorie de ta boutique en ligne, où une vingtaine d’images s’affichent.

Tu vois le travail qui t’attend ? Navré, ce n’est pas tout.

La taille, ça compte…

Le blog que tu es en train de lire, il est cool c’est vrai. Au delà de ça, la partie lisible que tu es en train de lire est fixée à 700px au plus large.

Dans ce cas, ai-je besoin d’une image qui a une largeur de 2000px ?

Assurément pas.

Pour garder mon exemple, l’image qui est un screenshot, faisait 1600px. Ce qui est inutile, puisque ma zone d’écriture ne dépassera jamais 700px.

J’ai donc réduit la taille de l’image à 700px de large.

Les résultats :

  • L’image brute de 1600px de large : 172Ko
  • Celle compressée de 1600px de large: 124Ko
  • Et la compressée et réduite de 700px de large: 18ko

On a presque divisé par 10 la taille de l’image, sans que le résultat ne se voit pour l’internaute.

En fin de compte, ton site affiche une image non-optimisée en « x » seconde(s) pendant que moi j’en affiche 9 !

Outils gratuits pour optimiser les images

Comme utilisé pour l’exemple, CompressJPEG est rapide et permet d’uploader jusqu’à 20 images simultanément.

Si tu utilises WordPress ou WooCommerce, tu peux utiliser le plugin SMUSH. Tu peux le trouver dans les plugins en recherchant Smush dans Extensions > Ajouter.

smush-plugin-ecm
Optimiser les images avec Smush

Tu trouveras bon nombre de tutos sur le web pour bien utiliser Smush, ce n’est pas le but de cet article.

Il y a une version gratuite qui est très complète, et une version Pro qui est sous forme de licence qui donne droit à plus d’outils, et notamment un CDN.

Si tu as une boutique Shopify, tu peux utiliser une app intégrée qui est Crush Pics.

Image-Optimizer-Compression-ecm
Image Compression sur Shopify

Les résultats sont sans appels et parfaitement adaptés pour améliorer ton SEO.

Finalement, on peut rapidement augmenter la vitesse de son site, sans rien connaitre au code.

2. Réduire ton code HTML

Si tu utilises un CMS, et que tu n’a pas bidouillé le code, ce point peut être difficile à changer.

Si tu es sur WordPress ou WooCommerce, tu peux utiliser le Plugin LiteSpeed cache, Hummingbird ou Clearfy.

Ce plugin te permettra de réduire ton code HTML qui peut avoir des éléments inutiles comme des commentaires, des balises redondantes ou vides.

Dans la page de Google PageSpeed Insights sont recommandées les réductions du code HTML, JavaScript, et CSS.

Encore une fois, il existe tous les tutos possibles sur le web pour optimiser ton code au mieux avec ces outils.

Ainsi, ton site se portera mieux et tes visiteurs en seront ravis.

3. Ajouter une version AMP des pages

Qu’est-ce que l’AMP ? Une version ultra légère de la page.

C’est l’acronyme de Accelerated Mobile Pages.

L’idée est d’afficher l’information le plus rapidement possible, au détriment du style et des scripts.

« Ah oui mais j’ai passé 6 mois a designer mon site et son apparence, je ne peux pas accepter un site moche! »

Pour commencer, on se calme. Je vais t’expliquer pourquoi il faut implémenter l’AMP sur ta boutique en ligne ou sur ton site.

Une page AMP est hébergée par Google même, oui oui. Et cela donne la bonne première impression à ton visiteur.

Ton but est rarement de faire fuir ton visiteur à la première page n’est-ce pas ?

Lorsque tu auras fait plaisir à ce dernier en affichant ta page à une vitesse folle, il sera plus simple pour lui de cliquer et d’aller plus loin sur ton site.

Quand il aura cliqué, il tombera sur ton site complet.

resultats-amp
Résultats Google AMP

Si tu as la chance d’avoir une boutique en ligne sur Wizishop, l’AMP est implémenté depuis un moment déjà.

Je t’invite à l’activer si ce n’est pas déjà fait, et voici pourquoi.

J’ai testé la boutique de l’équipe de Nice qui a une boutique Wizishop.

Leur AMP est activé :

PageSpeed-Insightsnoamp-ecm
PageSpeed sans AMP
PageSpeed-Insights-amp-ecm
PageSpeed sans AMP

On ne va pas débattre sur le sujet, le résultat est flagrant avec l’AMP actif sur leur boutique.

Les premiers éléments sont affichés dès le début et les images arrivent rapidement après.

Ton visiteur va pouvoir scroller ou taper sur le maillot qu’il veut pour ouvrir la page complète de la fiche produit. C’est un atout indéniable que d’avoir cette fonctionnalité implémentée gratuitement.

Si tu es sur WordPress ou WooCommerce, il existe le plugin AMP for WP.

amp-builder-wordpress-ecm
Plugin AMP pour WordPress

Encore une fois, des tutos sur le sujet sont disponibles sur le web.

Je souhaitais te renseigner au mieux sur l’utilisation de l’AMP. Clairement, selon le CMS choisi, cette opération peut être plus ou moins facile. Cela montre encore une fois l’importance de choisir les bons partenaires dès le début (et d’écouter ce que je dis ;)).

Quelques histoires et faits trouvés sur le web au sujet de l’AMP :

  • CNN perd 10% de trafic par seconde de chargement en plus sur son site
  • 100k pages AMP sont visitées chaque jour
  • Une page AMP charge environ 3 fois plus vite qu’une page normale
  • Une page AMP augmente ses impressions dans les SERP (les vues) de 50%

Si tu n’utilise pas les CMS indiqués ci-dessus, je t’invite à prendre connaissance du tuto pour créer ta première page AMP

Si tu te le demande, oui Google favorise assurément les pages disponibles en format AMP dans ses résultats naturels.

Pour mémoire et pour clore ce point, le format AMP n’est proposé qu’aux utilisateurs mobile de Google. Il n’apparait pas sur desktop (ou ordinateur)

4. Utiliser le cache du navigateur

Le cache du navigateur permet d’optimiser la rapidité d’affichage par l’action de mémoriser certains éléments récurrents à toutes tes pages.

Cela peut être des éléments présents dans chaque page :

  • Le logo
  • Le menu et ses éléments
  • Le footer et ses éléments
  • La barre latérale

Nous sommes d’accord, charger à nouveau des éléments qui ne changent pas au fil des pages est ridicule.

Selon le CMS utilisé, ce critère est déjà souvent optimisé.

Pour WordPress ou WooCommerce, il existe le plugin W3 Total Cache ou LiteSpeed cache dont nous avons parlé plus haut. Tu pourras configurer simplement des règles de mise en cache qui auront un impact positif pour tes visiteurs et pour Google.

Conclusion de Google PageSpeed Insights

Google nous fait un généreux cadeau, celui de montrer les défauts de notre site chéri. Et il ne manque rien, le moindre défaut refait surface.

L’objectif de Google est d’uniformiser le web.

Le rendre fluide et accueillant pour tous.

On appelle cela les WebVitals, et c’est une norme qui va s’installer rapidement à l’instar du W3C.

Je ne fait que le répéter, tire parti de tout ce qu’on a vu sur cette page pour gagner de précieuses places dans les SERP.

La différence pour une boutique en ligne est flagrante, sur le taux de rebond, mais aussi sur le taux de conversion.

Il est tellement plus difficile aujourd’hui d’avoir du trafic qu’il faut le chérir comme possible une fois qu’il est sur notre site.

Tu veux parler de tes résultats avec moi ? Les commentaires t’attendent.[wpdiscuz-feedback id= »7pcbexadyo » question= »Partage tes résultats PageSpeed » opened= »0″][/wpdiscuz-feedback]

1 réflexion sur “Comment accélérer son site avec Google Pagespeed insights?”

  1. Ping : Rendre sa boutique en ligne professionnelle - e-commerce Mentor

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.