JavaScript duplicato
Silktide controlla se una parte del codice scaricato dalla pagina è inclusa più di una volta. Il codice duplicato rende la pagina più grande e lenta da caricare senza aggiungere nulla per i visitatori.
Il moderno viene generalmente assemblato a partire da molti piccoli moduli, raggruppati in pochi file di grandi dimensioni. Quando diversi bundle vengono creati in modo indipendente, ad esempio il tuo codice e un widget incorporato, ognuno può includere la propria copia dello stesso modulo e i visitatori finiscono per scaricare due volte funzionalità identiche.
Perché è importante
Ogni modulo duplicato comporta tempi di download ed elaborazione più lunghi e un maggiore consumo di dati mobili, senza offrire alcun vantaggio. Su una connessione veloce dell'ufficio lo spreco può passare inosservato, ma i visitatori che usano telefoni o reti più lente lo percepiscono direttamente, perché la pagina impiega più tempo ad apparire e a rispondere.
La duplicazione tende inoltre a crescere senza farsi notare: ogni nuovo script o widget aggiunto a un sito può portare con sé copie delle librerie comuni, aumentando lo spreco nel tempo se nessuno lo verifica.
Come risolvere il problema
Questa soluzione è destinata agli sviluppatori e riguarda il processo di compilazione del sito, non i suoi contenuti:
- Analizza il modo in cui il JavaScript del sito viene raggruppato. La maggior parte degli strumenti di bundling dispone di una modalità di analisi che visualizza il contenuto di ogni file di output, facilitando l'individuazione dei moduli duplicati.
- Configura la compilazione per deduplicare le dipendenze condivise, in modo che una libreria utilizzata in più punti venga inclusa una sola volta e condivisa, invece di essere copiata in ogni bundle.
- Allinea le versioni: due versioni diverse della stessa libreria non possono essere unite, quindi spesso la soluzione reale consiste nell'aggiornare tutto a un'unica versione.
- Se la duplicazione proviene da uno script di terze parti che non puoi ricompilare, chiedi al fornitore una versione più leggera oppure sostituiscilo.
Come Silktide esegue questo controllo
- Carica la pagina in un browser reale, utilizzando il tipo di dispositivo, la velocità di connessione e la posizione di test configurati per i test di velocità.
- Esamina i file JavaScript scaricati dalla pagina e individua i moduli presenti in più di un file. Le copie vengono confrontate in base a ciò che fanno, quindi vengono individuate anche quando i file sono formattati o in modo diverso.
- Segnala ogni modulo duplicato, i file in cui compare e le dimensioni del download che potrebbero essere risparmiate rimuovendo le copie aggiuntive.
- Valuta la pagina in base alle dimensioni complessive del download sprecato: anche circa 10 KB di duplicazione comportano una valutazione inferiore, mentre 50 KB o più sono considerati un risultato scarso.
Risoluzione dei problemi
I due file non contengono codice identico
Il controllo confronta i moduli in base a ciò che sono, non al loro testo esatto. Lo stesso modulo può apparire molto diverso in due bundle dopo la minificazione, pur trattandosi dello stesso codice duplicato.
La duplicazione si trova all'interno di uno script di terze parti
Non puoi ricompilare il bundle di qualcun altro. Segnala il problema al fornitore, carica lo script in un altro modo che condivida le tue dipendenze oppure accetta il costo se il valore dello script lo giustifica.