Lazy-loading e accelerazione UX

1) Obiettivi e principi

• Riduci TTI/LCP con un percorso critico.
• Stabilizza il layout (CLS basso) con dimensioni prevedibili.
• Mantieni la batteria e il traffico sul mobile.
• Avvia conversione: l'utente vede l'azione prima.

La priorità è il progresso, la prevedibilità. Prima contenuti critici, poi riempimento progressivo e post-aumento miglioramenti.

2) Percorso di rendering critico

HTML critico: esegue subito la marcatura «above-the-fold».
CSS critico: inline 10-15 KB; il resto è «media =» print' + swap/dosaggio.
JS come «defer »/« async», suddiviso in cianfrusaglie, scaricare la logica lungo le rotte.
Caratteri: 'font-display: swap'optional', pre-sistema WOFF2, fallback di sistema '.

3) Priorità delle risorse di rete

Precisnect a CDN/caratteri/immagini (TCP + TLS in anticipo).
DNS-prefetch per terzi domini.
Pratoad immagini critiche/caratteri/script.
Priority Hints ('influance = "high' low", 'fetchpriority = "high" "per l'immagine hero).
HTTP/3/QUIC: meno latitanza; CDN-edge è più vicino all'utente.
Criteri cache: «immutabile» per gli assetti versionati; ETag/Last-Modified corretti.

4) Progressive rendering e stato di avvio

Skeletons/Shimmer al posto degli spinner - progresso visivo senza salti.
Placeholders con dimensioni fisse (schede, miniature) - CLS zero.
Streaming/Chunked HTML: restituisci rapidamente l'ossatura e poi aggiungi i contenuti.
Ottimistica UI (attenta): azione immediata con convalida successiva.

5) Lazy-loading media

Le immagini sono «loading =» lazy «,» decoding = «async», formati di AVIF/WebP (follback JPEG/PNG).
Responsive: 'srcset '/' sizes'sotto DPR/larghezza differenti; non caricare 3 x dove basta 1 x.
Altezza prevedibile: «width/height» o CSS «aspect-ratio».
Video: "pratoad =" metadata ", poster poster poster, auto fuori viewport.
Icone: sprite/inline SVG; evitare richieste HTTP superflue.

6) Componenti e percorsi pigri

Code-splitting - Importazione dinamica attraverso percorsi/widget.
Componenti-isole/idrazione parziale: rianimare solo le aree interattive.
SSR/SSG + ISR - Reimposta l'HTML sul server, accresciuta.
Suspense/Defer (nella cornice utilizzata) - Decomposizione dei dati e dell'UI.

7) Elenchi e tabelle enormi

Virtualizzazione (windowing) - Rendering solo dell'area visibile + buffer.
Sovrascrivere - Mantieni la posizione durante il caricamento dei pacchetti.
Aggiornamenti Batch - Ridurre al minimo i ritocchi durante lo scroll.
Fissed-row height o «contain-intrinsic-size» per le quote prevedibili.

8) acceleratori CSS e browser

«content-visibility: auto» - Il browser ignora l'invisibile (calcolo minimo).
contain'/' will-change '- Limita l'area di influenza degli stili/layout.
Animazioni: Solo form/opacity; evitare effetti pesanti layout/paint.
Shadow e blur sono economici, soprattutto nelle liste.

9) Gestione degli eventi e del carico JS

Ascoltatori passivi scroll/tac ('{passive: true}').
Debounce/throttle su resize/scroll/processori.
Inizializzazione ritardata dei widget fuori viewport (IntersectionObserver).
Trasferimento di calcoli pesanti in Web Workers.

10) Contesto mobile

Rete: lente 3G/alta RTT - più aggressivo caricamento pigro.
Batteria e calore: limitare la frequenza dei timer, ridurre le animazioni FPS di sfondo.
Compressione: Brotli per il testo, correttamente «Accept-Encoding».
Prefetch Wi-Fi solo per transizioni probabili (storia click).

11) Disponibilità e SEO

Scheletro contenuto non interferisce con i lettori dello schermo; l'ordine logico del trucco.
HTML server chiave - Non nascondere tutto dietro JS.
I testi e le intestazioni Alt rimangono disponibili fino a quando non viene caricato.
I contenuti Lazy non devono bloccare le rotte dalla tastiera.

12) Metriche e target

LCP (hero-immagine/titolo) - ≤ 2,5 s (mobile).
INP: ≤ 200 ms.
CLS: ≤ 0,1.

TTFB: ≤ 500 ms; TTI: 3 secondi

Byts over the wire (first view) - Budget rigoroso (ad esempio, 200-300 KB creta. risorse).
Scroll-jank: <1% fotogrammi> 16,7 ms.

• «lazy _ enceued »/« lazy _ loaded» (id, vista, dimensione, latency),
• 'component _ hydrated' (tempo, peso JS),
• `virtualized_window_resize`,
• `lcp_candidate_shown`, `skeleton_time_visible`,
• errori ('img _ error',' decode _ timeout ').

13) Pattern per aree tipiche

Home/directory: SSR + skeleton schede, lazy immagini, filtri progressivi.
Carta di prodotto/gioco: immagine eroe pratoad + high priority; galleria - lazy; recensioni al click.
Articoli/wiki lunghi: TOC, lettura avanzata, lazy per media/blocchi di codice, sommario ritardato.
Nastri Live: virtualizzazione delle righe, interruzione dello scroll automatico, limite del buffer.

14) Antipattern

Spinner a schermo intero> 1-2 s senza progresso.
Lazy senza localizzatori per il salto di layout (CLS).
Scaricare «Tutto JS subito» per i rari script.
Inline caratteri/immagini pesanti nella parte critica.
Le dimensioni imprevedibili delle schede sono contenuti «vagabondi».
Caricamento pigro critico (logo, testo hero) - Rompe LCP.
Nessun ritorno dopo «indietro».

15) Assegno foglio di implementazione (passo passo)

Sprint 1 - Diagnostica: misura LCP/INP/CLS/TTFB; mappare le risorse e il percorso critico.
Sprint 2 - Critica/priorità: CSS/HTML critico, «precisnect »/« pratoad», riduci le chiacchiere JS.
Sprint 3 - Media: «srcset/sizes», dimensioni fisse, lazy per non-hero.
Sprint 4 - Elenchi: virtualizzazione, docking, skeletons/shimmer.
Sprint 5 - Architettura: idrazione parziale/isole, SSR/SSG/ISR, streaming.
Sprint 6 - Configurazione sottile: «content-visibility», priority hints, debounce, Web Workers.
Sprint 7 - A/B e telemetria: confronto tra scheletri, livelli lazy, budget.
Sprint 8 - Igiene di rilascio: versioni di assetti, cash basting, strategie rollback.

16) Glossario (breve)

Lazy-loading - download ritardato di contenuti invisibili.
LCP/INP/CLS/TTFB/TTI/TBT sono le metriche base della velocità UX.
Code-splitting/idrazione/Isole - Tecniche di frantumazione e rilancio UI.
La virtualizzazione è il render della finestra visibile della lista.
Priority Hints/Precisnect/Pratoad indica al browser cosa caricare in precedenza.
Content-visibility - Omissione di calcolo per i contenuti invisibili.

17) Totale

Lazy-loading non è «loading =» lazy» e pronto». Questo sistema è un percorso critico, i formati corretti dei media, l'interattività insulare, la virtualizzazione e la telemetria. Rendete l'importante istantanea, il secondario invisibile e economico, e il layout prevedibile. In questo modo il prodotto si sentirà veloce su qualsiasi dispositivo e su qualsiasi rete.