Analys av CMS, hosting och servrar

Knowit Experience hanterar och utvecklar MQ Marqets webbplats, www.mq.se sedan flera år tillbaka. E-handeln är byggd i Optimizely:s CMS med tredjepartssystem som Voyado och Inriver PIM. Med siktet inställt på att leverera en mer hållbar e-handel valde MQ Marqet att utöka vårt uppdrag med att minska växthusgasutsläppen från den digitala och tekniska miljön.

För att få en snabb överblick av nuvarande status använde vi verktyg för att analysera vad som kunde förbättras genom utveckling, redigeringar i CMS samt hosting och servrar. Vi använde verktyg som www.ecograder.com, www.websitecarbon.com och Google Lighthouse för att analysera startsidan, produktsidor, produktlistningsidor och kassan. Dessutom optimerade vi media, implementerade lazy loading på bilder, minskade DOM-komplexiteten och granskade tredjeparts skript.

Förbättrad användarupplevelse och lägre CO2-utsläpp

Alla dessa åtgärder resulterade i märkbara förbättringar, såsom ökad Ecograder-poäng, minskat koldioxidavtryck per sidladdning, förbättrad laddningstid, högre SEO score och bättre överensstämmelse med bästa praxis. Inte minst minskade vi framgångsrikt CO2-utsläppen per sidladdning med 68 procent inom en månad. 

Arbetet vi har gjort på mq.se överensstämmer med våra pågående hållbarhetsinitiativ på MQ, där vi jobbar dagligen för att bli bättre. Jag blev förvånad över hur några initiativ kunde ge så stor effekt. Det ger inspiration att fortsätta vårt engagemang för en hållbar framtid och en grön webbplats.

 

Mattias Liljenberg CDO & CIO, MQ Marqet

Vad vi gjort?

För att nå resultat har vi bland annat:

  • Optimerat media: Vi komprimerade och ändrade storlek på bilder och andra mediafiler, vilket minskar mängden data som överförs och därmed sänker energiförbrukningen som är förknippad med datatransmission, vilket gynnar miljön.
  • Använt Lazy Loading på bilder: Vi implementerade lazy loading av bilder, vilket innebär att bilder endast laddas när de blir synliga för användaren. Detta minskar den initiala laddningstiden och sparar energi genom att inte förhandsladda bilder som kanske inte visas.
  • Minskat DOM på sidor: Att förenkla Document Object Model (DOM) -strukturen på webbsidor minskar resursförbrukningen och kan leda till snabbare laddningstider, samt minska energibehovet för att rendera webbsidor.
  • Sett över hantering av tredjeparts skript: Att minimera eller optimera tredjeparts skript, som analys- eller annonsföljare, kan minska antalet HTTP-förfrågningar och laddningstider för sidor – vilket kan leda till minskad serverbelastning och energiförbrukning. 

Resultat?

  • Sänkt koldioxidavtryck per sidladdning från 2,82 till 1,09 (gram koldioxid)
  • Ökad Ecograder-poäng från 57 till 73
  • Ökad prestationspoäng från 34 till 78 i Lighthouse
  • Ökad SEO score från 59 till 83 i Lighthouse
  • Ökad bästa praxis-poäng från 67 till 95 i Lighthouse
  • Sänkt koldioxidavtryck på Website Carbon Calculator från 78% till 66%

Nästa steg?

Framöver är ambitionen att utveckla arbetet och fortsätta med:

Användning av WebP för bilder

Mindre bildfiler: WebP är ett modernt bildformat som erbjuder hög bildkvalitet med mindre filstorlek. Detta minskar mängden data som överförs över internet och resulterar i mindre energiförbrukning under datatransmissionen. Det minskar också sidoladdningstiderna och förbättrar användarupplevelsen.

Begränsning av objekt i karuseller

Förbättrad sidprestanda: Att minska antalet objekt i karuseller förenklar DOM-strukturen och minskar sidans komplexitet. Något som skapar snabbare sidrendering och en förbättrad användarupplevelse.

Minskad datatransfer: Karuseller med färre objekt innebär mindre innehåll att ladda, vilket minskar datatransfer och energianvändning.

Cachning av innehåll

Snabbare sidoladdningstider: Att cacha återkommande innehåll minskar behovet av att upprepat hämta samma data från servern, vilket resulterar i snabbare sidladdningstider.

Förbättrad användarupplevelse: Snabbare laddningstider förbättrar användarupplevelsen och kan öka återbesök, engagemang och intäkter.

Minska serverförfrågningar

Snabbare sidladdning: Att minska antalet förfrågningar som skickas till servern kan påskynda sidladdningen och förbättra användarupplevelsen.

Lägre serverbelastning: Färre serverförfrågningar minskar belastningen på webbservrarna och leder till minskad energiförbrukning i datacenter.

Kombinerade ansträngningar ger resultat

Även om dessa åtgärder kan bidra till en mer effektiv och miljövänlig webbplats är det viktigt att notera att en 50 procentig minskning av koldioxidavtryck vanligtvis innebär en kombination av insatser, både online och offline. Det kan inkludera förändringar i datacenterinfrastrukturen, servereffektivitet och användning av förnybara energikällor för att driva servrar och datacenter.

Webbutvecklare kan minska sina webbplatsers påverkan på miljön genom att minimera HTTP-förfrågningar, optimera bilder och använda komprimeringstekniker. Dock räcker dessa steg inte. Ett helhetsgrepp som beaktar hela livscykeln för webbplatsen, från design till hosting, krävs. För att lyckas skapa en mer hållbar och miljöväntlig webb krävs samarbete med datacenterleverantörer som använder förnybar energi och gröna metoder – något som blir allt viktigare att tänka på framöver.

""

Hur lösningen bidrar till Agenda 2030

SDG 7 och 13

Denna insats sparar energi för både MQ och deras webbplatsbesökare. Genom att minimera koldioxidavtrycket med metoder som användning av mindre bilder och minskning av antalet skript som lagras i molnet blir hela webbplatsen lättare, vilket minskar behovet av molnlagring. Från besökarnas perspektiv blir varje sidladdning snabbare och kräver mindre energi för att renderas på lokala enheter.

Vill du veta mer?
Urban Nyblom
Business Director, Knowit Experience Stockholm
Kontakta mig
Kontakta mig

Till toppen