Perché ottimizzare JavaScript
Un JavaScript non ottimizzato può bloccare il rendering della pagina, aumentare il Time to Interactive (TTI) e incidere negativamente sull'INP. Nel web moderno i bundle JS superano spesso diversi megabyte: critico soprattutto per i dispositivi mobili e le connessioni lente.
Tecniche principali di ottimizzazione JavaScript
- Minificazione — rimozione di spazi e commenti, rinomina delle variabili (tool: Terser, UglifyJS).
- Code splitting — suddividere il codice in chunk caricati a richiesta (Webpack, Rollup).
- Tree shaking — rimuovere il codice inutilizzato dal bundle (richiede architettura modulare).
- Defer / async — caricamento degli script non bloccante.
- Compressione (gzip / brotli) — ridurre le dimensioni dei dati trasferiti.
- Caching — header Cache-Control per le visite ripetute.
Defer vs Async: qual è la differenza
html
<!-- Defer: loads in parallel, executes after HTML -->
<script src="app.js" defer></script>
<!-- Async: loads in parallel, executes immediately after loading -->
<script src="analytics.js" async></script>- Nessun attributo — blocca il parsing dell'HTML, esegue subito (per gli script critici).
- defer — carica in parallelo, esegue dopo il caricamento completo dell'HTML (per il JS principale).
- async — carica in parallelo, esegue appena caricato (per script indipendenti come analytics).
Ottimizzazione degli script di terze parti
Gli script di terze parti (widget di chat, tracker, widget incorporati) sono una causa comune di problemi di prestazioni.
- Google Analytics / GTM — usa il caricamento differito via defer oppure il caricamento all'interazione dell'utente.
- Facebook Pixel — caricalo dopo un'azione dell'utente (per esempio scroll o clic).
- Widget di chat — mostra un'icona statica e carica lo script al clic.
- Mappe (Google Maps) — mostra un'immagine statica segnaposto e carica il JavaScript al clic.
Audita sempre quali script esterni servono davvero. Ogni script di terze parti aggiunge overhead di rete, parsing ed esecuzione, aumentando l'INP e il first input delay.
FAQ
Che cos'è un long task e perché dovrei evitarlo?
Un long task è un task che dura più di 50 ms. Blocca il main thread rendendo l'interfaccia non reattiva. Spezza i long task in pezzi più piccoli con setTimeout o requestIdleCallback.
Come capisco se il mio JavaScript è ottimizzato?
Usa Lighthouse (scheda Performance), il pannello Coverage in Chrome DevTools (mostra la percentuale di codice inutilizzato) e il report «Reduce unused JavaScript» in PageSpeed Insights.
Che cos'è il code splitting in pratica?
Suddividi il bundle in più parti: un bundle principale (caricato subito) e chunk dinamici (caricati quando servono una pagina o un componente specifici). Per esempio, lo script del carrello e-commerce si carica solo quando l'utente clicca «Checkout».