Performance
Des pages rapides, mesurables et optimisées.
Performance web
La performance n'est pas un nice-to-have. C'est un facteur de conversion, de SEO et d'expérience utilisateur. Google en fait un critère de ranking, et les utilisateurs n'attendent pas.
Nos cibles
On mesure sur mobile (le vrai test), pas sur desktop avec la fibre :
| Métrique | Cible | Ce que ça mesure |
|---|---|---|
| LCP | < 2,5s | Temps avant que le contenu principal soit visible |
| INP | < 200ms | Réactivité aux interactions |
| CLS | < 0,1 | Stabilité visuelle (pas de saut de layout) |
| FCP | < 1,8s | Premier contenu affiché |
| Poids initial | < 300KB | Données transférées au premier chargement |
Ces seuils ne sont pas arbitraires — ce sont les recommandations Google pour être dans le "bon" (vert).
Comment on optimise
Images
Les images sont souvent 60-80% du poids d'une page. On fait attention :
- Formats modernes — WebP ou AVIF, pas de PNG/JPEG non optimisés
- Responsive — plusieurs tailles selon le viewport
- Lazy loading — on ne charge que ce qui est visible
- Dimensionnement explicite — width/height pour éviter le CLS
Fonts
Les polices peuvent bloquer le rendu :
- Hébergement local — pas de dépendance à Google Fonts
- Preload — on charge les fonts critiques en priorité
- Subset — on n'inclut que les caractères nécessaires
- font-display: swap — le texte s'affiche immédiatement
JavaScript
Le JS est souvent le coupable des sites lents :
- Code splitting — on ne charge que le code de la page courante
- Lazy loading — les composants lourds ne chargent que si nécessaires
- Bundle analysis — on surveille la taille des dépendances
- Pas de JS non critique au-dessus de la ligne de flottaison
Rendu
Le choix du mode de rendu impacte directement la performance :
- SSG/ISR quand c'est possible — des fichiers statiques, c'est imbattable
- Streaming pour le SSR — le contenu arrive progressivement
- Prefetch — on précharge les pages probables
Comment on mesure
En développement
- Lighthouse dans Chrome DevTools — score sur 100, détail des problèmes
- Bundle analyzer — visualisation de ce qui prend de la place
En staging
- WebPageTest — mesures plus fiables avec différentes connexions
- Tests sur vrais devices — pas juste l'émulateur
En production
- Real User Monitoring (RUM) — les vraies performances de vos vrais utilisateurs
- Core Web Vitals dans Search Console — comment Google voit votre site
- Alertes — notification si les métriques se dégradent
Les erreurs qu'on évite
- ❌ Charger des librairies entières pour une petite feature
- ❌ Animations qui bloquent le thread principal
- ❌ Images non optimisées uploadées depuis le CMS
- ❌ Fonts qui bloquent le rendu pendant 3 secondes
- ❌ Third-party scripts non différés (analytics, chat, etc.)
C'est un travail continu
La performance se dégrade naturellement au fil du temps. Nouveaux contenus, nouvelles features, nouvelles dépendances... On la surveille et on maintient les standards.