JavaScript legacy

Silktide controlla se la tua pagina invia codice aggiuntivo il cui unico scopo è supportare browser molto obsoleti. I browser moderni non ne hanno bisogno, quindi per quasi tutti i visitatori si tratta di tempo di download ed elaborazione sprecato.

Quando viene preparato per la pubblicazione, gli strumenti di compilazione spesso aggiungono polyfill (sostituti per le funzionalità che mancano ai browser obsoleti) e trasformazioni (riscritture della sintassi moderna in equivalenti più vecchi). Se configurati per browser ormai praticamente scomparsi, possono aggiungere un peso considerevole a ogni caricamento della pagina.

Perché è importante

La stragrande maggioranza dei visitatori usa browser che si aggiornano autonomamente e supportano nativamente JavaScript moderno. Il codice per il supporto dei browser obsoleti fa pagare a tutti i visitatori, in termini di tempo di download, dati mobili e tempo di elaborazione, la compatibilità con browser che potrebbero rappresentare una parte nulla del tuo traffico effettivo.

Il costo è facile da non notare perché nulla sembra non funzionare: il sito funziona ovunque. È semplicemente più lento del necessario, su ogni pagina e per tutti.

Come risolvere il problema

Si tratta di una correzione della configurazione di compilazione che spetta agli sviluppatori:

Imposta come destinazione della compilazione i browser effettivamente utilizzati dai tuoi visitatori, invece di un'impostazione legacy predefinita ormai obsoleta. La maggior parte degli strumenti di compilazione legge queste informazioni da una dichiarazione di supporto dei browser nel progetto.
Rimuovi le importazioni generiche di polyfill che includono il supporto per ogni funzionalità e lascia che la compilazione includa solo ciò di cui le destinazioni hanno realmente bisogno.
Se devi continuare a supportare qualche browser obsoleto, fornisci due build: una moderna per i browser attuali e una legacy solo per i browser che ne hanno bisogno, invece di inviare la build legacy a tutti.

Come Silktide esegue il controllo

Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione del test configurati per i tuoi test di velocità.
Esamina il JavaScript scaricato dalla pagina alla ricerca di polyfill e trasformazioni della sintassi note, di cui i browser moderni non hanno bisogno.
Segnala ogni file contenente codice legacy, indicando la dimensione del download che potrebbe essere risparmiata.
Valuta la pagina in base alla dimensione totale sprecata: circa 30 KB di codice legacy comportano una riduzione della valutazione, mentre 100 KB o più corrispondono a una valutazione insufficiente.

Risoluzione dei problemi

Dobbiamo ancora supportare i browser obsoleti

Chiediti se i tuoi visitatori li utilizzano davvero: te lo diranno i tuoi Analytics. Se alcuni li usano effettivamente, il pattern module/nomodule ti consente di fornire il codice legacy solo ai browser che ne hanno bisogno, evitando così che i browser moderni paghino questo costo.

Il codice legacy si trova in uno script di terze parti

Gli script di altri fornitori possono includere il proprio codice legacy aggiuntivo, che non puoi ricompilare. Verifica se il fornitore offre una build moderna e valuta il valore dello script rispetto al suo costo.