WebperfInte sällan laddas det ner en massa Javascript man som besökare aldrig kommer ha användning för. Inte sällan är de uppdelade i flera filer vilket bidrar till extra väntetid. Som vi tidigare i denna checkliste-serie konstaterat är det normalt sett en fördel ju färre filer som behöver skickas till en besökare.
Du kanske frågar dig varför man gör på detta uppenbart slösaktiga sätt och delar upp innehållet i flera filer? Ja, det enkla svaret är att det är enklare att räkna på kostnaden för att en utvecklare ska bli färdig snabbt än all den tid man slösar på besökarnas bekostnad.
Givetvis behöver det ske en avvägning av intressen här. Därför behöver man ha någon form av måttstock över vad som är ok när det gäller användning av Javascript. Just denna punkt handlar om antalet Javascript-filer, att man ska slå ihop dem, men det finns förstås en gräns över hur stor filen får lov att vara för att man ska vinna något.
Vanligt förekommande uppdelning av Javascript
Inte sällan har man några olika kategorier av Javascript-material, exempelvis Javascript som:
- Omvandlar menyn på små skärmar, sätter dit en sån där hamburgermeny vilket sparar massor med plats.
- Stödjer interaktion i formulärfält, exempelvis genom att tala om vilka obligatoriska fält användaren glömt fylla i vid postning.
- Följer med designramverk, exempelvis Twitter Bootstrap, vilket hjälper till med designkomponenter som modala dialogrutor, hur felmeddelanden ska visas (och en massa ytterligare designmagi man valt att inte använda på just sin egen webbplats).
- jQuery-biblioteket slängs ofta med av reflex, men oftast krävs det som komponent av andra komponenter.
Förutom dessa har man ofta fått ett eller flera jQuery-baserade tillägg för bildgallerier, betygsättning av sidor och annat.
Om man inte passar sig får man dessa Javascript i varsin Javascript-fil. För den som väljer att försöka göra ett bra jobb ställs man inför vilka Javascript man ska kombinera till en enda fil (om nu inte alla). Problemet är att du måste göra en avvägning mellan att skicka Javascript-kod som inte kommer användas (alla dina besökare kommer inte se bildgalleriet exempelvis) av varenda besökare och att dela upp det hela i flera logiska grupperingar.
En sak är klar dock, idiotversionen allt för många kör med är att all Javascript laddas ner från varsin fil oavsett om de ens behövs på den sida som anropar dem.
Säg exempelvis att man valt att ha massor med enskilda Javascript-filer, då bör bara de som behövs för en viss undersida laddas ner. Alltså laddas inte Javascript för formulärvalidering ner på en sida som saknar formulär.
Alternativt sätt är lazy loading
Lazy loading är ett designmönster som går ut på att det som behövs för en sidvisning laddas endast ner vid behov. Precis som att bilder i sidfoten inte behöver laddas ner för majoriteten om bara ett fåtal skrollar sig ner dit, kan Javascript-filer laddas ner endast om de kommer användas.
Motivationen till detta är givetvis att inte tynga ner mer än nödvändigt. Kritiken mot att slå samman alla Javascript-filer är ju att då får besökaren ta emot massor med data som är meningslös för deras besök.
Det lazy loading stödjer sig mot är att svarstiden behöver vara mycket låg, det vill säga att det går oerhört snabbt att från besökarens webbläsare få något överfört från webbservern. Det är definitivt inte fallet om besökaren har en trådlös uppkoppling via 3G- eller Edge-nätet. Däremot är det utmärkt för 4G-nätet och givetvis alla modernare trådade uppkopplingar. Så frågan är vilken typ av besökare din webbplats har, och hur stor andel av dina besökare är försumbara för det designmönster du väljer…
Det finns som du förstår anledning att ha en viss prutmån, och i min värld är tre Javascript-filer den prutmånen då det utan särskilt stor ansträngning vid nybyggnation av en webbplats kan vara en (1) enda Javascript-fil.
Utöver antalet Javascript vill man helst inte att de laddas in innan sidan kan visa upp sig, detta kan du kolla i Google Pagespeed numera, tror det står att man ska prioritera synligt innehåll om de tycker att man fallerat (“above the fold”).
