Performance Web : Guide complet d'optimisation

Chaque milliseconde compte

Amazon a calculé qu'une seconde de latence en plus = 1.6 milliard de dollars de ventes perdues par an. Même à notre échelle, la performance web n'est pas optionnelle. Voici les techniques que j'applique sur chaque projet.

1. Lazy Loading intelligent

Ne chargez que ce que l'utilisateur voit. React.lazy + Suspense sont vos meilleurs amis :

tsx
// ❌ Tout charger d'un coup
import { AdminDashboard } from './pages/AdminDashboard';
import { BlogPage } from './pages/BlogPage';
import { ProjectsPage } from './pages/ProjectsPage';

// ✅ Lazy loading — chaque page est un chunk séparé
const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));
const BlogPage = lazy(() => import('./pages/BlogPage'));
const ProjectsPage = lazy(() => import('./pages/ProjectsPage'));

// Avec un fallback élégant
<Suspense fallback={<PageSkeleton />}>
  <Routes>
    <Route path="/admin" element={<AdminDashboard />} />
    <Route path="/blog" element={<BlogPage />} />
  </Routes>
</Suspense>

Impact réel

Sur un de mes projets, le lazy loading a réduit le bundle initial de 340KB à 89KB — soit un gain de 74%.

2. Optimisation des images

Les images représentent souvent 60% du poids d'une page. Voici ma checklist :

html
<!-- ❌ Image brute, non optimisée -->
<img src="photo.png" />

<!-- ✅ Image optimisée avec toutes les bonnes pratiques -->
<img
  src="photo.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w"
  sizes="(max-width: 768px) 400px, 800px"
  alt="Description détaillée"
  loading="lazy"
  decoding="async"
  width="800"
  height="600"
/>

Règles d'or :

• WebP ou AVIF au lieu de PNG/JPEG (30-50% plus léger)
• srcset pour servir la bonne taille selon l'écran
• loading="lazy" pour les images hors écran
• width/height explicites pour éviter le layout shift

3. Mémoïsation stratégique

useMemo et useCallback ne sont pas des silver bullets. Utilisez-les seulement quand c'est justifié :

tsx
// ❌ Mémoïsation inutile — le calcul est trivial
const fullName = useMemo(() => first + ' ' + last, [first, last]);

// ✅ Mémoïsation justifiée — calcul coûteux
const sortedItems = useMemo(() => {
  return items
    .filter(item => item.active)
    .sort((a, b) => b.score - a.score)
    .slice(0, 100);
}, [items]);

// ✅ useCallback pour les callbacks passés à des listes
const handleDelete = useCallback((id: string) => {
  setItems(prev => prev.filter(item => item.id !== id));
}, []);

4. Le CSS qui tue la performance

Les animations CSS peuvent bloquer le thread principal. Utilisez toujours transform et opacity :

css
/* ❌ Anime des propriétés coûteuses */
.card:hover {
  margin-top: -10px;
  width: 110%;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* ✅ Utilise uniquement transform et opacity */
.card:hover {
  transform: translateY(-10px) scale(1.02);
  opacity: 0.95;
}

5. Prefetching intelligent

Anticipez les actions de l'utilisateur :

tsx
// Prefetch au survol d'un lien
<Link
  to="/projects"
  onMouseEnter={() => {
    // Le composant sera prêt quand l'utilisateur cliquera
    import('./pages/ProjectsPage');
  }}
>
  Voir les projets
</Link>

Métriques à surveiller

Conclusion

La performance n'est pas une feature qu'on ajoute à la fin. C'est une discipline qu'on intègre dès le premier commit. Commencez par mesurer (Lighthouse, Web Vitals), puis optimisez ce qui a le plus d'impact.