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:
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
- Codice sorgente per il controllo Rimuovi codice non utilizzato
- Rimuovi il codice inutilizzato
- Aggiungere interattività con JavaScript
- Suddivisione del codice
- Eliminazione dei codici morti
- Codice importato non più disponibile
- Trova il codice JavaScript e CSS inutilizzato con la scheda Copertura in Chrome DevTools
- classe:
Coverage