Critical path CSS exempel

Strukturell CSS inkluderas i HTML-koden

Detta är punkt tjugofyra i listan med hygienfaktorer, det där du ska kolla upp någon gång emellanåt.

Detta gör att sidan kan presentera sig snabbare och låta användaren påbörja sin användning innan precis allt laddats ner. Om du googlar runt efter detta så kan du kolla efter Critical Path CSS.

Det hela går till på det, för många utvecklare, tveksamma sättet att man inkluderar lite av CSS-koden rakt in i varje sidvisning, direkt via en style-tagg i kodens sidhuvud. Det här är något vi som kodat för webben kämpat för att bli av med och fortfarande anses det delvis som att CSS-kod i webbsidor som slarvig kod (så räkna inte med att alla utvecklare håller med dig om att detta är en bra ide, ännu i alla fall).

Anekdot från mars 2015 – utvecklare trodde inte sina ögon

Ja, jag har detta i koden på Webbstrategi för alla, åtminstone i skrivande stund. När jag höll en föreläsning om webbprestanda inför 40-talet utvecklare och tekniker satt många och gapade när de fick syn på koden bakom denna webbplats. Detta på en bild om att ta bort onödiga mellanslag, tabbar med mera ur HTML-koden så jag hade tyvärr inte förvarnat om att all denna extra kod lagts dit med eftertanke och omsorg (note to self: ska nog ta upp detta nästa föreläsning, så ingen behöver ställa frågan och känna sig uppläxad).

Jag hade ju givetvis inlett med att jag välkomnar frågor, så en av utvecklarna tog mod till sig: “Men Marcus, är det inte väldigt dålig praxis att ha CSS i HTML-koden?!” Jag är ju beredd att hålla med, det känns fortfarande skumt att se det i koden, men det är bara att vika ner sig och inse att den upplevda prestandan får gå före. Det handlar ju ändå om användarna till syvene och sist.

Rena rama magin, men vad är nackdelen?

I och med att man lägger in kod, som på inget sätt är unik per sida, så gör man alla sidors HTML-kod tyngre. Tanken är att man lägger in bara det som gör att sidan kan visa upp sig snabbare, det vill säga det som sätter de yttre ramarna för en sida.

Det här är ett klockrent exempel på när upplevd prestanda och teoretisk prestanda krockar. Egentligen blir sidvisningen några kilobyte tyngre, men användaren får syn på webbplatsen snabbare och kan därmed börja använda den – hen får en upplevelse av bättre flyt.

Verktyg för critical path css

Det finns en Critical Path CSS Generator på webben som kan hjälpa dig sålla fram vilken CSS du ska inkludera i sidhuvudet. Eller om man själv eller någon man känner har svart bälte i CSS så kan man göra detta själv.

Sedan placerar man detta i head-taggen i en style-tagg, validerar sidan på W3C och om allt går igenom är det frid och fröjd.

Leave a Reply

Your email address will not be published. Required fields are marked *