Il lazy-loading rimanda il download di qualcosa finché non è effettivamente necessario — di solito quando sta per entrare nella viewport durante lo scroll. Questo riduce il payload iniziale così la parte visibile della pagina si carica più in fretta.
Il browser lo fa nativamente con un solo attributo:
Mantieni sempre width/height così il browser riserva lo spazio (evita il layout shift). Non fare mai il lazy-load dell'immagine LCP — ritarda proprio la cosa che viene misurata.
Suddividi l'interfaccia pesante o usata di rado (modali, grafici) in un chunk separato caricato on demand:
// Invece di un import statico che viene incluso nel bundle principale:
const Chart = React.lazy(() => import("./Chart")); // chunk separato, scaricato quando renderizzato
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
L'import() dinamico dice al bundler di creare un file separato che viene scaricato solo quando <Chart> viene renderizzato per la prima volta.
Il lazy-loading è la vittoria più semplice e ad alto rendimento per una pagina pesante: meno da scaricare all'inizio significa LCP più veloce e meno JS da parsare. Gli intervistatori vogliono vederti non fare il lazy-load dell'immagine hero — un errore classico che danneggia proprio la metrica che stai cercando di aiutare.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona