.

Test de vitesse - Outils et métriques

Les outils de test de performance web et de vitesse de chargement font résolument partie du quotidien des équipes Technique, Commerciale et Client de Fasterize. Waterfalls et filmstrips sont scrutés à la loupe pour tous nos clients, avant, pendant et après le déploiement de notre solution SaaS, et pour l’application des conseils de nos audits de web performance.

Comment nos experts utilisent les solutions de monitoring, et en quoi ce sont de véritables piliers pour améliorer les performances, le référencement et les conversions de nos clients (5% à 10% minimum, avec des pics jusqu'à 30% !) ? 

Lumière sur les données que nous suivons, et comment nous les exploitons.

Les tests de vitesse avant de déployer la solution SaaS de Fasterize

Avant de déployer la solution SaaS de Fasterize, nous évaluons les gains de performance technique et business potentiels.
“En plus des Core Web Vitals qui sont devenus des métriques UX et SEO incontournables, nous analysons une sélection de KPI pour évaluer les performances des sites : Time To First Byte, Start Render et Speed Index”, indique Nicolas Hodin, Customer Success Engineer Expert. “Aussi, le filmstrip nous aide à visualiser le rythme de construction des pages telles que les voient les visiteurs des sites, avec et sans les optimisations apportées par notre solution SaaS. Nous testons ainsi la vitesse de chargement d’une page en faisant varier les paramètres de nos fonctionnalités pour trouver les meilleurs ajustements, une tâche qui a vocation à être automatisée.”

Depuis l’annonce de l’algorithme Page Experience update par Google, les requêtes autour de l’optimisation des Core Web Vitals et du score Google PageSpeed Insights n’ont cessé d’augmenter. Les outils d’analyse permettent de collecter des données détaillées, indispensables à la résolution des problèmes de vitesse sur les sites, et pour tester les leviers les plus efficaces.

Waterfall WebPageTest - Outil de test de vitesse

En pratique, les équipes de Fasterize testent en priorité une sélection de pages types les plus importantes pour un site internet, telles que la homepage, les pages catégorie, les pages produit ou bien encore les pages de résultats du moteur de recherche interne (des pages cruciales, surtout pour les sites e-commerce), avant et après optimisation de la vitesse d’affichage.

Pour que le site soit rapide dans tous les contextes de navigation et pour tous les appareils, le test des pages est lancé dans différents contextes : mobile et desktop, avec une qualité de réseau plus ou moins bonne (3G, 4G, ADSL,…), avec et sans bannière de consentement aux cookies, avec et sans scripts (l’onglet Block de Web Page Test permet par exemple de simuler une navigation avec ou sans les scripts activés)…
Les agents déployés partout dans le monde sont également très utiles pour les sites internationaux, afin d’évaluer l’impact des optimisations selon les zones géographiques - car au-delà de l’optimisation front-end, Fasterize assure aussi un rôle de CDN avec plus de 400 points de présence répartis sur tous les continents, afin d’offrir une expérience utilisateur optimale pour les visiteurs du monde entier.

Chez nos futurs clients, ces données relatives à la vitesse dans différents contextes de navigation permettent d’anticiper les gains de performance web, en déduire l’impact sur le chiffre d’affaires, et donc estimer facilement le ROI de la solution SaaS.
C’est ce qu’a fait Minelli, dont l’équipe e-commerce a évalué qu’à partir de +0,5 % de conversions, la solution serait rentabilisée - autrement dit, le ROI était garanti.
Quant à Alltricks, le site e-commerce rentabilise la solution pas moins de 22 fois !

Comparatif des performances avec et sans Fasterize - Core Web Vitals

Comparatif des performances d’une page avec et sans optimisations front-end,
via l’outil Insights de Fasterize qui communique avec l’API Web Page Test.
Le pourcentage en vert indique les gains de performance obtenus grâce aux optimisations apportées par la solution SaaS

Ainsi, les outils de monitoring et d’analyse des performances servent à recueillir des données essentielles pour la compréhension du contexte client, et sur les moyens de résoudre les problèmes de performance.

En somme, toutes les informations sont à portée de main pour améliorer l'expérience utilisateur, et pour améliorer le score Google PageSpeed Insights - comme par exemple GO Sport qui a connu une augmentation de taille pour son PageSpeed Insights : +15 points grâce à l’automatisation de l’optimisation de la vitesse de chargement.

Focus sur le waterfall : une radiographie des performances des pages web

Avant d’entreprendre quoi que ce soit pour optimiser la vitesse de chargement, le waterfall permet de détecter problèmes de performance et les points faibles, ce qui bloque le rendu… bref, ce qu’il faut optimiser. Alors, pour une radiographie complète d’une page web, rien de tel qu’un waterfall !

C’est aussi un point de repère pour évaluer l’efficacité des optimisations une fois qu’elles sont appliquées automatiquement par notre CDN Next-Gen, ou par les équipes techniques en interne chez nos clients suite à un audit webperf, ce dont nous allons reparler un peu plus loin.

Le contenu d’un waterfall sert aussi bien à creuser les aspects techniques d’une page qu’à délivrer un diagnostic et des conseils sur la base d’éléments facilement compréhensibles par les équipes métier chez un client.

Sur le plan technique, le contenu d’un waterfall indique précisément ce qui peut bloquer le chemin critique. Quelques exemples de ce qu’on peut observer sur un waterfall avec l’outil Web Page Test, référence dans la communauté webperf : 

  • s’il comporte beaucoup de barres roses, c’est le signe de problèmes liés aux scripts qui doivent être optimisés ;
  • si certaines ressources sont représentées par de longues barres horizontales, c’est aussi le signe qu’il y a des optimisations (optimiser les images, les fonts…)

Test de vitesse : waterfall de page web sans Fasterize - HTTP/1.1.Waterfall d’une page testée sans Fasterize, en HTTP/1.1.
le temps de réponse serveur (TTFB) est très long

 

Test de vitesse - Waterfall de page web testée avec Fasterize - TTFB optimiséWaterfall d’une page testée avec Fasterize :
le temps de réponse serveur (TTFB) est divisé par 6,
et la totalité de la vitesse de chargement de la page optimisé

 

Test de vitesse - pages testée sans Fasterize avec JavaScripts lourdsWaterfall d’une page testée sans Fasterize :
avec de nombreuses requêtes vers des domaines externes,
des JavaScripts chargés très tard, et des fichiers CSS lourds qui sont à optimiser

 

Test de vitesse - Waterfall de page web optimisée avec Fasrterize et la fonctionnalité Early HintsWaterfall d’une page testée avec Fasterize :
l’ensemble des requêtes est optimisé pour un temps de chargement plus court.
Les ressources critiques sont chargées 100 ms avant la réception des données HTML par le navigateur (grâce à la fonctionnalité Early Hints)

Mesurer les Core Web Vitals pour améliorer l’expérience utilisateur et le SEO 

Depuis que Google a intégré la vitesse à son algorithme, les Core Web Vitals sont au centre de l’attention pour les communautés webperf et SEO. Les outils de test et d'analyse des performances web (Web Page Test, Pingdom, GTmetrix, Dareboost… mais aussi Lighthouse, PageSpeed Insights, Google Search Console, les Dev Tools de Chrome…) délivrent des informations précieuses pour analyser les métriques UX mises en avant par Google : 

  • LCP
  • CLS
  • FID
  • ainsi que le sur le Total Blocking Time (TBT), l’équivalent du FID pour les tests en environnement synthétique

Leur optimisation contribue à un meilleur référencement.

Dans ces outils de test, on retrouve les données essentielles pour observer les éventuels décalages de mise en page au cours du chargement (CLS), savoir comment améliorer la vitesse d’affichage de l’élément le plus important sur la page (LCP), ou identifier ce qui empêche la page de répondre aux exigences de Google (et évidemment des utilisateurs) en termes d’interactivité (FID / TBT). 

Enfin, nos experts s’appuient sur les fonctionnalités avancées de outils de test (par exemple, les scripts de Web Page Test) pour mesurer les performances des pages en tant que visiteurs, mais aussi en tant que robot de moteur de recherche, afin d’identifier et appliquer les améliorations nécessaires pour l’UX comme pour le SEO. En pratique, en termes de référencement, après avoir optimisé automatiquement leurs sites :

  • TUI.fr a vu son nombre de pages considérées comme rapides par Botify multiplié par 2
  • Alltricks a augmenté son trafic SEO de 25%
  • et SantéVet a multiplié par 4 le nombre de pages considérées comme rapides sur la Search Console de Google.

Quels que soient les objectifs de nos clients, avant de déployer notre solution sur la totalité du trafic d’un site web, nous vérifions l'impact de toutes les fonctionnalités de notre plateforme, et surtout, leur bon fonctionnement les unes par rapport aux autres : compression et recadrage intelligent des images aux formats nouvelle génération (WebP, AVIF), lazyloading, stratégie de cache, CDN, priorisation des JS, préchargement des ressources clés… (une liste évidemment loin d'être exhaustive). Et après avoir déployé toutes ces optimisations, comment s’assurer qu’elles sont efficaces dans le temps, et que tous les visiteurs en profitent ? Grâce à… des tests de performance.

