Minskat koldioxidutsläpp från MQ:s webb

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, produktlistningssidor 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. 

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-strukturen: 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. 

• 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% 

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.
• Färre datatransfers: 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.

Ä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.

Vill du veta hur vi kan hjälpa dig?

Slå en signal eller skicka ett meddelande så kontaktar jag dig.