Riduci il codice JavaScript inutilizzato – Pagespeed

Panoramica
La riduzione dei JavaScript inutilizzati può ridurre il comportamento di blocco della visualizzazione per accelerare il caricamento della pagina e migliorare l’esperienza sulla pagina dei visitatori.

Per impostazione predefinita, i file JavaScript bloccano il rendering perché impediscono al browser di gestire altre attività di caricamento della pagina, ritardando così il First Paint della pagina.

Il caricamento di JavaScript inutilizzato può quindi avere un forte impatto sulle prestazioni della tua pagina, sia misurate che percepite.

Tipi di JavaScript inutilizzati

Quando si parla di JavaScript inutilizzato, generalmente rientra in due categorie. Entrambe queste categorie influiscono sulle prestazioni della tua pagina, anche se in modi diversi. Sono:

1) JavaScript non critico

JavaScript che non è richiesto per i contenuti Above The Fold ma può comunque essere utilizzato altrove nella pagina o in altre pagine.

2) JavaScript morto

Dead JavaScript si riferisce al codice che non viene più utilizzato.

Potrebbe contenere resti di versioni precedenti del tuo sito e/o importati da altri moduli a cui non si fa più riferimento e/o utilizzati per far parte del test (ovvero, sono stati utilizzati temporaneamente).

In che modo il JavaScript inutilizzato influisce sulle prestazioni della pagina?

Ogni volta che una pagina viene caricata, il browser deve scaricare, analizzare ed eseguire i file JavaScript prima di poter eseguire il rendering di qualsiasi cosa sulla pagina (a meno che i file JavaScript non vengano esplicitamente rinviati o caricati in modo asincrono).

Questo perché il browser non può sapere in che modo il file JavaScript influenzerà il contenuto della pagina, quindi attende che venga completamente eseguito.

JavaScript non utilizzato aumenta inutilmente il tempo di esecuzione del browser, rallentando il caricamento della pagina.

Naturalmente, più JavaScript inutilizzato è presente sulla tua pagina, più tempo impiega il browser per scaricarlo, analizzarlo ed eseguirlo.

Questi file JavaScript inutilmente grandi potrebbero causare problemi, incluso il potenziale ritardo del First Contentful Paint della tua pagina poiché al browser viene impedito di elaborare altre attività critiche. Di conseguenza, ciò aumenta la quantità di tempo che i visitatori trascorrono aspettando che la pagina visualizzi qualcosa.

Inoltre, il codice JavaScript non critico, anche se differito o caricato in modo asincrono, può influire sulle prestazioni della pagina, anche se non blocca la visualizzazione. Questo perché deve ancora essere scaricato e compete con altre risorse della pagina per la larghezza di banda.

Inoltre, il codice JavaScript non utilizzato, in generale, aumenta inutilmente il consumo di dati cellulari sui dispositivi mobili.

Nel complesso, la riduzione dei JavaScript inutilizzati può ridurre il tempo di esecuzione del browser e la larghezza di banda consumata, con conseguente caricamento della pagina più veloce.

Come ridurre i JavaScript inutilizzati di un sito web?

Puoi ridurre il JavaScript inutilizzato con le seguenti strategie:

1) Suddivisione del codice

Separa il codice JavaScript in bundle in JavaScript critico e non critico tramite la suddivisione del codice.

In questo modo, il comportamento di blocco del rendering può essere ridotto poiché viene caricato per primo solo il JavaScript critico. Il JavaScript non critico che non è richiesto sulla tua pagina può quindi essere rimosso.

2) Eliminazione del codice morto

L’eliminazione del codice morto è il processo di rimozione del codice JavaScript che non viene utilizzato dalla tua pagina attuale. Questo codice potrebbe contenere resti di versioni precedenti del sito o potrebbe essere stato utilizzato durante i test.

È possibile utilizzare un processo noto come scuotimento dell’albero(tree shaking) per eliminare il codice JavaScript in avanzo.

3) Eliminazione del codice importato morto

In molti casi, il codice morto viene importato da librerie popolari o altri bundle JavaScript ed è difficile importare selettivamente il codice per la tua applicazione specifica.

Tuttavia, esistono plugin che possono aiutarti a rimuovere automaticamente il codice inutilizzato dalle librerie più popolari dopo averle importate. Per saperne di più su questi plugin clicca qui

Nota: questa è un’ottimizzazione a livello di esperti
L’ottimizzazione di questo controllo richiede una conoscenza completa del codice base del tuo sito web. Si consiglia solo agli sviluppatori esperti di tentare questa operazione poiché la modifica errata del codice JavaScript potrebbe compromettere la funzionalità del sito.