Manifestet för låg påverkan: Organic Basics 10 riktlinjer för att bygga grönare webbplatser
Organic Basics har varit verksamt med att producera och sälja hållbara kläder online sedan 2014. Vi försöker ständigt hitta sätt att bli ännu bättre på hållbarhet, och förra året ledde detta till att vi byggde en version med låg miljöpåverkan av vår nätbutik.
Versionen av vår webbplats med låg miljöpåverkan minskar koldioxidutsläppen med upp till 70 % genom att använda några av teknikerna som beskrivs nedan. Ännu viktigare är att webbplatsen berättar historien om att hållbarhet inte bara är viktigt för produkterna du säljer, utan också för hur du säljer dem.
Vi hade läst allt mer om hållbara webbplatser över hela internet. Low Tech Magazines solcellsdrivna webbplats och Wholegrain Digitals koldioxidkalkylator för webbplatser hade dykt upp som inspiration i olika Slack-kanaler, så vi bestämde oss för att börja experimentera själva.
Continue Reading for Free
Create a free account to finish this article, plus get ongoing access to timely insights and practical resources.
Have an account? Log In
Enkla regler med oändliga möjligheter
Först läste vi på om hur man faktiskt bygger en hållbar webbplats och överöstes av tips och tricks. Vi insåg snart att vi inte kunde göra allt och behövde begränsa alternativen.
Inspirerade av Dogme 95-manifestet och dess kyskhetslöften skrev vi ett manifest med 10 regler för att bygga en webbplats med låg miljöpåverkan. Precis som kyskhetslöftena balanserar de mellan att vara hyperdetaljerade och öppna för tolkning.
Detta ger designers och utvecklare utrymme att hitta de lösningar som fungerar bäst för deras tekniska miljö, utan att kompromissa med hållbarheten. Reglerna anger inte att någon särskild teknik måste användas, och därför kan teknikerna utvecklas i takt med den tekniska utvecklingen.
Jag går igenom de 10 reglerna nedan och ger några idéer om hur du kan tillämpa dem på din egen webbplats.
1. Läs inte in några bilder innan användaren aktivt har efterfrågat dem
Bilder bidrar i stor utsträckning till dataanvändningen på alla webbplatser, och detta gäller särskilt e-handelsbutiker. Vi behöver visa våra produkter visuellt, ofta från flera vinklar eller på olika modeller.
Det viktiga här är att vi bara läser in de bilder som användarna faktiskt behöver se. Det kan innebära att bilder bara läses in när en användare rullar ned på en sida, när hen klickar sig igenom ett bildspel eller till och med att de döljs tills användaren klickar på ”visa bild”.
Den här regeln är lite knepig eftersom illustrationer i form av skalbara vektorgrafikfiler (SVG) fortfarande är tillåtna, men storleken på en SVG-fil är otroligt liten jämfört med de flesta bilder. Vi har använt detta på vår webbplats genom att visa illustrationer i vårt samlingsrutnät (se nedan) och bara visa bilder på produktsidan när en användare aktivt väljer att läsa in ett bildspel.
2. Minimera energiförbrukningen på användarens enhet
Detta kan vara svårt att mäta, men är ändå viktigt. Det främsta skälet till att ta med detta är att säkerställa att fokus inte enbart ligger på vad som händer när filer överförs, utan också på vad dessa filer gör när de väl når användarens enhet.
För närvarande fokuserar vi främst på två saker här: användningen av animationer och mängden skript som körs aktivt på webbplatsen. All användning av 3D kan också påverka enhetens batteri kraftigt.
Några frågor du kan ställa dig själv för att arbeta med den här regeln är:
- Bidrar den här animationen / 3D-effekten / det här skriptet till användarupplevelsen, eller är det bara utfyllnad?
- Kan vi begränsa hur mycket vi använder den här animationen / 3D-effekten / det här skriptet på webbplatsen?
- Kan vi förenkla den här animationen / 3D-effekten / det här skriptet så att det bara gör exakt det som behövs?
Relaterad läsning: Att fatta mer ansvarsfulla beslut om design av användarupplevelsen
3. Anpassa dig efter mängden förnybar energi som din webbplats drivs med
Med det sätt på vilket energinäten och internet fungerar i dag kan ingen webbplats drivas till 100 % av förnybar energi. Inte ens Google, som i allt högre grad fokuserar på förnybar energi för att driva sina datacenter, uppnår det.
Vad vi kan göra i stället är att låta våra webbplatser anpassa sig efter mängden förnybar energi i elnätet. Många energibolag, som Barry, gör redan något liknande genom att förse sina kunder med en app som visar när elektriciteten har lägre koldioxidintensitet (se nedan).
På Organic Basics webbplats med låg miljöpåverkan använder vi carbonintensity.org.uk:s API för att få tillgång till data. API:et ger fri och enkel tillgång till data om koldioxidintensiteten i olika regioner i Storbritannien. Ett alternativ vore Electricity Map API, som är ganska dyrt men har data från många fler regioner runt om i världen. Nackdelen med deras API är inträdespriset.
Vi var tvungna att välja datacentret i London eftersom vår webbplats finns på Google Cloud och det är det enda alternativet i Storbritannien. Ironiskt nog ligger detta datacenter i en av de regioner med högre koldioxidintensitet bland Googles molnbaserade hostingalternativ.
Beroende på koldioxidintensiteten ändrar vi kvaliteten på bilderna som visas och begränsar även antalet animationer. Om elektriciteten har mycket hög koldioxidintensitet stänger vi till och med ner webbplatsen helt.
I stället visar vi en avskalad sida som meddelar våra kunder att webbplatsen inte är tillgänglig. Den ger även en uppskattning av när de kan komma åt webbplatsen igen, baserat på prognosdata från carbonintensity.org.uk:s API. Sedan vi lanserade webbplatsen har den varit otillgänglig i ungefär 12,5 timmar.
4. Informera användaren om hur deras surfbeteende påverkar miljön
När jag handlar på nätet förväntar jag mig att kunna se hur mycket innehållet i min kundvagn kostar. Då kan jag avgöra om jag fortfarande har pengar att spendera eller om jag behöver leta efter rabatter. På samma sätt bör vi informera våra kunder om hur deras surfbeteende påverkar klimatet.
På vår webbplats beräknar vi kontinuerligt de utsläpp som en användare samlar på sig när hen surfar runt. På så sätt kan de bekanta sig med vad koldioxidutsläpp är och hur de hänger samman med användningen av webbplatser. Om möjligt bör du också själv spåra dessa utsläpp, eftersom det i slutändan är webbplatsägarens ansvar att minska dem.
5. Använd inte videor
Vi älskar videor på Organic Basics, men de kan verkligen förstöra en webbplats koldioxidbudget. Den här regeln är utan tvekan den striktaste av de 10, men det finns en mycket god anledning.
Internet har blivit alltmer dominerat av video, och i stället för att följa trenden bestämde vi oss för att gå emot den. För att verkligen motverka klimatkrisen behöver vi inte bara optimera och minimera – vi behöver nerväxt.
Med den här regeln tvingar vi dig att tänka bortom videospelaren och fundera på hur du kan skapa rörelse och dynamik utan att vara beroende av att ladda in megabyte efter megabyte med videoinnehåll. Överväg att använda CSS- eller SVG-animationer som alternativ. Och det gäller i ännu högre grad GIF-filer. Använd. Inte. GIF-filer.
6. Lagra data lokalt på användarens enhet för att minimera dataöverföringen
Allt innehåll du visar på din webbplats kan potentiellt sparas lokalt på användarens enhet. Det finns ingen anledning att ladda ner något två gånger om det sannolikt inte kommer att ändras.
De flesta utvecklare inser redan att den här regeln är viktig. Den optimerar webbplatsens prestanda och minskar samtidigt dess miljöpåverkan.
För att uppnå detta kan du överväga att bygga webbplatsen som en progressiv webbapp och tillåta åtkomst offline.
7. Komprimera all data så mycket som möjligt
När dina filer har nått användarens enhet bör du se till att de stannar där tills de uppdateras. Det kallas cachning. Men innan de ens når dit måste du se till att filerna är så små som möjligt.
Minifiera din CSS och JavaScript och komprimera dina bilder. Många moderna ramverk, som Nuxt.js eller Next.js, utför det här arbetet åt dig för många filtyper.
Det här är verkligen en självklarhet och, precis som cachning, är det även meningsfullt ur ett prestandaperspektiv.
8. Ladda bara de viktigaste programmeringsskripten, ramverken och kakorna
Varje gång du lägger till ett bibliotek eller ett externt skript i din kod ökar du sidans storlek. Även om biblioteket bara är 1 kb stort blir detta snabbt 1 MB om 1 000 användare läser in sidan.
Den här regeln finns för att påminna dig om att överväga varje enskilt skript, ramverk och cookie som du lägger till. Det är ordet ”avgörande” som du bör fokusera på här. Konverteringsspårning och analys är avgörande i alla e-handelsbutiker, men är det verkligen nödvändigt på varje sida?
Dessa överväganden passar bra ihop med lite integritetshänsyn, eftersom GDPR och liknande regler kräver samtycke innan skript läses in.
9. Begränsa mängden ljus som skärmen avger
Sedan vi offentliggjorde manifestet har vi fått kommentarer som antyder att den här regeln faktiskt inte gör någon skillnad, eftersom mörkt läge bara minskar energianvändningen på OLED-skärmar.
Vi säger: det är bra för användare med OLED-skärmar! På Organic Basics webbplats med låg påverkan använder vi fortfarande vissa vita färger här och där, eftersom det är en viktig del av vår varumärkesupplevelse. Men som exemplet nedan visar introducerar vi också en gul ton, samt en grå nyans, för att begränsa mängden ljus som skärmen avger.
10. Optimera och begränsa användningen av anpassade typsnitt
Slutligen kommer vi till användningen av anpassade typsnitt. Typsnitt står egentligen inte för särskilt mycket i det större perspektivet av utsläpp relaterade till webbplatser, men det kan lätt gå överstyr.
Därför höll vi oss till endast ett enda anpassat typsnitt på webbplatsen med låg påverkan. Vi gick också så långt att vi tog bort vissa tecken från teckenuppsättningen. Det finns verkligen inget behov av kyrilliska på en engelskspråkig sida.
Nästa steg
Om du följer dessa 10 regler är du definitivt på god väg att omvandla din e-handelssida till en version med låg påverkan. Ännu viktigare är att du har gått igenom resan att se din webbplats ur ett hållbarhetsperspektiv och som en viktig del av hållbarhetspusslet.
När du överväger dessa regler är det viktigt att du hittar det som fungerar bäst för ditt varumärke. Alla regler är inte lika strikta, och du bör använda detta till din fördel. Din webbplats med låg påverkan är inte samma som min, och det bör den inte heller vara.
Ett hållbart internet stannar dock inte bara vid elektricitet och energieffektivitet, vilket är fokus för dessa 10 regler. Om vi vidgar perspektivet behöver vi också börja ta hänsyn till materialen som våra enheter, datacenter och nätverk är tillverkade av.
Internet är byggt på (hilariska) kattmemer och bloggar, men det är också byggt av mycket verkliga sällsynta jordartsmetaller som ofta bryts av människor under dåliga arbetsförhållanden till stora kostnader för miljön.
Under de senaste åren har Fairphone gett oss en mer hållbar smartphone, men diskussionen om internet som helhet har inte alls tagit fart. Med andra ord behöver vi en Fairphone för serverinfrastruktur.
Relaterad läsning: Utmanar och motiverar ditt team att göra planeten till en intressent på din webbplats
Mer om allt som rör hållbarhet: Handboken för hållbar e-handel
