Un site rapide sans renoncer au design
Images, polices, JavaScript, mesures sur un vrai téléphone : les quelques points qui font la différence entre un beau site lent et un beau site rapide.
On oppose souvent un beau site et un site rapide. Dans les faits, la plupart des lenteurs viennent de quelques erreurs faciles à éviter. Voici celles que je surveille sur chaque projet.
Les images d’abord
Sur un portfolio, les images représentent l’essentiel du poids. Je les exporte en WebP ou AVIF, à la bonne taille, et je laisse le navigateur choisir la version adaptée à l’écran.
| Avant | Après |
|---|---|
| PNG de 6 Mo | WebP de 200 Ko |
| Une seule taille pour tous les écrans | Plusieurs tailles servies selon l’écran |
| Tout chargé au départ | Chargement différé hors de l’écran |
Les polices ensuite
Une ou deux familles, en sous-ensemble, avec un affichage de secours pendant le chargement. Chaque graisse ajoutée est un fichier de plus à télécharger.
Le JavaScript en dernier
Tout ce qui peut être rendu côté serveur l’est. Le JavaScript du navigateur est réservé à ce qui est vraiment interactif.
Mesurer sur un vrai téléphone
Les scores obtenus sur un ordinateur récent sont trompeurs. Je teste sur un téléphone moyen, avec une connexion lente simulée.
- affichage du contenu principal
- < 2,5 s
- réponse à une interaction
- < 200 ms
- décalage de mise en page
- < 0,1
En résumé
- Des images compressées et dimensionnées.
- Peu de polices, chargées proprement.
- Du JavaScript seulement là où il sert.
- Des mesures sur un appareil réaliste.
