LCP à 2,1 s sur mobile, quatre ans après l'audit
Trois sites en un, environ 25 URL et un blog qui n'avait l'air rapide que dans Lighthouse.
WordPress, une app distincte pour les profils et un blog
Le site de Voices regroupait en réalité trois sites : un site marketing sous WordPress, une app distincte pour les profils de comédiens voix off, et un blog avec podcasts. J'ai passé en revue environ 25 URL sur l'ensemble.
Layout shifts sur la page d'accueil, profils lents et un 94 sur le blog dont les visiteurs n'ont jamais profité
Je me suis posé avec leurs développeurs pour leur montrer quoi corriger en priorité, tout en leur transmettant les bons réflexes. Ils ont foncé : peu après, leur responsable du développement m'envoyait la liste de ce qu'ils avaient déployé, jusqu'à fetchpriority sur les images qui comptent.
Tom, leur développeur marketing, avait intégré une bonne partie de mes recommandations avant de partir, et en mars 2022, les profils étaient souvent dans le vert sur PageSpeed. Puis une série de nouvelles fonctionnalités a été déployée sur le site, et les profils ont rechuté. En mai, leur responsable du développement, Jayme Cousins, m'a écrit : pouvais-je y rejeter un œil ? Le lundi suivant, je lui ai envoyé trois gains rapides. Les scripts de connexion Google et Apple étaient devenus render blocking après la désactivation de Rocket Loader de Cloudflare ; il fallait donc les placer à la fin du body avec defer. Le logo avait besoin d'un width et d'un height. Et le LCP était une image d'arrière-plan CSS, qu'il fallait transformer en vraie image avec un preload. On a trouvé un créneau le mercredi, entre leur Victoria Day et mon jeudi de l'Ascension (ma femme n'aurait pas apprécié que je travaille un jour férié). Ce jour-là, j'ai aussi envoyé un exemple de code, petit cache de page inclus.
En août, le head d'un profil pesait 40 kB au lieu de 251 kB.
- 251 kB
- taille du head
- 28
- règles @font-face
- 2
- scripts bloquants
- 40 kB
- taille du head
- 0
- règles @font-face
- 0
- scripts bloquants
Sur desktop, on peut observer l'effet de cette deuxième phase. En avril, après le déploiement des nouvelles fonctionnalités, le Time to First Byte a culminé à 1,1 seconde. En octobre, il était tombé à 0,8 au vert, et le LCP était passé de 1,8 seconde en mars à 1,5.
Quatre ans plus tard, j'ai vérifié à nouveau Voices dans CrUX pour cette page : tout est au vert sur toute la ligne. Sur mobile, le LCP se situe entre 2,0 et 2,3 secondes, l'INP entre 150 et 200 ms, et le CLS est resté à 0 chaque mois depuis un an. Cette partie-là, c'est entièrement à leurs développeurs qu'on la doit.
« Arjen a joué un rôle déterminant dans l'optimisation de nos Core Web Vitals. Il a permis à nos pages de profil stratégiques de repasser au vert sur PageSpeed. Ce que j'apprécie le plus chez lui, c'est son approche très concrète : il ne se contente pas d'identifier les goulots d'étranglement, il travaille directement avec notre équipe de développement jusqu'à ce que les correctifs soient réellement en production. »
Jayme Cousins, responsable du développement, Voices.com
Un plugin qui retarde les scripts trompe Lighthouse
Le test note ce qu'il voit, et il n'a jamais vu ces scripts. Le téléphone d'un visiteur télécharge et exécute toujours chacun d'entre eux.
Un layout shift en cachait trois
Le rapport donnait un seul chiffre de CLS. La trace montrait trois shifts d'affilée, et chacun nécessitait son propre correctif.
Formez les développeurs et le site reste au vert
L'audit date de 2022. Leurs développeurs ont maintenu le site dans le vert, et CrUX passe toujours sur mobile.
Vert dans Lighthouse, rouge dans Search Console ?
J'identifie ce qui ralentit vos visiteurs et pourquoi, et vos développeurs reçoivent les correctifs dans l'ordre exact où les déployer.
D'autres résultats sur ma page clients.
