Mesurer les Performances de son site web avec PageSpeed Insights

Les Outils Web permettant de mesurer différents aspects d’un blog ou site web sont légion. Il y a ceux qui comme Woorank vous établiront un diagnostic global de la page web qui sera proposée à l’analyse. Quand d’autres outils, comme PageSpeed Insights vous renseigneront eux sur les performances d’une page web en termes de vitesse d’affichage.

Pourquoi ces mesures et ces tests ? Tout simplement pour apprendre d’abord à situer son site web sur divers aspects, comme par exemple la vitesse d’affichage des pages de son site internet ou blog. Ensuite, pour tenter dans la mesure du possible, en fonction de ses connaissances, agir pour améliorer et optimiser son site web.

Et si cet outil est créé, c’est aussi et surtout afin de savoir comment un site web se comporte en termes d’expérience utilisateur, à savoir la fameuse UX pour User eXperience. L’idée étant de découvrir et si besoin d’agir pour que l’expérience proposée aux internautes soit la plus rapide et fluide possible. En bref, de quoi offrir une navigation optimale, agréable et rapide à ses visiteurs.

Qu’est-ce que PageSpeed Insights ?

PageSpeed Insights est un outil web gratuit qu’on peut retrouver à cette adresse. Cet outil web est un produit 100% made in Google. Tout comme le sont Google Search Console (auparavant nommé Google webmaster tools) ou encore Google Analytics (bientôt succédé par G4 à compter de juillet 2023). Et même si on peut déplorer beaucoup de défauts chez les produits ou la politique mégalo de Google, force est de constater que nous avons là à disposition, un énième outil gratuit qui permet de mieux connaître les performances de son blog pour ensuite l’optimiser.

Alors à quoi sert PageSpeed Insight ? Voici ce qu’indiquait la doc de chez Google en 2016 :

pagespeedinsight

En bref et pour faire court, PageSpeed Insights sert à mesurer le temps de chargement d’une page web. Grosso modo, si vous tapez sur la page de test juste ici, http://monsuperblog.com alors l’outil fera tourner ses moulinettes et vous affichera des notes en vous indiquant si votre page s’affiche vite ou non.

Tester des adresses web avec Pagespeed Insights

Pour tester différentes pages/adresses de votre blog ou site web, rendez-vous sur la page de l’outil. Une fois connecté à la page, tapez ou collez l’adresse courte ou longue de la page que vous voulez tester. Ici, je tape l’adresse racine d’un de mes blogs :

test-pagespeed

Quand vous aurez validé, très vite l’outil fera son job de mesure et finira par vous donner un résultat. Pas de panique si vous voyez du rouge partout. Idem si vous voyez des points d’exclamations sur les 2 onglets puisque l’outil mesure la page concernée pour le support mobile et le support ordinateur. L’outil sert non pas à vous sanctionner en vous refilant une note basse et vous dire que votre site web est super lent. Même si j’avoue que la première fois, ça fait un peu beaucoup cet effet là.

Le résultat de l’analyse sert surtout à vous permettre de connaître les éventuels éléments à améliorer, à changer ou à laisser en l’état. En effet, le résultat vous indiquera par exemple si vos photos et/ou images sont assez light et donc adaptées au web ou si à l’inverse elles ont quelques kilos octets de trop 🙂

Ci-dessous justement, le résultat obtenu en avril 2016 montre que sur cet aspect du blog concerné par le test, j’ai été mauvaise élève car je sais qu’il faut compresser la taille des images mais je ne l’avais a priori pas suffisamment fait. Aussi donc, l’outil m’indique que cet aspect peut être améliorer (parmi d’autres) :

result-pagespeedinsight

Et comme l’outil n’est pas trop vachard, il me dit aussi ce qui est bien 🙂 Et ouf, il y a donc aussi du positif : Le blog concerné est noté à hauteur de 99/100 pour l’expérience utilisateur.

En 2023, toujours en avril, voici l’analyse du même blog :

rapport analyse pagespeed insights avril 2023 strawberries

On voit que l’outil a bien évolué depuis 2016. Les éléments sont plus web friendly. Au niveau des résultats renvoyés, pour le mobile tout est vert pour le blog strawberries.fr ce qui est évidemment une bonne nouvelle. Pour les résultats globaux comme les 4 items, idem avec une note située entre 92 et 100 :

  • Performances
  • Accessibilité
  • Bonnes pratiques
  • SEO

Les résultats renvoyés par PageSpeed Insights

Soyons clair(e)s. Cet outil n’est utile que si un(e) propriétaire de site web ou blog a du temps à consacrer à la compréhension des résultats proposés par l’outil et ensuite à l’amélioration des potentiels éléments incriminés dans des ralentissements de temps d’affichage d’une page.

Notons par ailleurs, que pour un même site web ou blog, les résultats peuvent varier. Si vous tester votre page contact sur laquelle n’apparaissent que votre logo, un menu de navigation et un formulaire, la page sera probablement rapide à afficher car elle contient peu de choses. Contrairement à certaines pages d’accueil qui affichent beaucoup d’images et d’infos…

Les 4 principaux axes de notation

L’outil vous donne une note pour le mobile et pour ordinateur sur 4 axes que sont donc, les performances, l’accessibilité de votre page, les bonnes pratiques et le SEO. La recommandation classique est de prioriser les actions sur les éléments les moins bien notés par l’outil.

Performances

Voici sans doute l’élément le plus stratégique pour les webmasters. Les performances portent en effet sur des éléments qu’il ne sera pas toujours facile de corriger. Voici par exemple ce que pourra remonter comme positif ou moins positif l’outil pagespeed Insights :

  • Des images aux dimensions correctes (on évite les 300 ko pour une seule image)
  • Diffuser des images aux formats nouvelle génération : Pour privilégier quand possible le webp et le AVIF.
  • Des images uniquement aux formats JPG (on essaie de placer du png pour des icônes et logo, on met du webp et du svg quand c’est possible car très léger)
  • Les ressources qui bloquent le rendu (en gros, il s’agit là d’utiliser un système de cache afin de minifier les ressources de type CSS et JS afin qu’elles ne rallongent pas le temps de chargement de la page au clic des internautes).
  • Réduire le nombre de requêtes et la taille des transferts : Là encore, il s’agit de faire en sorte de réduire ou retirer tout ce qui réclame beaucoup de ressources à la page pour s’afficher ou qui demande à la page d’appeler beaucoup de ressources. On retire tout ce qui est de l’ordre du superficiel comme des widgets qui affiche des feeds de réseaux sociaux en temps réel ou presque…

Si c’est élément est délicat à traiter, c’est qu’il appelle parfois des connaissances qui ne sont pas aisées à appréhender. Les notions de cache ou encore de JS ne parlent pas à tout le monde. Ce qui est tout à fait normal. En revanche, d’autres éléments couramment incriminés comme le poids/Taille des images et photos seront là plus faciles à améliorer. Puisqu’il conviendra souvent de remplacer une image lourde par une plus légère ou aux dimensions plus raisonnables. Ou encore, en changeant un format d’image.

L’accessibilité

Ici, il est question de savoir ce qui est bon ou moins bon sur une page web en termes d’accessibilité. C’est à dire, la lisibilité des éléments d’une page, comme le texte (sa taille, sa couleur par rapport à la couleur de fond de la page, la taille suffisamment grande d’un bouton pour qu’il soit lisible, visible et cliqué…).

Exemple : Si votre page dispose d’une mauvaise note sur l’accessibilité, n’hésitez pas à prioriser les changements à apporter pour faire grimer la note et rendre plus facile la navigation pour votre audience à savoir vos lecteurs. L’accessibilité peut notamment être sanctionnée sur des items comme :

  • Une couleur d’arrière plan trop peu contrastée avec une couleur de premier plan (vous avez un texte très clair sur un fond blanc)
  • Un bouton sur lequel il manquerait du texte (ex : envoyer) et qui s’affiche très mal avec seulement un petit carré

