Rimuovi il codice JavaScript inutilizzato

Il codice JavaScript non utilizzato può rallentare la velocità di caricamento della pagina:

  • Se JavaScript sta bloccando il rendering, il browser deve scaricare, analizzare, compilare e valutare lo script prima di poter procedere con tutte le altre operazioni necessarie per il rendering della pagina.
  • Anche se JavaScript è asincrono (non blocca la visualizzazione), il codice compete per la larghezza di banda con altre risorse durante il download, il che ha implicazioni significative sulle prestazioni. L'invio sulla rete di codice inutilizzato è inoltre uno spreco per gli utenti di dispositivi mobili che non hanno piani dati illimitati.

Come il controllo JavaScript inutilizzato ha esito negativo

Lighthouse segnala ogni file JavaScript con più di 20 kibibyte di codice inutilizzato:

Uno screenshot del controllo.
Fai clic su un valore nella colonna URL per aprire il codice sorgente dello script in una nuova scheda.

Come rimuovere il codice JavaScript inutilizzato

Rileva JavaScript inutilizzato

La scheda Copertura in Chrome DevTools può fornirti una suddivisione riga per riga del codice inutilizzato.

La classe Coverage in Puppeteer può aiutarti ad automatizzare il processo di rilevamento del codice inutilizzato e di estrazione del codice utilizzato.

Crea strumento di supporto per la rimozione del codice inutilizzato

Dai un'occhiata ai seguenti test Tooling.Report per scoprire se il tuo bundler supporta funzionalità che consentono di evitare o rimuovere più facilmente il codice inutilizzato:

Indicazioni specifiche per lo stack

Angular

Se utilizzi l'interfaccia a riga di comando Angular, includi mappe di origine nella build di produzione per controllare i tuoi bundle.

Drupal

Potresti rimuovere gli asset JavaScript inutilizzati e collegare solo le librerie Drupal necessarie alla pagina o al componente pertinente in una pagina. Per ulteriori dettagli, consulta Definizione di una libreria.

Joomla

Valuta la possibilità di ridurre, o cambiare, il numero di estensioni di Joomla che caricano file JavaScript inutilizzati nella tua pagina.

Magento

Disattiva il raggruppamento JavaScript integrato di Magento.

React

Se non usi il rendering lato server, dividi i bundle JavaScript con React.lazy(). In caso contrario, suddividi il codice utilizzando una libreria di terze parti come loadable-components.

Veduta

Se non esegui il rendering lato server e utilizzi il router Vue, suddividi i pacchetti in base alle percorsi di caricamento lento.

WordPress

Valuta la possibilità di ridurre, o cambiare, il numero di plug-in di WordPress che caricano file JavaScript inutilizzati nella tua pagina.

Risorse