Google Page Speed Insight

Après avoir vu les détails de la méthode de calcul du score PageSpeed Insights et ce qu’il signifie, abordons le reste des résultats pour voir si les recommandations de la partie Opportunities et Diagnostics sont pertinentes, et s’il faut les appliquer pour optimiser votre frontend et votre expérience utilisateur.

Quelles sont les données affichées sur la page de résultats de PageSpeed Insights 

Field Data

La page de résultats de PageSpeed dresse un état des lieux des Core Web Vitals de la page testée pour mobile et pour desktop, indique les donnés Field Data, et offre aussi la possibilité d’observer ces métriques pour le domaine de la page testée (onglet Origin). Enfin, un encadré mentionne les conditions dans lesquelles ces données sont relevées.

PageSpeed Inisght : Field data - Core Web Vitals

Les résultats de cette première section sont issus des données CrUX (panel d’utilisateurs réels de Chrome) collectées sur 28  jours, avec la possibilité de les observer pour l’URL testée, ou pour le domaine dans l’onglet Origin.
Sachez toutefois qu’elles ne traduisent pas la meilleure expérience possible en se basant sur le 75ème  percentile - autrement-dit, 75%  des utilisateurs ont une expérience d’une qualité supérieure aux temps traduits par ces mesures (sévère mais juste, comme on vous l’a dit).

Google aurait pu faire le choix d’indiquer une médiane, mais selon nous, c’est aussi intéressant de montrer des valeurs extrêmes pour inciter à optimiser la vitesse de chargement.
Même si la donnée n’est pas la plus représentative de l’ensemble des utilisateurs, elle tient compte des cas les plus critiques qui ne doivent pas être laissés de côté. En cela, la visualisation complémentaire de la distribution des valeurs réparties en 3 groupes “rapide / moyen / lent” est intéressante.

Attention, les résultats pour les données Field Data de cette section ne sont pas les mêmes que ceux de la section suivante qui se base, elle, sur des données Lab Data, et que nous allons aborder dans le point ci-après.  Vous allez comprendre pourquoi les résultats ne sont pas identiques : ce sont les mêmes métriques, mais relevées selon des méthodes différentes.

Sachez aussi que si l’audience de votre site est confidentielle et qu’il ne fait pas partie du panel CrUX, Google ne collectera pas toutes les données de terrain, et vous n’aurez pas accès à toutes les informations de cette section. Vous pouvez alors voir ce message apparaître :

PageSpeed Insights -Field Data - No data section

 

Lab Data

Cette section indique le score de performance, ainsi que les données de “laboratoire” calculés par Lighthouse qui extrapole les résultats à partir d’une connexion native via un algorithme (contrairement à WebPageTest qui simule une connexion). Il s’agit donc de données synthétiques, ce qui explique pourquoi les résultats du test pour certains indicateurs ne sont pas les mêmes que dans la section précédente Field Data (qui, elle, se base sur des données RUM), avec en plus la marge d’erreur induite par cette extrapolation des résultats.

Google PageSpeed Inisghts : Lab data

 

Comme nous l’avons aussi vu dans notre article précédent sur PageSpeed Insights, ces résultats sont pondérés pour calculer le score entre 0 et 100, lequel est à observer avec du recul ; il en va de même pour les conseils prodigués dans les sections suivantes de la page de résultats (Opportunities et Diagnostics) qui concernent seulement la page dont l'URL a été renseignée pour le test. Cette partie recommandation suggère des améliorations qui peuvent avoir du sens mais sans développer les conditions d’implémentation et surtout, sans vision systémique. Par ailleurs, les gains estimés (Estimated savings) sont très optimistes voire peu réalistes d’après des tests que nous avons menés. Un exemple : les recommandations autour de la compression des images ne tiennent pas compte de la qualité perçue :

Google PageSpeed Insights - Opportunities & Diagnostics

