Cos'è il Lazy Loading?

Il Lazy Loading differisce il caricamento delle risorse non necessarie per la vista iniziale, fino al momento in cui diventano rilevanti. Negli storefront commerce si applica a immagini, iframe, widget di terze parti e componenti JavaScript sotto la piega. Se fatto bene, riduce drasticamente i byte sul percorso critico e incide direttamente su LCP e INP.

Definizione

Per immagini e iframe, l'attributo loading="lazy" è supportato nativamente in tutti i browser moderni e indica al motore di differire le richieste finché la risorsa non si avvicina al viewport. Per i componenti, framework come Next.js, Nuxt e Remix offrono import dinamici con boundary di caricamento espliciti, spesso abbinati alla Intersection Observer API per attivare l'hydration solo quando necessario. Il Lazy Loading è concettualmente distinto dal code-splitting: lo splitting crea i chunk, il lazy loading decide quando richiederli. I due lavorano insieme per controllare quanto first-party-JS raggiunge il browser in un dato momento.

Perché è importante

Un caricamento eager senza limiti è la causa più comune di un LCP scarso sulle PLP e sulle landing page basate su CMS. Un carosello hero che recupera venti immagini prodotto in anticipo, un widget di recensioni di terze parti che spedisce 300 KB di JS, o una chat bubble che si avvia immediatamente, competono tutti per banda e tempo del thread principale. Il Lazy Loading recupera quel budget per le risorse che contano davvero al primo paint. Riduce anche il carico sul server, abbassa l'egress del content-delivery-network-cdn e migliora la costanza dei Core Web Vitals sulle reti lente. L'insidia è la correttezza: applicare il lazy loading proprio all'immagine LCP peggiorerà la metrica, quindi l'asset più in alto deve restare eager.

Casi d'uso

Sulle PLP, solo la prima riga di immagini prodotto viene caricata in modalità eager, mentre il resto arriva tramite lazy loading nativo. Recensioni, prodotti correlati, caroselli del motore di raccomandazione ed embed social-commerce vengono differiti finché non entrano nello scroll visibile. I widget di chat, gli snippet di ab-testing e gli script di personalizzazione possono essere inizializzati dopo l'idle. In Astro, l'islands-architecture tratta l'interattività stessa come qualcosa da caricare in lazy tramite direttive client:visible. Combinato con pipeline di image-optimization e shell renderizzate all'edge, il lazy loading è una delle ottimizzazioni più economiche e con il ROI più alto che un team headless possa mettere in produzione.

Correlati

Scopri Composable Headless Frontend · Performance and Core Web Vitals.