La regola dei 3 secondi per le prestazioni web
Hai tre secondi.
Dopo, i tuoi utenti se ne vanno.
Le ricerche di Google mostrano che il 53% degli utenti mobile abbandona un sito se il caricamento richiede più di 3 secondi.
I siti lenti ti costano denaro. Migliorare i tempi di caricamento mobile di 0,1 secondi aumenta le conversioni retail dell'8,4%.
Le prestazioni non sono solo una metrica tecnica. Sono una metrica di business.
Per vincere, devi comprendere i Core Web Vitals:
• LCP (Largest Contentful Paint): quanto velocemente gli utenti vedono il contenuto principale. Punta a meno di 2,5 s. • INP (Interaction to Next Paint): quanto velocemente la pagina reagisce ai clic. Punta a meno di 200 ms. • CLS (Cumulative Layout Shift): quanto è stabile la pagina. Punta a meno di 0,1.
Smetti di tirare a indovinare e inizia a ottimizzare. Ecco come battere il tempo:
Ottimizzazione JavaScript • Invia meno codice. Usa gli import dinamici per caricare il codice solo quando necessario. • Usa il tree-shaking. Passa da CommonJS a ES modules per rimuovere il codice morto. • Sposta i compiti pesanti nei Web Workers. Mantieni il thread principale libero per l'input dell'utente. • Usa defer o async. Smetti di lasciare che gli script blocchino il parsing dell'HTML.
CSS e Rendering • Inserisci inline il CSS critico. Carica per primi solo ciò che è visibile nella parte superiore della pagina. • Evita il layout thrashing. Raggruppa le operazioni di lettura e scrittura per prevenire ricalcoli costanti. • Anima con transform e opacity. Queste proprietà utilizzano la GPU ed evitano i layout shift. • Usa content-visibility: auto. Salta il rendering per i contenuti che non sono visibili sullo schermo.
Strategia per le immagini • Usa formati moderni. WebP e AVIF sono molto più piccoli di JPEG. • Imposta gli attributi width e height. Questo previene i layout shift (CLS). • Carica in modo pigro (lazy-load) le immagini sotto la piega della pagina. Non applicare il lazy-load alla tua immagine hero LCP. • Usa srcset. Servi immagini più piccole agli utenti mobile.
Rete e Caching • Usa una CDN. Avvicina i tuoi contenuti agli utenti per ridurre la latenza. • Abilita la compressione. Usa Brotli o Zstandard per ridurre le dimensioni dei file. • Utilizza il caching in modo aggressivo. Usa header di cache immutabili per gli asset con hash. • Mantieni attivo il bfcache. Evita di usare l'evento unload per garantire una navigazione avanti/indietro istantanea.
L'obiettivo è semplice: evitare il lavoro.
Il codice più veloce è quello che i tuoi utenti non devono mai scaricare. La richiesta più veloce è quella che il browser non deve mai effettuare.
Fonte: https://dev.to/utkarshbansal01/the-3-second-rule-of-web-performance-and-how-to-beat-it-1he1