Pourquoi la vitesse compte
La moitié des gens ferment un site web qui met plus de 3 secondes à charger. Tes visiteurs n’auront pas tous un téléphone neuf sur un Wi-Fi rapide – certains auront un vieux téléphone dans un train. Un chef de projet y pense aussi.
Bonne nouvelle : tu peux obtenir le plus gros gain de vitesse avec une seule chose – les images. Une photo directement du téléphone peut facilement faire 5 Mo ; un site web n’a besoin que d’un dixième de ça.
Montre-moi : mesurer avec Lighthouse
Lighthouse est un outil de mesure intégré à Chrome :
- Ouvre ton site web (la version en ligne, pas localhost).
- F12 → onglet Lighthouse → Analyze page load.
- Tu obtiens un score de 0 à 100 pour la performance, l’accessibilité, le SEO – et surtout, une liste de conseils précis sur quoi améliorer.
Les conseils les plus courants et quoi en faire :
| Conseil Lighthouse | Quoi faire |
|---|---|
| Properly size images | réduis tes images (voir ci-dessous) |
| Serve images in next-gen formats | enregistre-les en WebP |
| Image elements do not have width/height | ajoute les attributs width et height |
| Links do not have descriptive text | au lieu de « clique ici », dis où va le lien |
Réduis tes images
- Dimensions : un site web n’a besoin que d’environ 1200px de largeur (une photo hero) ou environ 600px (une photo normale). Tu peux redimensionner dans n’importe quel éditeur, même en ligne (par ex. squoosh.app).
- Format : WebP est environ un tiers plus petit que JPG à la même qualité.
- Lazy loading : les images en bas de page ne se chargent que quand le visiteur fait défiler jusqu’à elles :
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />À toi 💪
- Mesure ton site web avec Lighthouse et note ton score de performance – c’est ta ligne de départ.
- Trouve les 3 plus grandes images sur ton site web (F12 → onglet Network → trier par Size).
- Réduis-les (dimensions + WebP) et ajoute
loading="lazy"à tout sauf la première image en haut. - Mesure à nouveau et compare les scores. Écris dans
LAUNCH.md: avant → après. - Bonus : teste ton site web sur ton téléphone avec le Wi-Fi éteint. C’est comment ?
Ne t’attends pas à 100 points. Même les grands sites web marquent 70–90. Ce qui compte, c’est le progrès : passer de 60 à 85 est une victoire que les visiteurs remarqueront vraiment.
Vérifie : Tu connais ton score Lighthouse avant et après. Tes images sont redimensionnées, en WebP, et utilisent le lazy loading. Ton site web charge sensiblement plus vite sur mobile.
Ce que tu retiens de cette leçon
- Vitesse = les visiteurs restent. 3 secondes, c’est la limite.
- Lighthouse te dit exactement quoi améliorer.
- Le plus gros levier : des images plus petites (dimensions, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu