Ubrugt JavaScript

Silktide indlæser dine sider i en rigtig browser og måler, hvor meget af hvert script der faktisk kører, mens siden indlæses. Scripts med en stor mængde ubrugt kode rapporteres sammen med den potentielle besparelse.

Hvorfor det er vigtigt

Ubrugt koster dine besøgende dobbelt: Først at downloade det og derefter, når browseren fortolker og kompilerer kode, der aldrig kører. På telefoner er den anden omkostning størst – en mellemklasse-telefon kan bruge flere gange så lang tid på at behandle et script som på at downloade det, og i den periode kan siden ikke reagere på tryk eller rulning.

Ubrugt kode hober sig op på samme måde som ubrugt CSS: Frameworks og biblioteker leverer funktioner, du ikke bruger, og gammel kode bliver sjældent fjernet. Hver besøgende betaler for det ved hver sidevisning.

Sådan løser du det

Fjern scripts, som siden ikke længere har brug for, herunder tags til tjenester, du er holdt op med at bruge.
Opdel store bundles, så hver side kun indlæser den kode, den bruger. Moderne build- værktøjer understøtter kodeopdeling, som gør dette automatisk.
Indlæs kun kode til funktioner under folden eller efter behov – modaler, afspillere, widgets – når der er brug for den, i stedet for på forhånd:

// Indlæser kun chat-widgetten, når den besøgende beder om det
button.addEventListener('click', async () => {
  const { openChat } = await import('./chat.js');
  openChat();
});

Sådan tester Silktide dette

Indlæs siden i en rigtig browser, og registrer, hvilke dele af hvert script der kører, mens siden indlæses.
Mål for hvert script, hvor mange af dets byte der aldrig kørte.
Rapportér hvert script med betydeligt spild, og vis dets nuværende størrelse, den ubrugte procentdel og de byte, du kan spare.

Fejlfinding

Koden kører, bare ikke under sideindlæsningen

Målingen dækker den første indlæsning. Kode, der først kører senere – formular- validering, menuhåndtering, funktioner bag klik – tæller som ubrugt, selv om siden på sigt har brug for den. Denne kode er en god kandidat til at blive indlæst efter behov i stedet for på forhånd.

Den ubrugte kode er i et tredjepartsscript

Du kan normalt ikke beskære andres bundle, men du kan styre, hvornår det indlæses. Se tredjepartskode og tredjepartsfacader for tilgange.