JavaScript inutilizzato

Silktide carica le tue pagine in un browser reale e misura quanto di ogni script viene effettivamente eseguito durante il caricamento della pagina. Vengono segnalati gli script con una grande quantità di codice inutilizzato, insieme al potenziale risparmio.

Perché è importante

Il inutilizzato costa il doppio ai tuoi visitatori: una volta per scaricarlo e un'altra mentre il browser analizza e compila codice che non verrà mai eseguito. Sui telefoni, questo secondo costo è predominante: un telefono di fascia media può impiegare diverse volte più tempo per elaborare uno script che per scaricarlo; nel frattempo, la pagina non può rispondere ai tocchi o allo scorrimento.

Il codice inutilizzato si accumula nello stesso modo del CSS inutilizzato: i framework e le librerie includono funzionalità che non usi e il vecchio codice viene raramente rimosso. Ogni visitatore ne paga il costo a ogni visualizzazione della pagina.

Come risolvere il problema

Rimuovi gli script di cui la pagina non ha più bisogno, inclusi i tag relativi a servizi che hai smesso di usare.
Suddividi i bundle di grandi dimensioni, in modo che ogni pagina carichi solo il codice che utilizza. Gli strumenti di build moderni supportano la suddivisione del codice e lo fanno automaticamente.
Carica il codice per le funzionalità sotto la prima schermata o su richiesta, come finestre modali, player e widget, solo quando servono, invece che anticipatamente:

// Carica il widget della chat solo quando il visitatore lo richiede
button.addEventListener('click', async () => {
  const { openChat } = await import('./chat.js');
  openChat();
});

Come esegue il controllo Silktide

Carica la pagina in un browser reale e registra quali parti di ogni script vengono eseguite durante il caricamento della pagina.
Per ogni script, misura quanti dei suoi byte non vengono mai eseguiti.
Segnala ogni script con uno spreco significativo, mostrando le sue dimensioni attuali, la percentuale inutilizzata e i byte che potresti risparmiare.

Risoluzione dei problemi

Il codice viene eseguito, ma non durante il caricamento della pagina

La misurazione riguarda il caricamento iniziale. Il codice che viene eseguito solo in seguito, ad esempio per la convalida dei moduli, la gestione dei menu o le funzionalità attivate tramite clic, viene conteggiato come inutilizzato anche se la pagina ne avrà bisogno in seguito. Questo codice è un buon candidato per il caricamento su richiesta invece che anticipato.

Il codice inutilizzato si trova in uno script di terze parti

Di solito non puoi ridurre il bundle di qualcun altro, ma puoi controllare quando viene caricato. Consulta Codice di terze parti e facade per codice di terze parti per conoscere alcuni approcci.