Organic Basics har drevet med produksjon og salg av bærekraftige klær på nettet siden 2014. Vi prøver hele tiden å finne ut hvordan vi kan bli enda bedre på bærekraft, og i fjor førte dette til at vi utviklet en lavpåvirkningsversjon av nettbutikken vår.
Lavpåvirkningsversjonen av nettstedet vårt reduserer karbonutslippene med opptil 70 % ved å bruke noen av teknikkene som er beskrevet nedenfor. Enda viktigere er det at nettstedet forteller historien om at bærekraft ikke bare er viktig for produktene du selger, men også for hvordan du selger dem.
Vi hadde lest mer og mer om bærekraftige nettsteder rundt omkring på internett. Low Tech Magazines soldrevne nettsted og Wholegrain Digitals karbonkalkulator for nettsteder hadde dukket opp som inspirasjon i flere Slack-kanaler, så vi bestemte oss for å begynne å eksperimentere selv.
Enkle regler med uendelige muligheter
Først leste vi oss opp på hvordan man faktisk bygger et bærekraftig nettsted, og ble overveldet av tips og triks. Vi innså snart at vi ikke kunne gjøre alt, og at vi måtte begrense alternativene.
Inspirert av Dogme 95-manifestet og dets kyskhetsløfter skrev vi et manifest som inneholder 10 regler for å bygge et lavpåvirkningsnettsted. I likhet med kyskhetsløftene balanserer de mellom å være svært spesifikke og åpne for tolkning.
Dette gir designere og utviklere rom til å finne løsningene som fungerer best for deres tekniske oppsett, uten at det går på bekostning av bærekraft. Reglene spesifiserer ikke bruk av bestemte teknologier, og disse kan derfor utvikle seg parallelt med den teknologiske utviklingen.
Jeg skal gå gjennom de 10 reglene nedenfor og komme med noen ideer til hvordan du kan implementere dem på ditt eget nettsted.
1. Ikke last inn bilder før brukeren aktivt ber om dem
Bilder bidrar i stor grad til databruken på alle nettsteder, og dette gjelder spesielt nettbutikker. Vi må vise produktene våre visuelt, ofte fra flere vinkler eller på ulike modeller.
Det viktige her er at vi bare laster inn bildene brukerne faktisk trenger å se. Det kan bety at bilder bare lastes inn når en bruker ruller nedover på en side, når de klikker seg gjennom en lysbildefremvisning, eller at bildene skjules helt til en bruker klikker på «vis bilde».
Denne regelen er litt vanskelig fordi illustrasjoner i form av skalerbar vektorgrafikk (SVG-er) fortsatt er tillatt, men størrelsen på en SVG er utrolig liten sammenlignet med de fleste bilder. Vi har benyttet oss av dette på nettstedet vårt ved å vise illustrasjoner i samlingsoversikten vår (se nedenfor), og bare vise bilder på produktsiden når en bruker aktivt velger å laste inn en lysbildefremvisning.
Have an account? Log In
2. Minimer strømforbruket på brukerens enhet
Dette kan være vanskelig å måle, men er likevel viktig. Hovedårsaken til at vi har tatt det med, er å sikre at fokuset ikke bare ligger på det som skjer under overføringen av filer, men også på hva disse filene gjør når de først når brukerens enhet.
Akkurat nå er de to viktigste tingene vi fokuserer på her, bruken av animasjoner og mengden skript som kjører aktivt på nettstedet ditt. All bruk av 3D kan også belaste batteriet på enheten kraftig.
Noen av spørsmålene du kan stille deg selv for å følge denne regelen, er:
- Bidrar denne animasjonen / 3D-en / dette skriptet til brukeropplevelsen, eller er det bare fyll?
- Kan vi begrense hvor mye vi bruker denne animasjonen / 3D-en / dette skriptet på nettstedet?
- Kan vi forenkle denne animasjonen / 3D-en / dette skriptet, slik at det bare gjør nøyaktig det det må?
Relatert lesning: Ta mer ansvarlige beslutninger innen brukeropplevelsesdesign
3. Tilpass deg for å gjenspeile mengden fornybar energi nettstedet ditt drives av
Slik energinett og internett fungerer i dag, kan ingen nettsider drives 100 % på fornybar energi. Selv Google, som i stadig større grad fokuserer på fornybar energi for å drive datasentrene sine, oppnår ikke dette.
Det vi kan gjøre i stedet, er å la nettsidene våre tilpasse seg mengden fornybar energi i strømnettet. Mange energiselskaper, som Barry, gjør allerede noe lignende ved å tilby kundene sine en app som viser når strømmen har lavere karbonintensitet (se nedenfor).
På Organic Basics-nettsiden med lav miljøpåvirkning bruker vi API-et til carbonintensity.org.uk for å hente data. API-et gir gratis og enkel tilgang til data om karbonintensiteten i ulike regioner i Storbritannia. Et alternativ ville vært Electricity Map API, som er ganske dyrt, men har data fra mange flere regioner over hele verden. Ulempen med API-et deres er prisen for tilgang.
Vi måtte velge datasenteret i London siden nettstedet vårt ligger på Google Cloud, og dette er det eneste alternativet i Storbritannia. Ironisk nok ligger dette datasenteret i en av regionene med høyere karbonintensitet blant Googles tilbud innen skyhosting.
Avhengig av karbonintensiteten endrer vi kvaliteten på bildene som leveres, og begrenser også antallet animasjoner. Hvis strømmen har svært høy karbonintensitet, stenger vi til og med nettstedet helt.
I stedet viser vi en enkel side som informerer kundene våre om at nettstedet ikke er tilgjengelig. Den gir også et anslag på når de kan få tilgang til nettstedet igjen, basert på prognosedata fra API-et til carbonintensity.org.uk. Siden vi lanserte nettstedet, har det vært utilgjengelig i omtrent 12,5 timer.
4. Informer brukeren om konsekvensene av surfeatferden deres
Når jeg handler på nettet, forventer jeg å kunne se hvor mye innholdet i handlekurven koster. Da kan jeg finne ut om jeg fortsatt har penger å bruke, eller om jeg må lete etter rabatter. På samme måte bør vi informere kundene våre om hvilken innvirkning surfeatferden deres har på klimaet.
På nettstedet vårt beregner vi fortløpende utslippene en bruker samler opp mens vedkommende surfer rundt. På denne måten kan de bli kjent med hva karbonutslipp er, og hvordan de henger sammen med bruk av nettsteder. Hvis det er mulig, bør du også spore disse utslippene selv, fordi det til syvende og sist er nettstedseieren som har ansvaret for å redusere dem.
5. Ikke bruk videoer
Vi elsker videoer hos Organic Basics, men de kan virkelig ødelegge et nettsteds karbonbudsjett. Denne regelen er uten tvil den strengeste av de 10, men det finnes en svært god grunn.
Internett har i stadig større grad blitt dominert av video, og i stedet for å følge trenden bestemte vi oss for å gå imot den. For å virkelig bekjempe klimakrisen trenger vi ikke bare å optimalisere og minimere; vi trenger nedvekst.
Med denne regelen tvinger vi deg til å tenke utenfor videospilleren og vurdere hvordan du kan tilføre bevegelse og dynamikk uten å være avhengig av å laste inn megabyte etter megabyte med videoinnhold. Som et alternativ kan du vurdere å bruke CSS- eller SVG-animasjoner. Og det gjelder i enda større grad for GIF-er. Ikke. Bruk. GIF-er.
6. Lagre data lokalt på brukerens enhet for å minimere dataoverføringen
Alt innhold du viser på nettstedet ditt, kan potensielt lagres lokalt på brukerens enhet. Det er ingen grunn til å laste ned noe to ganger hvis det sannsynligvis ikke vil endre seg.
De fleste utviklere vil allerede kjenne igjen denne regelen som viktig. Den vil forbedre nettstedets ytelse samtidig som den reduserer miljøpåvirkningen.
For å oppnå dette kan du vurdere å bygge nettstedet ditt som en progressiv nettapp og legge til rette for tilgang uten nett.
7. Komprimer alle data så mye som mulig
Når filene dine har nådd brukerens enhet, bør du sørge for at de blir værende der til de oppdateres. Det kalles mellomlagring. Men før de i det hele tatt kommer dit, må du sørge for at filene er så små som mulig.
Minimer CSS og JavaScript, og komprimer bildene dine. Mange moderne rammeverk, som Nuxt.js eller Next.js, gjør dette arbeidet for deg for mange filtyper.
Dette er virkelig en selvfølge, og i likhet med mellomlagring er det også fornuftig med tanke på ytelsen.
8. Last bare inn de viktigste programmeringsskriptene, rammeverkene og informasjonskapslene
Hver gang du legger til et bibliotek eller et eksternt skript i koden din, øker du størrelsen på siden. Selv om biblioteket bare er 1 kb stort, blir dette raskt til 1 MB hvis 1000 brukere laster inn siden.
Denne regelen er her for å minne deg på å vurdere hvert eneste skript, rammeverk og hver informasjonskapsel du legger til. Det er ordet «avgjørende» du bør fokusere på her. Konverteringssporing og analyse er avgjørende i alle nettbutikker, men er det virkelig nødvendig på hver eneste side?
Disse vurderingene passer godt sammen med litt personvernhensyn, siden GDPR og lignende regelverk krever samtykke før skript lastes inn.
9. Begrens mengden lys som sendes ut av skjermen
Siden vi kunngjorde manifestet, har vi mottatt kommentarer som antyder at denne regelen faktisk ikke gjør noen forskjell, fordi bruk av mørk modus bare reduserer energiforbruket på OLED-skjermer.
Vel, sier vi: Det er bra for brukere med OLED-skjermer! På nettstedet med lav miljøpåvirkning til Organic Basics bruker vi fortsatt noen hvite farger her og der, fordi det er en viktig del av merkevareopplevelsen vår. Som eksempelet nedenfor viser, introduserer vi imidlertid også et gult skjær, samt en grå nyanse, for å begrense mengden lys som sendes ut av skjermen.
More Articles
10. Optimaliser og begrens bruken av tilpassede skrifttyper
Til slutt kommer vi til bruken av tilpassede skrifttyper. Skrifttyper står egentlig ikke for så mye i det større bildet av utslipp knyttet til nettsteder, men det kan lett ta overhånd.
Av denne grunnen holdt vi oss til bare én enkelt tilpasset skrifttype på nettstedet med lav miljøpåvirkning. Vi gikk også så langt som å fjerne bestemte tegn fra tegnsettet. Det er virkelig ikke behov for kyrilliske tegn på en engelskspråklig side.
Det neste steget
Hvis du følger disse 10 reglene, er du definitivt godt på vei mot å forvandle nettbutikken din til en versjon med lav miljøpåvirkning. Enda viktigere er det at du har gjennomgått prosessen med å se nettstedet ditt fra et bærekraftsperspektiv og som en viktig brikke i bærekraftspuslespillet.
Når du vurderer disse reglene, er det viktig at du finner ut hva som fungerer best for merkevaren din. Ikke alle regler er like strenge, og du bør bruke dette til din fordel. Nettstedet ditt med lav miljøpåvirkning er ikke det samme som mitt, og det bør det heller ikke være.
Et bærekraftig internett handler imidlertid ikke bare om elektrisitet og energieffektivitet, som er fokuset for disse 10 reglene. Hvis vi utvider perspektivet, må vi også begynne å vurdere materialene som enhetene, datasentrene og nettverkene våre er laget av.
Internett er bygget på (hysteriske) kattememer og blogger, men det er også bygget med svært reelle sjeldne jordartsmineraler som ofte utvinnes av mennesker under dårlige arbeidsforhold, med store miljømessige kostnader.
De siste par årene har Fairphone gitt oss en mer bærekraftig smarttelefon, men samtalen om internett som helhet har ikke kommet i gang i det hele tatt. Med andre ord trenger vi en Fairphone for serverinfrastruktur.
Relatert lesning: Utfordre og motivere teamet ditt til å gjøre planeten til en interessent på nettstedet ditt
Mer om alt som er bærekraftig: Håndboken for bærekraftig netthandel
