Organic Basics har beskæftiget sig med at producere og sælge bæredygtigt tøj online siden 2014. Vi forsøger hele tiden at finde ud af, hvordan vi kan blive endnu bedre til bæredygtighed, og sidste år fik det os til at opbygge en version med lav miljøpåvirkning af vores onlinebutik.
Versionen af vores websted med lav miljøpåvirkning reducerer CO2-udledningen med op til 70 % ved hjælp af nogle af de teknikker, der er beskrevet nedenfor. Endnu vigtigere er det, at webstedet fortæller historien om, at bæredygtighed ikke kun er vigtig for de produkter, du sælger, men også for hvordan du sælger dem.
Vi havde læst mere og mere om bæredygtige websteder rundt omkring på internettet. Low Tech Magazines solcelledrevne websted og Wholegrain Digitals beregner til websteders carbonaftryk var dukket op som inspiration i forskellige Slack-kanaler, så vi besluttede os for selv at begynde at eksperimentere.
Enkle regler med uendelige muligheder
Først læste vi op på, hvordan man faktisk bygger et bæredygtigt websted, og blev oversvømmet af tips og tricks. Vi indså hurtigt, at vi ikke kunne gøre alting og var nødt til at begrænse mulighederne.
Inspireret af Dogme 95-manifestet og dets kyskhedsløfter skrev vi et manifest med 10 regler for at opbygge et websted med lav miljøpåvirkning. Ligesom kyskhedsløfterne balancerer de mellem at være hyperpræcise og åbne for fortolkning.
Det giver designere og udviklere plads til at finde de løsninger, der fungerer bedst med deres tekniske opsætning, uden at gå på kompromis med bæredygtigheden. Reglerne foreskriver ikke brugen af bestemte teknologier, og derfor kan disse udvikle sig sammen med den teknologiske udvikling.
Jeg gennemgår de 10 regler nedenfor og kommer med nogle idéer til, hvordan du kan implementere dem på dit eget websted.
1. Indlæs ikke billeder, før brugeren aktivt anmoder om dem
Billeder bidrager i høj grad til dataforbruget på ethvert websted, og det gælder især for webshops. Vi er nødt til at vise vores produkter visuelt, ofte fra flere vinkler eller på forskellige modeller.
Det vigtige her er, at vi kun indlæser de billeder, som brugerne faktisk har brug for at se. Det kan betyde, at billederne først indlæses, når en bruger ruller ned ad en side, når vedkommende klikker sig gennem et diasshow, eller at de endda skjules, indtil brugeren klikker på “vis billede”.
Denne regel er lidt vanskelig, fordi illustrationer i form af skalerbare vektorgrafikker (SVG'er) stadig er tilladt, men størrelsen på en SVG er utrolig lille sammenlignet med de fleste billeder. Vi har udnyttet dette på vores websted ved at vise illustrationer i vores kollektionsgitter (se nedenfor) og kun vise billeder på produktsiden, når en bruger aktivt vælger at indlæse et diasshow.
Have an account? Log In
2. Minimer strømforbruget på brugerens enhed
Denne regel kan være svær at måle, men den er ikke desto mindre vigtig. Den primære årsag til at inkludere den er at sikre, at fokus ikke kun er på, hvad der sker under overførslen af filer, men også på, hvad disse filer gør, når de når frem til brugerens enhed.
I øjeblikket fokuserer vi primært på brugen af animationer og mængden af scripts, der kører aktivt på dit websted. Enhver brug af 3D kan også virkelig påvirke enhedens batteri.
Nogle af de spørgsmål, du kan stille dig selv for at arbejde med denne regel, er:
- Bidrager denne animation / 3D / dette script til brugeroplevelsen, eller er det bare fyld?
- Kan vi begrænse, hvor meget vi bruger denne animation / 3D / dette script på webstedet?
- Kan vi forenkle denne animation / 3D / dette script, så det kun gør præcis det, det skal?
Relateret læsning: Sådan træffer du mere ansvarlige beslutninger om design af brugeroplevelser
3. Tilpas dig, så du afspejler mængden af vedvarende energi, dit websted kører på
Med den måde, energinettene og internettet fungerer på i øjeblikket, kan ingen websteder køre 100 % på vedvarende energi. Selv Google, som i stigende grad fokuserer på vedvarende energi til driften af deres datacentre, opnår ikke dette.
Det, vi kan gøre i stedet, er at få vores websteder til at tilpasse sig mængden af vedvarende energi i elnettet. Mange energiselskaber, såsom Barry, gør allerede noget lignende ved at tilbyde deres kunder en app, der viser, hvornår elektriciteten har en lavere kulstofintensitet (se nedenfor).
På Organic Basics-webstedet med lav miljøpåvirkning bruger vi API'et fra carbonintensity.org.uk til at levere data til os. API'et giver gratis og nem adgang til data om kulstofintensiteten i forskellige regioner i Storbritannien. Et alternativ ville være Electricity Map API, som er ret dyrt, men har data fra mange flere regioner rundt om i verden. Ulempen ved deres API er adgangsprisen.
Vi var nødt til at vælge datacentret i London, eftersom vores websted hostes på Google Cloud, og det er den eneste mulighed i Storbritannien. Ironisk nok ligger dette datacenter i en af de regioner med højere kulstofintensitet blandt Googles cloud-hostingtilbud.
Afhængigt af kulstofintensiteten ændrer vi kvaliteten af de billeder, der vises, og begrænser også antallet af animationer. Hvis elektriciteten har en meget høj kulstofintensitet, lukker vi endda webstedet helt ned.
I stedet viser vi en helt enkel side, der informerer vores kunder om, at webstedet ikke er tilgængeligt. Den giver endda et estimat af, hvornår de kan få adgang til webstedet igen, baseret på prognosedata fra API'et på carbonintensity.org.uk. Siden vi lancerede webstedet, har det været utilgængeligt i cirka 12,5 timer.
4. Informér brugeren om konsekvenserne af deres browseradfærd
Når jeg handler online, forventer jeg at kunne se, hvor meget indholdet i min indkøbskurv koster. Det giver mig mulighed for at finde ud af, om jeg stadig har penge at bruge, eller om jeg er nødt til at lede efter rabatter. På samme måde bør vi informere vores kunder om, hvilken indvirkning deres browseradfærd har på klimaet.
På vores websted beregner vi løbende de udledninger, som en bruger akkumulerer, mens vedkommende navigerer rundt. På den måde kan brugerne blive fortrolige med, hvad kulstofudledninger er, og hvordan de hænger sammen med brugen af websteder. Hvis det er muligt, bør du også selv spore disse udledninger, fordi det i sidste ende er webstedsejerens ansvar at reducere dem.
5. Brug ikke videoer
Vi elsker videoer hos Organic Basics, men de kan virkelig ødelægge et websteds kulstofbudget. Denne regel er uden sammenligning den strengeste af de 10, men der er en rigtig god grund til det.
Internettet er i stigende grad blevet domineret af video, og i stedet for at følge tendensen besluttede vi os for at gå imod den. Hvis vi virkelig skal bekæmpe klimakrisen, er det ikke nok blot at optimere og minimere; vi har brug for afvækst.
Med denne regel tvinger vi dig til at tænke ud over videoafspilleren og overveje, hvordan du kan tilføje bevægelse og dynamik uden at være afhængig af at indlæse den ene MB efter den anden med videoindhold. Som alternativ kan du overveje at bruge CSS- eller SVG-animationer. Nå ja, og det gælder i endnu højere grad for GIF'er. Lad. Være. Med. At. Bruge. GIF'er.
6. Gem data lokalt på brugerens enhed for at minimere dataoverførsel
Alt indhold, du viser på dit websted, kan potentielt gemmes lokalt på brugerens enhed. Der er ingen grund til at downloade noget to gange, hvis det sandsynligvis ikke ændrer sig.
De fleste udviklere vil allerede genkende denne regel som vigtig. Den optimerer dit websteds ydeevne og reducerer samtidig dets miljøpåvirkning.
For at opnå dette kan du overveje at undersøge muligheden for at opbygge dit websted som en progressiv webapp og give adgang offline.
7. Komprimer alle data mest muligt
Når dine filer når frem til brugerens enhed, skal du sørge for, at de bliver der, indtil de bliver opdateret. Det kaldes caching. Men før de overhovedet når frem, skal du sørge for, at filerne er så små som muligt.
Minificér din CSS og JavaScript, og komprimér dine billeder. Mange moderne rammeværker, såsom Nuxt.js eller Next.js, udfører dette arbejde for dig for mange filtyper.
Det er virkelig en selvfølge, og ligesom caching giver det også mening ud fra et ydeevneperspektiv.
8. Indlæs kun de mest afgørende programmeringsscripts, rammeværker og cookies
Hver gang du tilføjer et bibliotek eller et eksternt script til din kode, øger du sidens størrelse. Selv hvis biblioteket kun fylder 1 kb, bliver det hurtigt til 1 MB, hvis 1000 brugere indlæser siden.
Denne regel er her for at minde dig om at overveje hvert eneste script, framework og hver cookie, du tilføjer. Det er ordet “afgørende”, du bør fokusere på her. Konverteringssporing og analyse er afgørende på alle webshops, men er det virkelig nødvendigt på hver eneste side?
Disse overvejelser passer godt sammen med lidt fokus på privatliv, eftersom GDPR og lignende reguleringer kræver samtykke, før scripts indlæses.
9. Begræns mængden af lys, der udsendes fra skærmen
Siden vi offentliggjorde manifestet, har vi modtaget kommentarer, der antyder, at denne regel faktisk ikke gør nogen forskel, fordi brugen af mørk tilstand kun reducerer energiforbruget på OLED-skærme.
Og vi siger: Det er godt for brugere med OLED-skærme! På Organic Basics' websted med lav påvirkning bruger vi stadig nogle hvide farver her og der, fordi det er en vigtig del af vores brandoplevelse. Som eksemplet nedenfor viser, introducerer vi dog også et gult skær såvel som en grå nuance for at begrænse mængden af lys, der udsendes fra skærmen.
More Articles
10. Optimér og begræns brugen af brugerdefinerede skrifttyper
Til sidst kommer vi til brugen af brugerdefinerede skrifttyper. Skrifttyper udgør ikke rigtig en stor del af udledningen forbundet med websteder, men det kan let komme ud af kontrol.
Derfor holdt vi os til blot én enkelt brugerdefineret skrifttype på webstedet med lav påvirkning. Vi gik også så langt som til at fjerne bestemte tegn fra tegnsættet. Der er virkelig ikke behov for kyrilliske tegn på en engelsksproget side.
Det næste skridt
Hvis du følger disse 10 regler, er du bestemt godt på vej til at omdanne din webshop til en version med lav påvirkning. Endnu vigtigere er det, at du har gennemgået processen med at se dit websted fra et bæredygtighedsperspektiv og som en vigtig brik i bæredygtighedspuslespillet.
Når du overvejer disse regler, er det vigtigt, at du finder det, der fungerer bedst for dit brand. Ikke alle regler er lige strenge, og det bør du udnytte. Dit websted med lav påvirkning er ikke det samme som mit, og det bør det heller ikke være.
Et bæredygtigt internet stopper dog ikke bare ved elektricitet og energieffektivitet, som er fokus for disse 10 regler. Hvis vi udvider perspektivet, er vi også nødt til at begynde at overveje de materialer, som vores enheder, datacentre og netværk er lavet af.
Internettet er bygget på (hilariske) kattememes og blogs, men det er også bygget med meget virkelige sjældne jordartsmineraler, som ofte udvindes af mennesker under dårlige arbejdsforhold og med store miljømæssige omkostninger.
Inden for de seneste par år har Fairphone givet os en mere bæredygtig smartphone, men samtalen om internettet som helhed er slet ikke begyndt endnu. Med andre ord har vi brug for en Fairphone til serverinfrastruktur.
Relateret læsning: Udfordr og motiver dit team til at gøre planeten til en interessent på dit websted
Mere om alt inden for bæredygtighed: Håndbogen om bæredygtig e-handel