Pour les deux remontées à améliorer, il conviendrait donc de rendre plus foncée la couleur de premier plan afin qu’elle soit plus contrastée avec le fond blanc. Pour le second exemple, il faudra ajouter du texte sur le bouton incriminé par sa trop petite taille.

Bref, il convient selon les remontées, de corriger les éléments considérés comme peu accessibles par l’outil.

Bonnes pratiques

Ici, l’outil sanctionnera des éléments considérés comme des basiques. Si par exemple un site web ne dispose pas de la connexion sécurisée en HTTPS sur toutes ses pages, il l’indiquera et baissera la note pour cette raison. Avec ce message à la clé : La page n’utilise pas le protocole HTTPS.

Dans ce cas, il faudra voir pour que les potentielles pages incriminées soit bien passées du protocole HTTP à celui en HTTPS qui doit sécuriser l’internaute lors de sa visite.

SEO

Ce critère de notation porte bien son nom puisqu’il sanctionnera comme positif ou négatif tout élément directement relatif au référencement naturel d’une page web. Aussi, le tool donnera son retour sur des éléments comme le fait que le site web ou la page web testée dispose bien :

  • D’un élément title, soit un titre
  • que l’indexation de la page n’est pas bloquée (par le robot.txt par exemple)
  • que les images ont bien des attributs ALT renseignés
  • que la page utilise des tailles de police lisibles
  • que les éléments tactiles sont correctement dimensionnés…

Sans surprise, la liste des éléments notés est beaucoup plus longues que les exemples donnés ci-dessus. Voici notamment ce que le blog strawberries déjà pris en exemple obtient pour le mobile :

note seo strawberries fr 100 sur 100

La bonne nouvelle, c’est que beaucoup de ces items sont au verts car le thème choisi et utilisé pour ce blog était justement bien noté sur ces aspects avant son achat. De quoi assurer une bonne partie du SEO mobile sans travail supplémentaire. Idem pour une navigation desktop a priori confortable.

Préconisations pour améliorer son site via les résultats de Pagespeed Insights

Que vous consultiez les résultats relatifs à votre blog ou site web via PageSpeed insights par curiosité ou parce que vous trouvez que votre site web est lent, n’hésitez pas à prendre le temps de lire les résultats. Les parcourir trop vite notamment si les notes sont basses ne vous permettra pas de bien saisir d’où viennent les potentielles lenteurs du site web ou blog. Idem pour tout résultat SEO et/ou d’accessibilité qui serait moins positif que prévu.

Pour être efficace et réellement agir sur les résultats à améliorer, prenez des actions sur les résultats que l’outil vous remonte en premier.

p>Pour être efficace et réellement agir sur les résultats à améliorer, prenez des actions sur les résultats que l’outil vous remonte en premier.

Exemple : Si dans le cas de lenteur, ce sont les images et photos de votre site web qui sont incriminées pour leur poids trop lourd pour du web, alors n’hésitez surtout pas à traiter ce point en premier. En remplaçant les fichiers trop gros (plusieurs MO) par une autre version plus légère. Ou en optant pour du JPG à la place du PNG ou mieux encore, pas du WebP. N’hésitez pas à en réduire les dimensions quand il s’agit d’un logo trop généreux en dimensions alors qu’il n’est affiché qu’à une trentaine de pixels de hauteur sur votre site.

Exemple : Si l’outil vous indique que vous devirez ajouter un cache sur votre site web et que vous n’avez aucun système de cache activé, idem. Choisissez l’outil qui vous semble le plus adapté et activez le plugin sur votre espace web.

Certaines des actions à apporter pour améliorer les résultats sur Pagespeed Insights peuvent être complexes à appréhender. Tandis que d’autres actions restent accessibles. Comme s’agissant des images à traiter pour les rendre plus légères.

Aussi, n’hésitez pas à agir sur ce que vous savez gérer en autonomie. Et à agir sur les éléments qui ralentissent le plus votre site web. Ainsi, vous retrouverez des notes plus hautes sur l’outil et offrirez par extension une navigation plus agréable à vos visiteurs, car c’est le but premier de l’outil en donnant ces analyses.

