Le point de départ
Vous pouvez tester votre propre site ici même, et voir le même test appliqué à cette page.
Les contraintes
- 14 Ko pour l’accueil. La page d’accueil (texte et mise en forme) doit tenir dans le tout premier échange avec le navigateur : 14 Ko compressés au maximum.
- Lisible par tout le monde. Le diagnostic s’adresse à un dirigeant : pas de jargon, des priorités claires.
- Rien de conservé. Aucune donnée conservée, aucun traceur, et des chiffres mesurés par Google plutôt qu’annoncés.
Mes choix, et pourquoi
- Des pages statiques, sans framework dans le navigateur. Astro produit du HTML prêt à afficher ; il reste quelques kilo-octets de JavaScript, uniquement pour le diagnostic et la bascule de mode.
- Un budget de poids vérifié à chaque construction. Si l’accueil dépasse 14 Ko, ou le total 90 Ko, la mise en ligne échoue. Le poids ne peut pas dériver sans que je le voie.
- Les règles du diagnostic isolées du reste. La traduction des mesures de Google en phrases claires et en priorités vit dans un domaine en TypeScript pur, sans aucune dépendance, couvert par des tests.
- Un seul fichier qui connaît Google. L’appel à PageSpeed Insights passe par un adaptateur : le remplacer par une API maison ne toucherait rien d’autre.
- Un mode dev. Un clic, et la même page montre comment elle est construite : composants, architecture, poids réels.
- Des animations limitées à transform et opacity. Ce sont les seules que la carte graphique gère seule : la page n’est jamais recalculée pendant un mouvement.
- Des polices réduites aux caractères du français, et une politique de sécurité (CSP) stricte générée automatiquement.
Ce que ça a donné
100 sur 100 dans les quatre catégories de Google PageSpeed Insights (performance, accessibilité, bonnes pratiques, référencement), et un affichage du contenu principal en 1,4 s sur un téléphone simulé en 4G lente. Chaque modification passe par les tests et le contrôle de poids avant d’être publiée.
Ce que je referais autrement
Fixer le budget de poids dès le premier jour. Je l’ai ajouté en cours de route : il a ensuite fallu alléger la mise en forme pour tenir dedans, puis sortir du premier affichage les styles du rapport d’analyse, qui ne servent qu’une fois le diagnostic lancé.
La suite
- Un nom de domaine définitif.
- De nouveaux projets clients, présentés de la même façon.