Organic Basics on valmistanut ja myynyt vastuullisia vaatteita verkossa vuodesta 2014 lähtien. Pyrimme jatkuvasti selvittämään, miten voisimme toimia vieläkin vastuullisemmin, ja viime vuonna tämä johti meidät rakentamaan vähävaikutteisen version verkkokaupastamme.
Verkkosivustomme vähävaikutteinen versio vähentää hiilidioksidipäästöjä jopa 70 prosenttia käyttämällä joitakin alla kuvatuista tekniikoista. Vielä tärkeämpää on, että sivusto kertoo, kuinka vastuullisuus ei ole tärkeää ainoastaan myymiesi tuotteiden kannalta, vaan myös sen kannalta, miten myyt niitä.
Olimme lukeneet yhä enemmän vastuullisista verkkosivustoista eri puolilla internetiä. Low Tech Magazinen aurinkoenergialla toimiva verkkosivusto ja Wholegrain Digitalin verkkosivuston hiililaskuri olivat nousseet esiin inspiraation lähteinä useissa Slack-kanavissa, joten päätimme aloittaa kokeilut itse.
Yksinkertaiset säännöt ja rajattomat mahdollisuudet
Ensimmäiseksi perehdyimme siihen, miten vastuullinen verkkosivusto käytännössä rakennetaan, ja saimme valtavan määrän vinkkejä ja niksejä. Pian ymmärsimme, ettemme voisi tehdä kaikkea ja että vaihtoehtoja oli rajattava.
Saimme inspiraatiota Dogme 95 -manifestista ja sen siveyslupauksista ja kirjoitimme manifestin, joka sisältää 10 sääntöä vähävaikutteisen verkkosivuston rakentamiseen. Siveyslupausten tavoin ne tasapainoilevat äärimmäisen täsmällisyyden ja tulkinnanvaraisuuden välillä.
Tämä antaa suunnittelijoille ja kehittäjille tilaa löytää heidän tekniseen ympäristöönsä parhaiten sopivat ratkaisut ilman, että vastuullisuudesta tingitään. Säännöissä ei määritellä tiettyjen teknologioiden käyttöä, joten ne voivat kehittyä teknologisen kehityksen rinnalla.
Käyn seuraavaksi läpi kaikki 10 sääntöä ja esitän ideoita siitä, miten voit toteuttaa ne omalla sivustollasi.
1. Älä lataa kuvia ennen kuin käyttäjä pyytää niitä aktiivisesti
Kuvat kuluttavat suuren osan minkä tahansa verkkosivuston tiedonsiirrosta, ja tämä koskee erityisesti verkkokauppoja. Meidän on esiteltävä tuotteemme visuaalisesti ja usein useista eri kulmista tai eri mallien päällä.
Tärkeää on, että lataamme vain kuvat, jotka käyttäjien todella tarvitsee nähdä. Tämä voi tarkoittaa kuvien lataamista vasta käyttäjän vierittäessä sivua alaspäin tai hänen selatessaan kuvasarjaa, tai jopa niiden piilottamista, kunnes käyttäjä napsauttaa ”näytä kuva”.
Tämä sääntö on hieman hankala, koska skaalautuvana vektorigrafiikkana (SVG) toteutetut kuvitukset ovat edelleen sallittuja, mutta SVG-tiedoston koko on useimpiin kuviin verrattuna erittäin pieni. Olemme hyödyntäneet tätä sivustollamme näyttämällä kuvituksia mallistoruudukossa (katso alla) ja näyttämällä kuvia tuotesivulla vasta, kun käyttäjä päättää aktiivisesti ladata kuvasarjan.
Have an account? Log In
2. Minimoi käyttäjän laitteen energiankulutus
Tätä voi olla vaikea mitata, mutta se on silti tärkeää. Sen sisällyttämisen ensisijainen syy on varmistaa, ettei huomio kohdistu ainoastaan tiedostojen siirtämiseen, vaan myös siihen, mitä tiedostot tekevät saavuttuaan käyttäjän laitteelle.
Tällä hetkellä keskitymme tässä ensisijaisesti animaatioiden käyttöön ja verkkosivustollasi aktiivisesti suoritettavien komentosarjojen määrään. Myös 3D:n käyttö voi kuluttaa laitteen akkua huomattavasti.
Voit esittää itsellesi seuraavia kysymyksiä tämän säännön soveltamisen avuksi:
- Parantaako tämä animaatio / 3D / komentosarja käyttäjäkokemusta vai onko se vain täytettä?
- Voimmeko rajoittaa tämän animaation / 3D:n / komentosarjan käyttöä sivustolla?
- Voimmeko yksinkertaistaa tätä animaatiota / 3D:tä / komentosarjaa niin, että se tekee vain täsmälleen sen, mitä sen tarvitsee tehdä?
Aiheeseen liittyvä artikkeli: Vastuullisempien käyttäjäkokemuksen suunnittelupäätösten tekeminen
3. Mukauta sivustoa sen käyttämän uusiutuvan energian määrän mukaan
Nykyisillä tavoilla, joilla sähköverkot ja internet toimivat, mikään verkkosivusto ei voi toimia 100-prosenttisesti uusiutuvalla energialla. Edes Google, joka keskittyy yhä enemmän uusiutuvaan energiaan datakeskustensa toiminnassa, ei saavuta tätä.
Sen sijaan voimme mukauttaa verkkosivustomme sähköverkon uusiutuvan energian määrään. Monet energiayhtiöt, kuten Barry, tekevät jo jotain vastaavaa tarjoamalla asiakkailleen sovelluksen, joka näyttää, milloin sähköntuotanto aiheuttaa vähemmän hiilipäästöjä (katso alla).
Organic Basicsin vähävaikutteisella verkkosivustolla käytämme carbonintensity.org.uk-rajapintaa tietojen tarjoamiseen. Rajapinta mahdollistaa helpon ja maksuttoman pääsyn eri alueiden hiili-intensiteettiä koskeviin tietoihin Yhdistyneessä kuningaskunnassa. Vaihtoehtona olisi Electricity Map -rajapinta, joka on melko kallis, mutta tarjoaa tietoja huomattavasti useammilta alueilta ympäri maailmaa. Heidän rajapintansa haittapuolena on käyttöönoton hinta.
Meidän oli valittava Lontoon datakeskus, koska sivustomme on isännöity Google Cloudissa ja se on ainoa vaihtoehto Yhdistyneessä kuningaskunnassa. Ironista kyllä, tämä datakeskus sijaitsee yhdellä Googlen pilvipalvelutarjonnan hiili-intensiivisimmistä alueista.
Hiili-intensiteetin perusteella muutamme tarjottavien kuvien laatua ja rajoitamme animaatioiden määrää. Jos sähköntuotanto aiheuttaa todella paljon hiilipäästöjä, suljemme verkkosivuston jopa kokonaan.
Sen sijaan näytämme pelkistetyn sivun, joka kertoo asiakkaillemme, ettei sivustolle pääse. Sivulla annetaan myös arvio siitä, milloin sivustolle voi jälleen päästä, carbonintensity.org.uk-rajapinnan ennustetietojen perusteella. Sivustomme on ollut sen julkaisun jälkeen poissa käytöstä noin 12,5 tuntia.
4. Kerro käyttäjälle hänen selauskäyttäytymisensä vaikutuksista
Kun teen ostoksia verkossa, odotan näkeväni ostoskorini sisällön hinnan. Näin voin selvittää, onko minulla vielä rahaa käytettäväksi vai pitääkö minun etsiä alennuksia. Vastaavasti meidän pitäisi kertoa asiakkaillemme, millaisia vaikutuksia heidän selauskäyttäytymisellään on ilmastoon.
Verkkosivustollamme laskemme jatkuvasti käyttäjän selaamisen aikana kerryttämät päästöt. Näin hän voi tutustua hiilipäästöihin ja ymmärtää, miten ne liittyvät verkkosivuston käyttöön. Jos mahdollista, sinun pitäisi myös seurata näitä päästöjä itse, koska viime kädessä verkkosivuston omistaja on vastuussa niiden vähentämisestä.
5. Älä käytä videoita
Pidämme Organic Basicsilla videoista, mutta ne voivat todella kasvattaa verkkosivuston hiilibudjettia. Tämä sääntö on ylivoimaisesti tiukin kymmenestä, mutta siihen on erittäin hyvä syy.
Internetin sisältö on yhä enemmän videoiden hallitsemaa, ja trendin seuraamisen sijaan päätimme toimia sitä vastaan. Ilmastokriisin torjumiseksi meidän ei tarvitse vain optimoida ja vähentää kulutusta, vaan tarvitsemme myös kohtuutaloutta.
Tällä säännöllä pakotamme sinut ajattelemaan videosoittimen ulkopuolelta ja pohtimaan, miten verkkosivustolle voi lisätä liikettä ja dynaamisuutta turvautumatta megatolkulla ladattavaan videosisältöön. Vaihtoehtona voit käyttää CSS- tai SVG-animaatioita. Ai niin, tämä koskee kaksin verroin GIF-animaatioita. Älä. Käytä. GIF-animaatioita.
6. Tallenna tiedot paikallisesti käyttäjän laitteelle tiedonsiirron minimoimiseksi
Kaikki verkkosivustollasi näyttämäsi sisältö voidaan mahdollisesti tallentaa paikallisesti käyttäjän laitteelle. Ei ole järkeä ladata jotain kahdesti, jos sen muuttuminen on epätodennäköistä.
Useimmat kehittäjät tunnistavat jo tämän säännön tärkeyden. Se parantaa verkkosivustosi suorituskykyä ja vähentää samalla sen ympäristövaikutuksia.
Tämän saavuttamiseksi voit harkita verkkosivustosi rakentamista progressiiviseksi verkkosovellukseksi ja mahdollistaa käytön ilman verkkoyhteyttä.
7. Pakkaa kaikki tiedot mahdollisimman tehokkaasti
Kun tiedostosi saapuvat käyttäjän laitteelle, varmista, että ne pysyvät siellä, kunnes ne päivitetään. Tätä kutsutaan välimuistiksi. Mutta jo ennen kuin tiedostot saapuvat laitteelle, sinun on varmistettava, että ne ovat mahdollisimman pieniä.
Pienennä CSS- ja JavaScript-tiedostosi sekä pakkaa kuvasi. Monet nykyaikaiset kehykset, kuten Nuxt.js tai Next.js, hoitavat tämän puolestasi monien tiedostotyyppien kohdalla.
Tämä on todella itsestäänselvä toimenpide, ja välimuistin tavoin siitä on hyötyä myös suorituskyvyn kannalta.
8. Lataa vain tärkeimmät ohjelmointikomentosarjat, kehykset ja evästeet
Aina kun lisäät koodiin kirjaston tai ulkoisen skriptin, kasvatat sivun kokoa. Vaikka kirjasto olisi kooltaan vain 1 kt, koko kasvaa nopeasti 1 megatavuun, jos 1 000 käyttäjää lataa sivun.
Tämän säännön tarkoitus on muistuttaa sinua harkitsemaan jokaista lisäämääsi skriptiä, kehystä ja evästettä. Tässä huomio kannattaa kiinnittää sanaan ”kriittinen”. Konversioiden seuranta ja analytiikka ovat kriittisiä kaikissa verkkokaupoissa, mutta ovatko ne todella tarpeellisia jokaisella sivulla?
Nämä näkökohdat sopivat hyvin yhteen myös pienen tietosuojanäkökulman kanssa, sillä GDPR ja vastaavat säädökset edellyttävät suostumusta ennen skriptien lataamista.
9. Rajoita näytön säteilemän valon määrää
Manifestin julkistamisen jälkeen olemme saaneet kommentteja, joiden mukaan tällä säännöllä ei oikeastaan ole merkitystä, koska tumman tilan käyttäminen vähentää energiankulutusta vain OLED-näytöillä.
No, meidän mielestämme se on hyvä asia OLED-näyttöjä käyttäville! Organic Basicsin vähävaikutteisella verkkosivustolla käytämme edelleen joissakin kohdissa valkoisia värejä, koska ne ovat tärkeä osa brändikokemustamme. Kuten alla oleva esimerkki osoittaa, lisäämme kuitenkin myös keltaisen sävyn sekä harmaan vivahteen rajoittaaksemme näytön säteilemän valon määrää.
More Articles
10. Optimoi mukautettujen fonttien käyttö ja rajoita sitä
Lopuksi pääsemme mukautettujen fonttien käyttöön. Fontit eivät muodosta kovin suurta osaa verkkosivustoihin liittyvistä päästöistä kokonaisuudessaan, mutta niiden käyttö voi helposti riistäytyä käsistä.
Tästä syystä käytimme vähävaikutteisella verkkosivustolla vain yhtä mukautettua fonttia. Menimme jopa niin pitkälle, että poistimme merkistöstä tiettyjä merkkejä. Englanninkielisellä sivulla ei todellakaan ole tarvetta kyrillisille merkeille.
Seuraava vaihe
Jos noudatat näitä kymmentä sääntöä, olet ehdottomasti hyvällä tiellä muuttaessasi verkkokaupastasi vähävaikutteisen version. Vielä tärkeämpää on, että olet käynyt läpi matkan, jolla olet tarkastellut verkkosivustoasi kestävyyden näkökulmasta ja tärkeänä osana kestävyyden kokonaisuutta.
Näitä sääntöjä harkitessasi on tärkeää löytää se, mikä toimii parhaiten juuri sinun brändillesi. Kaikki säännöt eivät ole yhtä tiukkoja, ja sinun kannattaa hyödyntää tätä. Sinun vähävaikutteinen verkkosivustosi ei ole samanlainen kuin minun, eikä sen pidäkään olla.
Kestävä internet ei kuitenkaan rajoitu pelkästään sähköön ja energiatehokkuuteen, joihin nämä kymmenen sääntöä keskittyvät. Jos laajennamme näkökulmaa, meidän on alettava ottaa huomioon myös materiaalit, joista laitteemme, datakeskuksemme ja verkkomme on valmistettu.
Internet rakentuu (hulvattomista) kissameemeistä ja blogeista, mutta se rakentuu myös hyvin todellisista harvinaisista maametalleista, joita louhitaan usein huonoissa työoloissa työskentelevien ihmisten toimesta ja suurten ympäristökustannusten hinnalla.
Viime vuosien aikana Fairphone on tarjonnut meille kestävämmän älypuhelimen, mutta keskustelu koko internetin kestävyydestä ei ole vielä lainkaan alkanut. Toisin sanoen tarvitsemme Fairphonen palvelininfrastruktuuria varten.
Aiheeseen liittyvää: Haasta ja motivoi tiimisi tekemään planeetasta sivustosi sidosryhmä
Lisää kaikesta kestävästä: Kestävän verkkokaupan käsikirja
