Duplicerad JavaScript

Silktide kontrollerar om någon av koden som din sida laddar ner finns med mer än en gång. Duplicerad kod gör sidan större och långsammare att ladda utan att tillföra något för besökaren.

Modern sätts vanligtvis ihop av många små moduler som paketeras till några få stora filer. När flera paket byggs oberoende av varandra – till exempel din egen kod och en inbäddad widget – kan varje paket innehålla en egen kopia av samma modul, vilket gör att besökarna laddar ner identisk funktionalitet två gånger.

Varför detta är viktigt

Varje duplicerad modul kostar nedladdningstid, bearbetningstid och mobildata utan att ge något tillbaka. På en snabb kontorsanslutning kanske svinnet inte märks, men besökare på mobiler och långsammare nätverk märker det direkt genom att sidan tar längre tid att visas och reagera.

Duplicering tenderar också att växa i det tysta: varje nytt skript eller widget som läggs till på en webbplats kan ta med sig egna kopior av vanliga bibliotek, så svinnet byggs på över tid om ingen letar efter det.

Så åtgärdar du det

Det här är en åtgärd för dina utvecklare, i webbplatsens byggprocess snarare än i dess innehåll:

Analysera hur webbplatsens JavaScript paketeras. De flesta paketeringsverktyg har ett analysläge som visualiserar vad varje utdatafil innehåller, vilket gör det lätt att upptäcka duplicerade moduler.
Konfigurera bygget så att gemensamma beroenden dedupliceras, så att ett bibliotek som används på flera ställen inkluderas en gång och delas, i stället för att kopieras till varje paket.
Anpassa versionerna: två olika versioner av samma bibliotek kan inte slås ihop, så att uppgradera allt till en version är ofta den verkliga lösningen.
Om dupliceringen kommer från ett tredjepartsskript som du inte kan bygga om, be leverantören om en mindre version eller byt ut det.

Så testar Silktide detta

Ladda sidan i en riktig webbläsare med den enhetstyp, anslutningshastighet och testplats som har konfigurerats för dina hastighetstester.
Undersök JavaScript-filerna som sidan laddar ner och identifiera moduler som förekommer i mer än en fil. Kopior matchas utifrån vad de gör, så de hittas även när filerna är formaterade eller på olika sätt.
Rapportera varje duplicerad modul, vilka filer den förekommer i och den nedladdningsstorlek som skulle kunna sparas genom att ta bort extrakopiorna.
Bedöm sidan utifrån den totala storleken på den onödiga nedladdningen: redan omkring 10 KB duplicering ger ett sämre resultat, och 50 KB eller mer bedöms som dåligt.

Felsökning

De två filerna innehåller inte identisk kod

Kontrollen matchar moduler utifrån vad de är, inte utifrån deras exakta text. Samma modul kan se mycket olika ut i två paket efter minifiering och ändå vara samma duplicerade kod.

Dupliceringen finns inuti ett tredjepartsskript

Du kan inte bygga om någon annans paket. Ta upp frågan med leverantören, ladda deras skript på ett annat sätt som delar dina beroenden eller acceptera kostnaden om skriptets värde överväger den.