Notez que juste au-dessus de la section Opportunities, vous pouvez choisir d'afficher toutes les recommandations, ou les trier par métrique webperf :

Google PageSpeed Insights - Opportunities - Web Performance Metrics

PageSpeed Insights de Google détecte également le CMS de la page web testée et peut proposer des compléments d'information spécifiques, par exemple ici pour WordPress :

PageSpeed Insights - Test WordPress - optimisation des images

 

PageSpeed Insights - Test WordPress - optimisation des CSS

Enfin, sous la section données de Laboratoire, vous verrez un bouton “Consultez la carte proportionnelle” qui vous permet de visualiser le poids occupé par les différentes ressources de la page testée :

Google PageSpeed Insights - Treemap

 

Que peut faire Fasterize pour améliorer les points signalés en rouge, et plus généralement pour optimiser le score PageSpeed Insights ?

Comme vous le voyez dans les captures d'écran ci-dessus, les éléments de la liste apparaissent en orange ou en rouge s’ils sont à optimiser. 

Il peut s’agir de bonnes pratiques que vous devriez réellement appliquer, mais aussi de conseils que vous ne pourrez pas suivre puisque vous n’avez pas forcément la main sur les points à corriger. 

Cela reste aussi vrai pour nos clients qui bénéficient des optimisations automatiques de notre plateforme, car le périmètre de Fasterize ne couvre pas 100 % des points listés par PageSpeed Insights.

Par exemple, si l’outil recommande d’optimiser les Third Parties, il n’est pas possible d’intervenir puisque ces scripts viennent d’éditeurs tiers et peuvent difficilement être optimisés par notre moteur.

Voici un récapitulatif de ce que Fasterize peut améliorer parmi les recommandations de PageSpeed Insights liées à la web performance. Pour plus de détails sur les actions à mener, rendez-vous sur notre support ; et pour continuer à explorer le sujet, vous pouvez aussi consulter la présentation issue de notre webinar dédié à PageSpeed Inisghts.

Erreur Lighthouse Optimisation Fasterize
La page n'utilise pas le protocole HTTPS Oui
Ne redirige pas le trafic HTTP vers HTTPS Oui
La page actuelle ne retourne pas de code 200 en mode hors connexion Non
Le chargement de la page n'est pas suffisamment rapide sur les réseaux mobiles Partiellement
Réduisez le temps de réponse serveur (TTFB) Oui
Réduisez le temps d'exécution de JavaScript Partiellement
Préchargez les demandes clés Oui, manuellement
Connectez-vous à l'avance aux origines souhaitées Oui, manuellement
Assurez-vous que le texte reste visible pendant le chargement des polices Web Oui
Diffusez des éléments statiques grâce à des règles de cache efficaces Oui
Évitez des poids de ressources trop lourdes Oui
Defer offscreen images Oui
Éliminez les ressources qui bloquent le rendu Partiellement
Réduisez la taille des ressources CSS Oui
Réduisez la taille des ressources JavaScript Oui
Supprimer les ressources CSS inutilisées En cours
Diffusez des images aux formats nouvelle génération Oui
Encodez les images de manière efficace Partiellement
Activez la compression de texte Oui
Dimensionnez correctement les images Oui, manuellement
Utilisez des formats vidéo pour le contenu animé Non
Évitez une taille excessive de DOM Non
La page n'utilise pas le protocole HTTP/2 pour toutes ses ressources Oui
La page n'utilise pas d'écouteurs d'événements passifs pour améliorer les performances de défilement Non
Le fichier robots.txt n'est pas valide Oui


Pour conclure, 2 points à retenir à propos de PageSpeed Insights qui est un bon outil, mais…

  • la note est à relativiser ;
  • rien ne remplace l’œil et l’avis d’un expert pour savoir quelles optimisations appliquer et comment !

Pour savoir concrètement comment Fasterize peut
améliorer votre vitesse de chargement sur mobile et desktop :

Demandez une démo

 


Hello SMX Paris !