Ongebruikte JavaScript
Silktide laadt je pagina's in een echte browser en meet hoeveel van elk script daadwerkelijk wordt uitgevoerd terwijl de pagina wordt geladen. Scripts met veel ongebruikte code worden gerapporteerd, samen met de mogelijke besparing.
Waarom dit belangrijk is
Ongebruikte kost je bezoekers twee keer: een keer om de code te downloaden en nog een keer terwijl de browser code parseert en compileert die nooit wordt uitgevoerd. Op telefoons weegt die tweede belasting het zwaarst: een telefoon uit het middensegment kan meerdere keren langer bezig zijn met het verwerken van een script dan met het downloaden ervan. In die tijd kan de pagina niet reageren op tikken of scrollen.
Ongebruikte code stapelt zich op dezelfde manier op als ongebruikte CSS: frameworks en bibliotheken leveren functies mee die je niet gebruikt, en oude code wordt zelden verwijderd. Elke bezoeker betaalt ervoor bij elke paginaweergave.
Hoe je dit oplost
- Verwijder scripts die de pagina niet meer nodig heeft, inclusief tags voor diensten die je niet meer gebruikt.
- Splits grote bundels op, zodat elke pagina alleen de code laadt die ze gebruikt. Moderne buildtools ondersteunen code splitting en doen dit automatisch.
- Laad code voor functies onder de vouw of functies die op aanvraag worden gebruikt — zoals modals, spelers en widgets — alleen wanneer dat nodig is, in plaats van vooraf:
// Laadt de chatwidget alleen wanneer de bezoeker erom vraagt
button.addEventListener('click', async () => {
const { openChat } = await import('./chat.js');
openChat();
});
Hoe Silktide dit controleert
- Laad de pagina in een echte browser en leg vast welke delen van elk script worden uitgevoerd terwijl de pagina wordt geladen.
- Meet voor elk script hoeveel bytes ervan nooit worden uitgevoerd.
- Rapporteer elk script met betekenisvolle verspilling en toon de huidige omvang, het ongebruikte percentage en het aantal bytes dat je kunt besparen.
Problemen oplossen
De code wordt uitgevoerd, maar niet tijdens het laden van de pagina
De meting omvat de eerste keer dat de pagina wordt geladen. Code die pas later wordt uitgevoerd — zoals formulierverificatie, menubediening en functies achter klikken — telt als ongebruikt, ook al heeft de pagina deze uiteindelijk nodig. Die code is een goede kandidaat om op aanvraag te laden in plaats van vooraf.
De ongebruikte code staat in een script van een derde partij
Je kunt de bundel van iemand anders meestal niet inkorten, maar je kunt wel bepalen wanneer deze wordt geladen. Bekijk code van derden en facades voor code van derden voor mogelijke oplossingen.