JavaScript som inte används
Silktide läser in dina sidor i en riktig webbläsare och mäter hur mycket av varje skript som faktiskt körs medan sidan läses in. Skript med en stor mängd kod som inte används rapporteras, tillsammans med den möjliga besparingen.
Varför detta är viktigt
JavaScript som inte används kostar dina besökare två gånger: först när det laddas ner och sedan när webbläsaren tolkar och kompilerar kod som aldrig körs. På telefoner är den andra kostnaden störst – en telefon i mellanklassen kan behöva flera gånger längre tid för att bearbeta ett skript än för att ladda ner det. Under tiden kan sidan inte reagera på tryck eller rullning.
Kod som inte används samlas på hög på samma sätt som oanvänd CSS: ramverk och bibliotek levererar funktioner som du inte använder, och gammal kod tas sällan bort. Varje besökare betalar för den vid varje sidvisning.
Så åtgärdar du problemet
- Ta bort skript som sidan inte längre behöver, inklusive taggar för tjänster som du har slutat använda.
- Dela upp stora paket så att varje sida bara läser in den kod den använder. Moderna byggverktyg stöder koddelning, vilket gör detta automatiskt.
- Läs in kod för funktioner under den synliga delen av sidan eller funktioner som ska aktiveras vid behov – modaler, spelare och widgetar – först när de behövs, i stället för direkt:
// Läser bara in chattwidgeten när besökaren efterfrågar den
button.addEventListener('click', async () => {
const { openChat } = await import('./chat.js');
openChat();
});
Så testar Silktide detta
- Läs in sidan i en riktig webbläsare och registrera vilka delar av varje skript som körs medan sidan läses in.
- Mät för varje skript hur många av dess byte som aldrig kördes.
- Rapportera varje skript med betydande slöseri och visa dess aktuella storlek, hur stor andel som inte används och hur många byte du skulle kunna spara.
Felsökning
Koden körs, men inte när sidan läses in
Mätningen omfattar den inledande inläsningen. Kod som körs först senare – formulärvalidering, menyhantering och funktioner bakom klick – räknas som oanvänd även om sidan behöver den så småningom. Den koden lämpar sig väl för att läsas in vid behov i stället för direkt.
Den oanvända koden finns i ett tredjepartsskript
Du kan vanligtvis inte minska någon annans paket, men du kan styra när det läses in. Se kod från tredje part och fasader för kod från tredje part för olika metoder.