D’autres outils comme PageSpeed Insights

Si vous préférez comparer les résultats avec d’autres outils gratuits du même type que PS Insights, n’hésitez pas à aller analyser votre site via des outils comme :

  • GT Metrix
  • tools.pingdom.com

Comparer les résultats de chaque outil permet de relativiser certaines notes parfois basses. Ou a contrario, cela permet de réaliser que certains points remontés comme à améliorer sont confirmés et qu’il est préférable de s’en préoccuper puis d’agir.


D’autres articles arrivent très vite pour approfondir les actions à prendre sur les résultats renvoyés par l’outil PageSpeed Insights.

Cette publication précédemment publiée le 14 avril 2016 a été complètement mise à jour et complétée. L’outil garde les mêmes missions mais a beaucoup changé en termes de design. On peut regretter qu’il reste toujours moins accessible que d’autres outils comme GT Metrix. Notons toutefois que PageSpeed Insights est disponible en français.

Beaucoup de pros du web tentent d’atteindre des notes supérieures à 95/100 sur les 4 actuels critères de notation de PageSpeed Insights. Ceci n’est pas facile avec WP. Même si le CMS s’améliore régulièrement en matière de performances.

Pour ma part, je vérifie plusieurs fois par mois avec la Search Console où en sont les web core vitals à savoir signaux web essentiels de mes sites web dont yesweblog.fr qui est le principal (et qui aura 10 mai en mai 2024).

Griselidis
Griselidis

Bonjour ! Je suis Griselidis. Webmaster & Webdesigner freelance, je tiens ce site web depuis mai 2014. Depuis 10 ans déjà, je partage ici des tutoriels et articles pour vous aider à créer votre site web, le faire vivre et le faire connaître.

Newsletter

Saisissez votre adresse e-mail ci-dessous et abonnez-vous à la newsletter

3 commentaires

Laisser un commentaire

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

  1. J’ai réussi sur mon blog test à faire sauter l’avertissement sur la ligne de flottaison… au prix de 2 jours de code ! Il a fallu :
    – complètement repenser l’organisation du fichier CSS du blog pour déterminer quels éléments étaient nécessaires à l’affichage des « grandes lignes » de la page, ce que Google allait considérer comme prioritaire…
    – minimiser la taille du CSS et des scripts.
    – retravailler l’ordre de chargement des scripts, modifier le mode de chargement des polices d’écriture, différer le chargement du CSS avec un script dédié, etc.
    – et modifier le code pour le rendre encore plus léger, charger encore moins de scripts externes…
    – désactiver JQuery.

    Tout semblait parfait, ça permettait d’obtenir une note mobile de 84/100… Tests ok sur iPhone, petit PC, grand PC… et sur un vieil iPad, je finis par découvrir que là ça ne marche pas du tout 🙁

    J’ai gardé le vieux design au final, les visiteurs passent avant les commentaires de PageSpeed Insights quand même 🙂 J’ai en général 62/100 en mobile, 100/100 en expérience utilisateur et 80/100 sur PC, ça peut varier un peu en fonction des pubs qui s’affichent. C’est un outil utile mais qui, je pense, reste très technique pour un non développeur. Je pense que je préfère GT Metrix, qui donne des conseils encore plus concrets à mes yeux.

    • Je rejoins ton avis et j’espérais que des commentaires comme le tien (comme les tiens plutôt qui sont toujours + que complets) viendraient mettre en relief les limites de l’outil. C’est d’ailleurs souvent le cas avec d’autres engins de mesure comme Woorank et consort. Beaucoup ne vulgarisent pas les résultats envoyés. Je me note GT METRIX pour des tests ultérieurs. Déjà testé mais bien trop rapidement il y a fort longtemps ^^
      Belles notes en tout cas 🙂 J’en suis encore loin pour ma part, avec beaucoup de boulot à venir !

      Merci (encore) pour ton/tes commentaires toujours exhaustifs !

  2. Merci pour l’article, mon site locoprive fr atteint désormais la note maximale de 100/100 sur le test de performance de Google pagespeed