Risolvere 'Riduci il JavaScript inutilizzato' in Lighthouse

Cos'è l'avviso 'riduci il JavaScript inutilizzato' di Lighthouse?

Ultima revisione a cura di Arjen Karel nel marzo 2026

Lighthouse segnala ogni file JavaScript con più di 20 KiB di codice inutilizzato. Se vedi questo avviso, la tua pagina sta scaricando ed eseguendo JavaScript di cui non ha bisogno per il caricamento della pagina corrente.

Questo avviso influisce direttamente sul tuo punteggio di performance in Lighthouse. Ma soprattutto, il JavaScript inutilizzato danneggia i tuoi utenti reali. Secondo il 2025 Web Almanac, la pagina mobile mediana invia 646 KB di JavaScript, di cui 251 KB rimangono inutilizzati sulla pagina in cui vengono caricati. Al 90° percentile, quel numero sale a 931 KB di JavaScript sprecato.

Nel frattempo, il Total Blocking Time sui dispositivi mobili è aumentato del 58% anno su anno fino a una mediana di 1.916 ms, secondo il capitolo sulle performance del 2025 Web Almanac. I payload JavaScript stanno crescendo più velocemente di quanto non stia aumentando la velocità dei dispositivi. Nei siti monitorati da CoreDash, le origin che mantengono il loro JavaScript inutilizzato al di sotto di 100 KB ottengono un punteggio "buono" nell'INP il 93% delle volte, rispetto al 64% per le origin che superano i 400 KB.

Cosa causa il JavaScript inutilizzato?

Il JavaScript inutilizzato può avere molteplici cause. Le più comuni sono:

• Troppi plugin nel tuo CMS.
• Codice inattivo (dead code) che non è più utilizzato dal sito web attuale.
• Script scritti male con controlli e rami (branches) non necessari.
• Accesso illimitato al tag manager, dove i team di marketing aggiungono tag e si dimenticano di rimuoverli.
• Importazioni non necessarie: includere un'intera libreria quando utilizzi solo una singola funzione.
• Codice che viene eseguito su ogni pagina ma è necessario solo su route specifiche.
• Script caricati immediatamente che avrebbero potuto essere caricati appena prima dell'uso.

In che modo il JavaScript inutilizzato influisce sui Core Web Vitals?

Il JavaScript inutilizzato penalizza le tue performance in due modi:

• Contesa della rete (Network contention). Ogni file JavaScript deve essere scaricato. Queste richieste competono per la larghezza di banda con la tua immagine LCP, i tuoi font e il tuo CSS. Su una connessione mobile, questo ritardo può spingere il tuo Largest Contentful Paint ben oltre la soglia di 2,5 secondi.
• Blocco del thread principale. Il browser deve parsare, compilare ed eseguire tutto quel JavaScript. Mentre lo fa, non può rispondere all'input dell'utente o continuare a renderizzare la pagina. Questo impatta direttamente sia il LCP sia l'INP.

Tieni presente che un punteggio Lighthouse non è un punteggio dei Core Web Vitals. I Core Web Vitals vengono misurati con dati sul campo provenienti da utenti reali (CrUX). Lighthouse è uno strumento diagnostico che ti aiuta a trovare i problemi, ma le tue performance reali sono ciò che i tuoi visitatori sperimentano effettivamente. Puoi verificare le tue performance sul campo con il Real User Monitoring.

Come trovare il JavaScript inutilizzato

Ci sono tre modi per identificare il JavaScript inutilizzato sulla tua pagina:

1. Leggi l'audit di Lighthouse

Lighthouse elenca ogni file JavaScript che ha più di 20 KiB di codice inutilizzato. Mostra i byte totali, i byte inutilizzati e i potenziali risparmi. Questo è il tuo punto di partenza. Nota che Lighthouse 13 (ottobre 2025) è passato a un formato di audit basato su insight, ma il controllo del JavaScript inutilizzato è ancora presente.

2. Usa lo strumento Chrome Coverage

Lo strumento Coverage (Copertura) ti offre un'analisi riga per riga del codice utilizzato rispetto a quello inutilizzato per ogni file JavaScript e CSS della pagina.

Apri i Chrome DevTools con Ctrl+Shift+I (o Cmd+Option+I su Mac). Poi usa Ctrl+Shift+P per aprire il menu dei comandi e digita coverage. Seleziona Show Coverage, quindi clicca sul pulsante ricarica per avviare la strumentazione. Dopo il caricamento della pagina, vedrai ogni file con la sua percentuale di byte inutilizzati.

Passa alla modalità di copertura "Per block" (menu a tendina in alto nel pannello) per ottenere risultati più granulari. La copertura a livello di blocco rileva rami non utilizzati all'interno delle funzioni, non solo se una funzione è stata chiamata o meno.

Clicca su una qualsiasi riga per aprire il file nel pannello Sources. Le righe blu sono codice utilizzato. Le righe rosse sono inutilizzate. Questo ti indica esattamente quali funzioni e rami non sono mai stati eseguiti durante il caricamento della pagina.

3. Analizza i tuoi bundle

Se usi un bundler come webpack, Rollup o Vite, usa un bundle analyzer per visualizzare cosa c'è all'interno dei tuoi file JavaScript. Strumenti come webpack-bundle-analyzer e source-map-explorer mostrano un grafico ad albero (treemap) di ogni modulo nel tuo bundle, rendendo ovvio quando una grande libreria viene importata per una piccola funzionalità.

Inutilizzato non significa sempre non necessario

Tieni presente che "inutilizzato" in una pagina non significa "non necessario". Uno script che gestisce il tuo modulo di pagamento viene mostrato come 100% inutilizzato sulla tua homepage. Questo non significa che dovresti eliminarlo. Significa che non dovresti caricarlo sulla homepage.

Questo è ciò che risolve il code splitting: ogni route carica solo il JavaScript di cui ha effettivamente bisogno. Se vedi grandi quantità di JavaScript "inutilizzato" e il tuo sito è un'applicazione a pagina singola, la soluzione è quasi sempre un migliore code splitting a livello di route, non l'eliminazione del codice.

Come risolvere 'riduci il JavaScript inutilizzato'

Per risolvere l'avviso 'riduci il JavaScript inutilizzato' devi prima tracciare da dove proviene lo spreco. Lighthouse ti dice quali script hanno un'elevata quantità di byte inutilizzati. Ecco 7 modi per ridurlo:

1. Rimuovi i plugin non necessari. Se usi un CMS come WordPress, la vittoria più semplice è rimuovere i plugin di cui non hai bisogno o sostituire plugin banali con poche righe di codice. Il tuo plugin di analytics, i pulsanti di condivisione social e il widget della chat sono i colpevoli più comuni.
2. Rimuovi il dead code (codice inattivo). Il dead code è codice che l'attuale sito web non utilizza più. Pianifica un audit del dead code almeno due volte all'anno. Strumenti come Knip possono automatizzare il rilevamento di export e dipendenze inutilizzate nei progetti JavaScript.
3. Fai tree shaking dei tuoi bundle. Il tree shaking rimuove gli export inutilizzati al momento della build. Affinché funzioni, hai bisogno della sintassi dei moduli ES (import/export), non CommonJS (require). Aggiungi "sideEffects": false al tuo package.json così che il tuo bundler possa rimuovere aggressivamente il codice inutilizzato. Importa solo ciò di cui hai bisogno:

   // Cattivo: importa l'intera libreria (70+ KB)
   import _ from 'lodash';
   const result = _.debounce(fn, 300);
   
   // Buono: importa solo debounce (~1 KB con tree shaking)
   import { debounce } from 'lodash-es';
   const result = debounce(fn, 300);

4. Dividi il codice delle tue route (code splitting). Carica solo il JavaScript di cui ogni pagina ha effettivamente bisogno. Usa l'import() dinamico per dividere i tuoi bundle per route o per funzionalità:

   // Invece di importare tutto in anticipo:
   import { validateForm } from './formValidation.js';
   
   // Caricalo solo quando l'utente interagisce con il modulo:
   document.querySelector('form').addEventListener('focus', async () => {
     const { validateForm } = await import('./formValidation.js');
     validateForm();
   }, { once: true });

   In React, usa React.lazy() con <Suspense> per il partizionamento (splitting) a livello di componente. Nel Next.js App Router, i React Server Components inviano zero JavaScript al client per impostazione predefinita. In Vue, usa defineAsyncComponent() o le importazioni dinamiche in Vue Router.

5. Pulisci il tuo tag manager e limita l'accesso. Il tag manager è una fonte comune di codice inutilizzato, specialmente quando i team di marketing aggiungono tag senza rimuovere quelli vecchi. Controlla regolarmente il contenitore del tuo tag manager. Ogni tag che scatta al caricamento della pagina aggiunge JavaScript che compete per le risorse.
6. Rimuovi le importazioni non necessarie. Nei progetti React, Vue e Next.js, controlla le tue istruzioni di importazione. Stai importando un'intera libreria di componenti quando ne utilizzi solo due? Stai importando moment.js (330 KB) quando l'API nativa Intl o un'alternativa da 2 KB come dayjs andrebbe bene lo stesso?
7. Differisci il caricamento di script non critici. A volte hai bisogno di uno script (per inviare un modulo, per esempio) ma non ne hai bisogno durante il caricamento della pagina. Caricalo quando l'utente ne ha effettivamente bisogno. Uno script che si carica all'interazione invece che al caricamento della pagina non è più "JavaScript inutilizzato" nell'audit di Lighthouse. Vedi anche async vs defer per comprendere la differenza tra le due strategie di caricamento.

Quando non riesci a risolverlo completamente

A volte non puoi rimuovere tutto il JavaScript inutilizzato. Gli script di terze parti, gli strumenti di A/B testing e le reti pubblicitarie spesso inviano grandi bundle su cui non hai alcun controllo. In quel caso, minimizza il loro impatto:

• Ospita (self-host) gli script di terze parti sul tuo dominio principale dove possibile. Questo evita il costo di una nuova ricerca DNS e di una connessione TCP per ogni dominio esterno.
• Dai priorità alle risorse critiche. Precarga (preload) la tua immagine LCP e i font critici così che non rimangano bloccati dietro ai download JavaScript nella coda di rete.
• Differisci quanto più JavaScript possibile. Sposta gli script non critici fuori dal percorso critico di rendering utilizzando defer, async, o un caricamento ritardato.
• Usa fetchpriority="low" sulle risorse script non essenziali per dire al browser che possono aspettare.
• Monitora i tuoi dati sul campo. Usa il Real User Monitoring per verificare che i tuoi cambiamenti abbiano effettivamente migliorato l'esperienza per gli utenti reali, non solo il punteggio Lighthouse.