WebperfStilmallar är svenska för CSS (Cascading Style Sheet) vilket är en lösning, tro det eller ej, från 90-talet, skapat av Microsoft, för att skilja formgivning från innehållet på en webbsida.
Det är svårt att argumentera för att en besökare på en webbplats har nytta av att stilmallen är uppdelad på flera filer. För utvecklaren som skapade webbplatsen däremot kan det vara mycket smidigt att ha flera stilmallar.
Hur många CSS-filer måste du ha?
En stilmall som nollställer alla avstånd till webbläsarens ytterkanter är inte ovanligt (så kallad reset.css), en till för grundläggande design, å en för gemensamma färger så man följer den grafiska profilen, en ytterliggare CSS-fil för att sajten ska följa responsiv webbdesign (vilket ofta är ett tillägg på befintlig webb), sen en till för att sätta färger på den lokala versionen av webbplatsen.
Hmmm, hur många är vi uppe i? 5 stycken. Sen tillkommer det inte sällan några stycken beroende på dina tillägg i Wordpress (eller fulhackande webbkonsulter).
Men låt oss nöja oss med 5 CSS-filer att ladda ner, så vi är på säkra sidan i ett litet matematiskt exempel.
Varför minimera antalet stilmallar?
Anledningen till varför du vill ha så få stilmallar, CSS-filer alltså, är att varje fil som ska laddas ner har en väntetid innan den börjar skickas till besökaren. Detta beror på vad kidsen av idag kallar för lagg. Exakt hur lång denna väntetid är beror på åtminstone tre faktorer:
- Din webbserver som sänder filen.
- Nätverket mellan servern och besökaren.
- Besökarens egna uppkoppling till nätet.
På grund av denna väntetid vill man normalt sett ha så få filer som möjligt att skicka till en besökare. Ju fler filer desto mer tid som går till spillo på väntan.
Ta exemplet ovan med fem CSS-filer. I bästa tänkbara scenario kommer det inte märkas alls, då räknar vi kallt med att besökarna sitter på en trådad uppkoppling, solen skiner, alla utom dina besökare är ute i någon stadspark och grillar korv å dricker rosévin, men just din tilltänkta målgrupp är de enda som använder internet.
I ett mer rimligt scenario kommer åtminstone någon i din tilltänkte målgrupp vara i den sitsen att de har en tveksam trådlös 3G-uppkoppling med svarstider på 0,1 sekunder. Det innebär att det går åt en halv sekund för att vänta på att få reda på hur innehållet ska se ut, vilka färger och teckensnitt som används och hur högerkolumnen ska falla in i botten på sidan för mobila besökare. Då har vi inte räknat in tiden det tar att överföra CSS-filernas faktiska innehåll - bara den tid det tar att vänta på filerna.
Varför har man mer än en endaste stilmall?
Ja, det kan man faktiskt undra. Om jag spekulerar, och drar växlar på mina erfarenheter som webbutvecklare, skulle jag påstå att det beror på lättja i kombination med oprecisa krav från beställaren (läs: man skyller ifrån sig och menar att kunden ska kunna webbutveckling bättre än de webbutvecklare man i upphandlingen sålde in som landets främsta experter).
Det är alltid lite för enkelt att skylla på beställaren. Just i detta fallet kan det tillkomma fler CSS-filer för besökaren att ladda ner för varje “snabbfix” som görs på en webbplats. Eller om du nu kör Wordpress får du passa dig för vilka extrafiler ett plugin behöver (läs mer om testbarhet).
Fulhack, snabbfix, latmaskar, okunskap eller ingen yrkesheder?
Jag har dessvärre varit med om att kollegor lagt in en CSS-hänvisning i botten på en sida. När jag frågade varför de valde att skita i webbstandard (man får inte länka in CSS-filer där) och tillföra ytterligare en fil som fördröjer inladdningen av en webbplats fick jag till svar att det var den snabbaste lösningen. Är man inte överens om någon form av lägstanivå av kvalitet är det tyvärr bara att hålla med, det är absolut enklast och snabbast att göra fulhack - det är därför det heter fulhack…
