Välj ditt land
...

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.

image

Varför är det viktigt med prestanda?

  • Kundnöjdheten sjunker med 16% för varje sekund som en sida laddar.

  • 64% av besökare som är missnöjda över webbplatsvistelsen väljer att köpa tjänster eller produkter någon annanstans.

  • Ett snittbesök ligger på 8,9 sidor när laddtiden är under två sekunder, men endast 3,3 sidor när laddtiden är närmare 8 sekunder.

Källor: LoadStorm, Econsultancy

Siffrorna talar för sig själv. God prestanda påverkar verkligen besökarnas nöjdhet vid ett besök, vilket direkt påverkar konverteringsfrekvens eller andra målbilder för webbplatsen. Då sökmotorerna helst vill visa upp sökförslag med god användarvänlighet spelar givetvis prestandan en viktig roll. Med andra ord, prestandan påverkar rankingen i det organiska sökresultatet.

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:

Core Web Vitals metrics


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.

image

Resultat

Sidstorlek startsida
Före: 2,9 MB
Efter 1,4 MB
”Förbättring”: 1,5 MB

Sidinläsningstid
Före: 5,68 sekunder
Efter: 1,08 sekunder
Förbättring: 4,6 sekunder

Google Lighthouse prestanda-betyg (max 100)

Mobil (Google Chrome)

Före: 40
Efter: 88
Förbättring: 48

Dator (Google Chrome)
Före: 65
Efter: 99
Förbättring: 34

Testa prestandan själv

Vill du se hur din egna webbplats, eller kanske dina konkurrenter, presterar utifrån Googles mätvärden gällande prestanda och användarvänlighet? 

*Nedan gäller för Chrome och Edge. Använder du Firefox kan du ladda ner ett Lighthouse-plugin.

  1. Gå in på den enstaka webbsidan du vill testa
  2. Tryck F12 eller högerklicka > Inspect/Inspektera
  3. Gå till tabben "Lighthouse"
  4. Välj mätvärdeskategorier och om du vill se en rapport över mätvärden kopplat till mobila enheter eller datorer
  5. Generate report

* Notera att rapporten visualiserar labbdata, vilket kan ge olika resultat om du genererar en rapport flera gånger.

Behöver ni hjälp med SEO?

Vi kan styra upp, projektleda och hjälpa er med ert SEO-arbete. 

Slutsats

Av ren nyfikenhet utförde vi en jämförelseanalys av våra 11 närmsta branschkollegors startsidor, via Lighthouse report för mobila enheter i Google Chrome. Soprasteria.se hamnade på en förstaplats på 88 poäng av 100 möjliga, där resultaten sträckte sig mellan 18 och 80 och hade ett medelvärde på 46,5. Vi kan därmed säga att Soprasteria.se har tagit av sig sina skomakarbarns skor och lyckats bli snabbast i branschen.

Tycker du att vår prestandaresa var inspirerande? Vill du göra en liknande resa för din webbplats men behöver hjälp? Då är det bara att höra av sig till oss.

Läs mer om Sopra Steria Experience Solutions som bygger snabba, stabila och säkra webblösningar

test

Inläggsförfattare