Il primo posto dove guardare è sempre il network tab in Chrome DevTools con throttling a 'Slow 3G'. Quello che vedi lì è l'esperienza reale di una parte significativa degli utenti mobili. I problemi più comuni: immagini non ottimizzate (JPEG da 2MB invece di WebP da 200KB), font che bloccano il rendering (quattro varianti di peso di un font Google invece di due), JavaScript che non è lazy-loaded e blocca il thread principale.
Le immagini sono il quick win più consistente. Next.js ha `next/image` che gestisce WebP, lazy loading e srcset automaticamente — se lo usi correttamente, le immagini smettono di essere un problema. Su siti non Next.js, uso Squoosh o Cloudinary per convertire tutto in WebP con qualità 80-85, e aggiungo `loading='lazy'` su tutte le immagini below the fold. Questo intervento da solo migliora il LCP del 30-50% nella maggior parte dei casi.
Il secondo problema più comune è il JavaScript non necessario. Ogni libreria che importi ha un costo — React con tutte le sue dipendenze pesa facilmente 100KB+ gzipped. Uso `next/dynamic` per il lazy loading dei componenti pesanti, rimuovo le librerie che uso per una sola funzione (moment.js invece di date-fns, lodash importato interamente invece di tree-shaken), e verifico il bundle size con `next build --analyze`. Un bundle analyzer è uno degli strumenti più utili che conosco.
Core Web Vitals: LCP, CLS, FID/INP. Questi tre indicatori di Google non sono metriche arbitrarie — catturano esattamente le cose che rendono un sito fastidioso da usare. LCP riguarda la velocità di caricamento del contenuto principale, CLS riguarda gli elementi che si spostano mentre la pagina carica (il bug dei font che appaiono dopo), INP riguarda la reattività alle interazioni. Ottimizzare in questo ordine è quasi sempre la strategia più efficiente.