Dans le premier volet de notre dossier spécial soldes 2019, nous avons dressé un état des lieux de la vitesse de chargement des sites du secteur e-commerce en comparant les performances avant et pendant les soldes. Passons à présent au focus sur une sélection de sites retail dont nous avons analysé les actions webperf et leurs retombées.
3 Suisses - le changement c’est maintenant
Revenu d’un Speed Index moyen de 9 231 en décembre 2018 vs. 4 327 pendant les soldes, 3 Suisses semble avoir mis en œuvre un chantier webperf qui s’est révélé payant en fin d’année 2018. On le voit particulièrement bien sur la comparaison des filmstrips ci-dessous qui représente les étapes du chargement de la page (le 1er jour des soldes est en haut, et en bas le mois de décembre. Vous pouvez cliquer sur l’image pour voir le détail) :
Des changements sont survenus entre le 18 et le 19 décembre, essentiellement sur le poids des images (le poids des pages a chuté de 43% entre décembre et janvier). Par exemple, sur la homepage, elles sont passées de 3,5Mo (ou 6Mo décompressées) à 1,25Mo.
Néanmoins, si ces efforts louables ont permis d’améliorer le Speed Index, le Start Render n’a pas bougé car le reste n’a pas vraiment été optimisé.
- 18/12/2018 :
- 19/12/2018 :
Le code a changé, mais aussi l’infrastructure en passant d’un CDN à des serveurs Varnish classiques, et nous notons aussi un passage de HTTP/1.1 à HTTP/2 (peut-être même un nettoyage de printemps avant l’heure avec un changement d’hébergeur ?).Puis, entre le 19 décembre et le 09 janvier, 3 Suisses semble avoir déployé une nouvelle version de son site. Ce qui nous a mis la puce à l’oreille ? La home totalement réécrite et pas seulement les images, cette fois. Peu de doute possible : il doit bel et bien s’agir d’une refonte.
Il n’en fallait pas plus pour que l’amélioration du Speed Index s’en ressente en grande partie dûe au Start Render qui gagne 2 secondes.
NB : le gain réel est légèrement moins important car dans les versions antérieures, notre outil de mesure prenait en compte des requêtes OCSP désormais absentes de la nouvelle version du site.
Suite à cette refonte, le score LightHouse est passé de 24 à 78, et toutes ces optimisations ont profité au Time To Interactive (TTI) qui a baissé en conséquence.
Saluons ces efforts, bien qu’il reste encore de la marge pour pousser davantage les optimisations.
Comme on dit en Suisse : “Briser la montre n'arrête pas le temps qui fuit”
Sandro et Minelli - le GIF m’a tuer
Sandro enregistre une amélioration de son TTI à l’occasion des soldes, mais pas de quoi crier victoire : il est passé de 21 à 16 secondes, soit 24% en moins, ce qui reste malgré tout conséquent (le TTI moyen, sur cette période est de 13 875).
Pour les soldes, nous avons notamment remarqué un coup de balai sur les GIF animés : exit la robe à 4Mo ici et les paillettes à 6Mo ici.
Minelli aussi a pris soin d’évacuer les GIF animés qui rendaient la homepage très lourde :
On voit bien ici que la bande passante (pas élevée en 3G) était totalement saturée :
Pourquoi ? A cause d’un phénomène étrange : ce “double GIF” chargé à la fois en version desktop et mobile quelle que soit la connexion, le device, les conditions de navigation... et dont on mesure les effets redoutables ici. Pour les utilisateur.rice.s sur mobile, il fallait vraiment s’accrocher. Et quand on sait que 53% des visiteurs d’une page mobile s'en vont si elle met plus de 3 secondes à se charger... Heureusement, on respirait un peu mieux à partir du début des soldes.
A toutes fins utiles, et ce n’est plus un secret pour grand monde, le MP4 permet de réduire le poids des animations à quelques centaines de Ko, soit environ 5% du poids de départ… C’est trop dommage de s’en priver.
Les GIF, c’est lourd
Le Slip Français - le picto de l’enfer
Nous avons noté des améliorations sur le site du Slip Français à l’occasion des soldes. Ce site partait avec Speed Index de 24 000 en décembre 2018 et le poids moyen des pages s’élevait alors à de 34Mo. 34Mo ? Comment ? Pourquoi ? Est-ce un oiseau ? Est-ce un avion ? Non, c’est SuperPicto ! Même un escadron de pictos pesant chacun plus de 10Mo :
SuperPicto a depuis été mis au pain sec et à l’eau, retrouvant un poids de forme de 640Ko. Mais en poussant un peu, il pourrait même descendre à 2Ko s’il était en SVG.
Une belle histoire qui nous rappelle qu’on peut mettre tout ce qu’on veut en place : CDN, templates de compétition, meilleures pratiques du monde… le diable est dans les détails (et ici dans les pictos).
Comment éviter ce genre de déconvenues ? Eh bien en automatisant l’optimisation des images. Cette fonctionnalité fait partie des nombreux avantages qu’offre notre plateforme. Economiser du temps, des efforts, et améliorer l’expérience utilisateur, c’est si simple.
Sephora - ne pas pousser mémé dans les orties
Nous avons observé +16% sur le Speed Index de la page liste pendant les soldes, +18% pour la page produit et... +46% pour la home !
Toutefois, pour cette dernière, le problème semble plutôt venir de la façon de calculer le Speed Index si on observe de plus près les deux filmstrips ci-dessous. Gardons présent à l’esprit que le Speed Index comme le Time To Interactive sont des métriques qui nécessitent d’être mises en perspective, et dont l’interprétation peut être ardue dans certains cas.
Alors, que s’est-il passé ? En sortant notre loupe de détective, on constate que Sephora a désactivé la fonctionnalité de Push HTTP/2 entre le 26 décembre et le 9 janvier.
Pour rappel, avec le Push HTTP/2, certains JS et CSS critiques sont poussés par le serveur avant que le HTML ne soit servi, et arrivent donc plus tôt, on le voit bien sur cet extrait du Waterfall de Sephora :
Et c’est confirmé par les headers renvoyés :
Alors que sans Push… :
Le Push est censé être une optimisation, pourtant on voit bien que le Start Render arrive plus tard quand il est activé. Ainsi, le Push peut finalement se révéler contre-productif, ce qui expliquerait pourquoi il a été désactivé.
Comme le disait si justement Pirelli dans l’un de ses spots publicitaires : sans maîtrise, la puissance n’est rien. On vous laisse méditer.
Mesurez-vous l’impact de votre webperf sur votre business ?
Découvrez ici comment Petit Bateau a augmenté son taux de conversion de 10%
grâce à Fasterize.
