Ubrukt JavaScript

Silktide laster inn sidene dine i en ekte nettleser og måler hvor mye av hvert skript som faktisk kjører mens siden lastes inn. Skript med mye ubrukt kode rapporteres, sammen med den mulige besparelsen.

Hvorfor dette er viktig

Ubrukt koster de besøkende dine to ganger: én gang for å laste det ned, og én gang til mens nettleseren analyserer og kompilerer kode som aldri kjører. På telefoner er den andre kostnaden størst – en telefon i mellomklassen kan bruke flere ganger så lang tid på å behandle et skript som på å laste det ned. I mellomtiden kan ikke siden svare på trykk eller rulling.

Ubrukt kode samler seg opp på samme måte som ubrukt CSS: Rammeverk og biblioteker leveres med funksjoner du ikke bruker, og gammel kode blir sjelden fjernet. Hver besøkende betaler for den på hver sidevisning.

Slik løser du det

Fjern skript siden ikke lenger trenger, inkludert tagger for tjenester du har sluttet å bruke.
Del opp store pakker slik at hver side bare laster inn koden den bruker. Moderne byggeverktøy støtter kodedeling, som gjør dette automatisk.
Last inn kode for funksjoner under den synlige delen av siden eller funksjoner som lastes ved behov – modaler, avspillere, widgeter – bare når det trengs, i stedet for på forhånd:

// Laster bare inn chat-widgeten når den besøkende ber om det
button.addEventListener('click', async () => {
  const { openChat } = await import('./chat.js');
  openChat();
});

Slik tester Silktide dette

Last inn siden i en ekte nettleser og registrer hvilke deler av hvert skript som kjøres mens siden lastes inn.
Mål hvor mange byte i hvert skript som aldri ble kjørt.
Rapporter hvert skript med betydelig sløsing, og vis den nåværende størrelsen, prosentandelen som er ubrukt, og antallet byte du kan spare.

Feilsøking

Koden kjører, bare ikke under innlasting av siden

Målingen dekker den første innlastingen. Kode som bare kjører senere – skjemavalidering, menyhåndtering og funksjoner bak klikk – regnes som ubrukt, selv om siden trenger den til slutt. Denne koden egner seg godt for innlasting ved behov i stedet for på forhånd.

Den ubrukte koden er i et tredjepartsskript

Du kan vanligvis ikke redusere andres pakker, men du kan styre når de lastes inn. Se tredjepartskode og tredjepartsfasader for mulige løsninger.