Le lazy-loading diffère le téléchargement de quelque chose jusqu'à ce qu'on en ait réellement besoin — généralement quand cela est sur le point d'apparaître au défilement. Cela réduit la charge initiale afin que la partie visible de la page se charge plus vite.
Le navigateur le fait nativement avec un seul attribut :
Conservez toujours width/height pour que le navigateur réserve l'espace (évite le layout shift). Ne lazy-loadez jamais votre image LCP — cela retarde précisément ce qui est mesuré.
Découpez l'UI lourde ou rarement utilisée (modales, graphiques) dans un chunk séparé chargé à la demande :
// Au lieu d'un import statique embarqué dans le bundle principal :
const Chart = React.lazy(() => import("./Chart")); // chunk séparé, récupéré au rendu
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
L'import() dynamique indique au bundler de créer un fichier séparé qui ne se télécharge que lorsque <Chart> s'affiche pour la première fois.
Le lazy-loading est le gain le plus simple et le plus rentable pour une page lourde : moins à télécharger au départ signifie un LCP plus rapide et moins de JS à parser. Les recruteurs veulent vous voir ne pas lazy-loader l'image hero — une erreur classique qui nuit à la métrique que vous cherchez à améliorer.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don