Monitorer l’impact des optimisations sur la vitesse de chargement pour une amélioration continue des performances

Une fois les pages d’un site web optimisées par Fasterize, l’accent est mis sur des problématiques de performance web de plus en plus fines, pour continuer d’apporter des solutions toujours plus poussées. Par exemple, l’impact des ressources tierces sur le chemin critique, l’impact de la stratégie de chargement des fonts sur la vitesse d’affichage… Il y a toujours des millisecondes à économiser, et les outils de test de vitesse restent le meilleur moyen de savoir ce qui peut être amélioré.

Les résultats de ces tests de vitesse a posteriori alimentent aussi les rapports remis régulièrement pour un suivi détaillé des performances, accompagnés d’une analyse et de conseils personnalisés pour le paramétrage des différentes fonctionnalités de la plateforme.
Outre les KPI techniques, ces rapports permettent aussi de souligner l'évolution des données business, comme par exemple pour Mecatechnic qui enregistré +15% de conversions sur mobile, ou encore pour Carré Blanc qui a vu ses conversions augmenter de 25% depuis l’implémentation de Fasterize.

Grâce à ces audits détaillés et aux conseils dans le cadre de l’accompagnement par nos experts, l’impact des optimisations webperf peut être compris et suivi par toutes les équipes, métier comme techniques, et le contenu des rapports partagé en interne. C’est essentiel pour diffuser la culture webperf; monter en compétence, et en faire un sujet prioritaire.

