Lazy loading

Le lazy loading (chargement différé) consiste à ne charger une ressource — image, vidéo, iframe, composant JavaScript — qu'au moment où elle devient nécessaire, typiquement quand elle approche du viewport. Plutôt que de tout télécharger à l'arrivée sur la page (et de plomber le LCP avec 50 images dont 45 ne seront jamais vues), on ne charge que ce qui est visible immédiatement, et on charge le reste à la volée pendant que l'utilisateur scrolle.

Côté images, c'est devenu trivial depuis 2020 : l'attribut HTML natif `loading="lazy"` est supporté par tous les navigateurs modernes — il suffit de l'ajouter à `<img>` et `<iframe>`. Le composant Image de Next.js le fait par défaut sauf si vous mettez `priority` (à réserver à l'image hero pour le LCP). Côté JavaScript, on parle de code splitting : `dynamic import()` charge un module à la demande, React.lazy + Suspense fait pareil pour des composants. Sur Next.js, `next/dynamic` permet de charger un composant côté client uniquement quand il est rendu.

Les pièges : (1) lazy-loader l'image hero — vous tuez votre LCP, il faut au contraire la précharger, (2) lazy-loader trop tard, l'utilisateur voit un flash blanc en scrollant — utiliser `loading="lazy"` natif ou un Intersection Observer avec une marge généreuse (200-500 px), (3) oublier de mettre `width`/`height` ou `aspect-ratio`, ce qui crée un mauvais CLS. Bien fait, le lazy loading divise par 2-5 le poids initial d'une page sans dégrader l'UX. C'est un des leviers de base qu'on applique sur tous nos sites sur-mesure et qu'on ajuste pendant un audit gratuit.