Från "Skomakarens barn" till snabbast i branschen

En av grundpelarna i användarvänlighet på webben och SEO (sökmotoroptimering) är prestanda, det vill säga hur snabb och stabil en webbplats är och upplevs. För att förbättra upplevelsen för våra webbplatsbesökare, samt visa upp för allmänheten vad vi på Sopra Steria kan göra i form av prestandaoptimering, valde vi för ett par månader sedan att starta igång ett internt projekt kopplat till prestandaoptimering.

Skomakarens barn

Känner du till uttrycket ”skomakarens barn har alltid sämst på fötterna” eller "skomakarens barn har de sämsta skorna"? Uttryckets poäng är att en expert sällan väljer att lägga ner samma expertis och kraft på sig själv. Uttrycket stämmer in bra på Sopra Sterias webbplats, åtminstone fram tills idag beträffande prestanda och SEO.

Sopra Steria är i grunden ett konsultbolag, med många, extremt kunniga IT-experter och strateger. Vi livnär oss genom att hjälpa våra kunder med verksamhetsutveckling, integrationer av affärssystem, utveckling, data och analys, UX, yada yada. Att bygga snabba och stabila lösningar för våra kunder har länge varit en självklarhet, men för oss själva? Njae, där har vi gått i skomakarens barns fotspår.

Vad gjorde vi?

Att förbättra en webbplats prestanda till samma nivå som vi idag har är ingen snabb fix. Det kräver tålamod, utveckling, testning och multipla analyser, särskilt ifall vi inte vill skala av för mycket engagerande innehåll för våra besökare.

Indexabilitet

Först såg vi till att sökmotorerna har möjlighet att indexera (hitta och synliggöra) sidor som vi vill visualisera i sökmotorer. Detta löste vi genom att bland annat ladda upp en sitemap, laga brutna länkar, sidor med fel och 404-träffar. Ett annat viktigt initiativ är att exkludera sidor som inte behöver synliggöras av sökmotorer, genom metataggen noindex och/eller robots.txt. På så sätt ser vi till att sökmotorernas limiterade ”crawlbudget” allokeras mot viktigare sidor.

Sidstorlek

Sidans storlek är tyngden på allt innehåll som webbläsaren laddar in vid en sidvisning. Vi minskade den genom bildkomprimering, implementation av bildformatet WebP, minifiering av kod och typsnitt, samt lite annat.

Core Web Vitals

Core Web Vitals är några prestandamätvärden som Google lyft fram som extra viktiga. Dessa rullades ut i Googles algoritmer under sommaren 2021 och satte eld i baken på många webbplatsägare. Mätvärdena består av tre delar:

LCP (Largest Contentful Paint)

Mäter hur lång tid det tar innan det största innehållet, det du möts av direkt när du besöker en sida utan att börja scrolla, är synligt.

FID (First Input Delay

Hur lång tid det tar innan sidan är interaktionsbar, det vill säga hur lång tid det tar innan du exempelvis kan scrolla och klicka på länkar.

CLS (Cumulative Layout Shift)

Hur stabil sidans layout är under sidinladdningen, det vill säga hur mycket sidans layout ”hoppar” medan nya element laddas in.

Lazy loading
"Lazy loading” var en viktig ingrediens i vårt prestandaarbete. Lazy loading kan implementeras på olika element och talar om för webbläsaren att innehåll med lazy loading ska laddas in efter att annat innehåll laddas in och ritas upp för besökaren. På så sätt delar vi upp sidans inladdning så att sidan upplevs snabbare (än vad den egentligen är). Vi implementerade givetvis lazy loading på element som inte var nödvändiga vid sidvisningens första sekund, och snabbade i stället upp element som vi ansåg vara ”kritiska” från start.