Enfin, les outils de monitoring webperf sont aussi la pierre angulaire de nos prestations de conseil pour les équipes qui souhaitent optimiser leurs performances en interne.

Audit webperf : tester la vitesse d’un site pour des conseils personnalisés d’optimisation front-end

Un projet webperf démarre forcément par une analyse des résultats de tests de vitesse, car on ne peut améliorer que ce qu’on sait mesurer. En effet, pour savoir où aller, il faut savoir d’où l’on part.

Si la web performance vous intéresse, vous avez certainement déjà utilisé PageSpeed Insights, l’outil gratuit de Google qui indique un score de performance, et qui propose des conseils d’optimisation front-end.
Si le score PageSpeed Insights de Google est facile à lire au premier abord - une note entre 0 et 100 en rouge, orange ou vert -, les conseils d’optimisation doivent être considérés avec beaucoup de recul, car ils sont génériques. Le contexte métier et technique de votre site n’est pas pris en compte, et vous avez tout intérêt à consulter des experts avant de suivre ces conseils pour améliorer vos performances.

Certaines équipes disposent des ressources et de l’expertise nécessaires pour implémenter les bonnes pratiques et les techniques d’optimisation front-end, et surtout, pour les maintenir à long terme. Cela implique de consacrer du temps à la résolution des éventuels bug ou régressions, et de faire une veille constante sur les nouvelles techniques et les nouveaux formats pour les implémenter.

Pour accompagner les équipes qui ont les ressources en interne pour optimiser leur vitesse de chargement, Fasterize propose des audits webperf et des prestations de conseil extrêmement poussées. Dans ce cas, l’usage des outils de test de performance web va encore plus loin que pour configurer le moteur de Fasterize, en vue d’une application manuelle.

Pour le quotidien sportif L’Equipe, les conseils du rapport d’audit webperf ont été le point de départ d’un bond technologique de taille qui a impliqué une refonte totale du socle technique ; pour la marque d’équipements sportifs Rossignol, les optimisations recommandées ont permis de répondre aux enjeux UX et business en divisant par 10 les temps de chargement à l’époque ; quant au quotidien Le Parisien, une analyse détaillée des performances a permis de comprendre et de remédier à la dégradation des KPI webperf et des Core Web Vitals malgré une refonte récente de leur site internet.

Les tests de vitesse sont ainsi présents tout au long du cycle de la relation client, pour viser des performances toujours meilleures.
De l’avant-vente au suivi mensuel suite au déploiement de notre solution SaaS d’automatisation des techniques d’optimisation webperf, ou pour des conseils sur l’optimisation de la vitesse de chargement appliqués en interne, pas une journée ne se passe sans cliquer sur “Start test” afin de :

  • tester la vitesse des pages web dans différentes conditions (qualité de réseau, appareils mobile ou desktop, zone géographique, avec ou sans bannière de consentement aux cookies…) pour s’assurer que le site est rapide pour tous les visiteurs ;
  • valider que les seuils définis par Google sont respectés pour les Core Web Vitals et que les pages sont bien Mobile Friendly ;
  • analyser le contenu des waterfalls, et identifier les ressources qui ralentissent le chargement des pages pour les optimiser ;
  • observer les filmstrips pour une visualisation concrète de l’expérience des utilisateurs.

Pour approfondir vos connaissances sur les métriques essentielles à suivre
et comment les optimiser :

 Télécharger le livre blanc