Risolvi l'avviso di Lighthouse 'riduci JavaScript inutilizzato'

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

Qual è l'avviso riduci JavaScript inutilizzato in Lighthouse? Lighthouse segnala gli script che hanno più di 20kb di byte inutilizzati.

L'avviso 'riduci JavaScript inutilizzato' influisce direttamente sul punteggio di Lighthouse.

Il JavaScript inutilizzato è anche molto importante per superare i Core Web Vitals poiché il JavaScript inutilizzato ha un costo!. Può competere per le risorse di rete e bloccare il main thread. Questo rallenterà i Core Web Vitals, specialmente il largest contentful paint (LCP) e l'interaction to next paint (INP).

Cosa causa il JavaScript inutilizzato?

Il JavaScript inutilizzato può avere molteplici ragioni. Il JavaScript inutilizzato è solitamente causato da:

• Troppi  plugin nel tuo CMS.
• Codice morto.
• Cattiva programmazione.
• Accesso illimitato al tag manager
• Importazioni non necessarie
  
• Codice che è stato caricato immediatamente ma che avrebbe potuto essere caricato appena prima dell'uso.

Come influisce il 'JavaScript inutilizzato' sulla pagespeed

Il JavaScript inutilizzato influisce direttamente sulle metriche di Lighthouse. Rende il rendering di una pagina web inutilmente complicato, rendendo quasi impossibile ottenere un punteggio elevato in Lighthouse. Il tuo browser dovrà fare più lavoro prima che la pagina web possa essere visualizzata sullo schermo. 

Tuttavia tieni presente che un punteggio di Lighthouse non è un punteggio dei Core Web Vitals. I Core Web Vitals vengono misurati con i dati CrUX.

Ci sono 2 problemi con il JavaScript inutilizzato.

• Prima di tutto quel JavaScript deve essere scaricato. Questi script competeranno per le risorse di rete. Questo può avere un enorme impatto sul largest contentful paint (LCP)
• In secondo luogo il browser dovrà eseguire tutto quel JavaScript. Mentre un browser esegue quel JavaScript fondamentalmente smetterà di fare qualsiasi altra cosa e non potrà rispondere all'input dell'utente né continuare ad analizzare la pagina. Questo influirà sia sul largest contentful paint (LCP) che sull'interaction to next paint (INP)

Come trovare il 'JavaScript inutilizzato'

Per trovare il 'JavaScript inutilizzato' puoi leggere l'audit di Lighthouse o usare il 'Chrome Coverage Tool' per ottenere un elenco completo di tutti i file JavaScript e la loro quantità di byte inutilizzati.

Apri i chrome dev tools con la scorciatoia ctrl-shift-i . Poi usa la scorciatoia ctrl-shift-p per aprire il menu dei comandi e digita 'coverage'. Seleziona 'Start instrumenting coverage and reload page'. Questo ricaricherà la pagina e ti mostrerà la quantità di byte inutilizzati per tutti i file che contengono codice css o javascript.

Come risolvere 'riduci JavaScript inutilizzato'

Per risolvere l'avviso 'riduci JavaScript inutilizzato' dovrai prima rintracciarne le origini. Lighthouse ti darà un'indicazione di quali script hanno un'elevata quantità di byte inutilizzati. Ci sono 5 soliti sospetti:

1. Rimuovi plugin non necessari o banali. Se stai usando un CMS basato su plugin come WordPress, il metodo di gran lunga più semplice ed efficace per ripulire il tuo codice inutilizzato è rimuovere i plugin di cui non hai bisogno o che possono essere facilmente sostituiti da una semplice modifica del codice (ad esempio il tuo plugin di analisi, plugin di chat, plugin di condivisione social)
   
2. Rimuovi il codice morto. Il codice morto è codice che non viene più utilizzato dal sito web attuale. Occupa solo spazio e larghezza di banda. Se possiedi un sito web, ti suggerisco di programmare una maratona del codice morto almeno due volte all'anno in cui dai una bella occhiata ai tuoi script personalizzati e rimuovi il codice che non è più necessario.
   
3. Riscrivi script programmati male.  Gli script programmati male tendono ad avere molti controlli inutili e istruzioni if/else. Quei controlli potrebbero non essere mai utilizzati e alcune condizioni if/else potrebbero non essere necessarie. Se hai molti script più vecchi o il tuo attuale sviluppatore JavaScript è migliore del precedente, potrebbe essere una buona idea rivisitare gli script più vecchi.
   
4. Ripulisci il tuo tag manager e limita l'accesso. Il tag manager è una fonte comune di codice inutilizzato, specialmente quando ai dipartimenti meno tecnici è permesso aggiungere tag. Molte volte si dimenticheranno di rimuovere i loro tag inutilizzati e il tag manager diventa la fonte principale di JavaScript inutilizzato.
5. Rimuovi le importazioni non necessarie (NextJS, React, VUE ecc.). La maggior parte degli ambienti SPA importa troppi componenti / funzioni. Ricontrolla le tue importazioni e rimuovi il codice inutilizzato. 
6. Lazy load di rotte o componenti  (NextJS, React, VUE ecc.). Il lazy loading dei componenti importerà quei componenti solo quando sono necessari. Questo rimuoverà immediatamente l''avviso di Lighthouse per javascript inutilizzato' per queste pagine in cui applichi il lazy load al codice inutilizzato.
7. Differisci il caricamento degli script non critici. A volte hai bisogno di uno script (ad esempio, per inviare un modulo) ma non ne hai bisogno subito. E, siamo onesti, il 98% dei tuoi visitatori non si iscriverà comunque. Quindi per la maggior parte questi script sono inutilizzati. Avrebbe più senso caricare questo script quando il visitatore interagisce con il modulo, e non durante il caricamento della pagina.

Soluzioni alternative per 'riduci JavaScript inutilizzato'

A volte non è possibile risolvere tutti gli avvisi di JavaScript inutilizzato. In tal caso potresti provare a minimizzare l'impatto di queste risorse inutilizzate

- Carica tutte le risorse javascript dal tuo dominio principale (questo evita una nuova connessione di rete)
- Precarica le risorse più importanti come i tuoi font e l'elemento immagine LCP.
- Differisci quanto più JavaScript possibile
- Posiziona il JavaScript meno importante in fondo alla pagina