EKOLOGISIN VERKKOPALVELU -KUNNIAMAININTA
Energiatehokas Hiondigital.com
Hion sai viime vuonna uuden brändin ja verkkosivuston, jotka on luotu kunnioittaen energiatehokkaita työskentelytapoja.
Kilpatyön linkkiTyön perustiedot
Sivustomme sai kunniamaininnan Grand One 2024 -kilpailussa ✨
- Työn nimi: Energiatehokas Hiondigital.com
- Kilpailukategoria: Ekologisin verkkopalvelu
- Työn suunnitteluun osallistuneet yritykset: Hion, Agency Leroy
- Työn tuotantoon osallistuneet yritykset: Hion, Robogen, Differo (sisältö)
- Asiakas: Hion
Suunnittelu ja sisällöt
Pauliina Kiviranta, ex-Hion
Jenny Salmimäki, Hion
Heli Köck, Hion
Sami Häkkinen, Hion
Shareef Askar, Hion
Iira Bibiano, Agency Leroy
Tapio Kauranen, freelancer
Tekninen toteutus
Jyri Isomäki, Robogen
Otto Rautamaa, ex-Hion
Miika Arponen, ex-Hion
Panu Ervamaa, Hion
Niko Karppinen, Hion
Lähtökohdat
Ohjelmistoyritys Hion sai viime vuonna uuden brändin, jonka yhteydessä uudistimme luonnollisesti myös verkkosivustomme. Yrityksemme tekemisen ytimessä on välittäminen niin toisistamme kuin ympäröivästä maailmastammekin – ja tämän halusimme viestiä uudella brändillämme ja saitillamme.
Hion tunnettiin aiemmin nimellä Geniem. Geniemillä on pitkä historia Suomen digikehityskentässä, ja yritys tuli tunnetuksi erityisesti vaativista ja monipuolisista WordPress-toteutuksistaan. Vuoden 2022 kesäkuussa Geniem osti IT-talo Franticin vahvistaakseen palvelumuotoilullista osaamistaan, sekä laajentaakseen Franticin aloittamaa työtä energiatehokkaiden digipalveluiden ja myös DEI-työn saralla. Geniemin liiketoimintastrategia sai muotonsa syksyllä 2022, ja sen ytimessä oli kestävä digipalvelukehitys. Tämän pohjalta lähdettiin luomaan uutta brändiä, joka pitäisi sisällään energiatehokkaamman palvelu- ja tuotekehityksen ja myös itsessään henkisi sen periaatteita.
Brändityön ohella oli selvää, että myös verkkosivusto menisi täysin uusiksi. Aiempi verkkosivusto palveli hyvin aiempaa liiketoimintaa, mutta strategian painopisteiden muuttuessa nähtiin tarve sivuston kokonaisvaltaiselle uudistamiselle. Näin pystyttäisiin tuomaan omaksumamme energiatehokkaammat työskentelytavat osaksi myös näkyvintä osaa brändiämme – eli saittiamme. Samalla uudistusprojekti toimisi myös oppimiskokemuksena tiimillemme, josta voitaisiin ammentaa myös asiakasprojekteihimme.
Strategia / insight
Brändityöstö aloitettiin vuoden 2022 lopulla, ja mukaan osallistettiin koko henkilökunta aina alusta loppuun saakka. Kumppanina brändityössä toimi Agency Leroy, joka johdatti työtä eteenpäin ketterästi sprintti kerrallaan. Uusi brändi rakennettiin tuoreen liiketoimintastrategian pohjalta, tuoden vanhan brändin vahvuudet yhteen strategian uusien painopisteiden kanssa. Myös yrityksen nimi päätettiin vaihtaa – ja uusi nimi Hion löytyikin sisäisessä nimiworkshopissa.
Brändityöstön valmistuttua aloitettiin uuden verkkosivuston suunnittelu vuoden 2023 alussa. Verkkosivuston suunnittelun lähtökohtana oli luoda strategiaa ja brändiä ilmentävä, saavutettavampi ja energiatehokkaampi verkkopalvelu.
Tavoittelimme sivuston toteuttavan kestävämmän digikehityksen periaatteita sen parhaan tiedon pohjalta, jota silloin oli saatavilla. Tavoitteenamme oli erityisesti kevyet sivulataukset, sujuvat käyttäjäpolut ja sivuston hostaus Google Cloudissa Haminan konesalissa, joka pyörii 97%:sesti tuulivoimalla. Projektitiimissä oli mukana Hionin Green sustainable web -työryhmän jäseniä, jotka puntaroivat eri suunnittelu- ja toteutusvaiheissa valintojen ekologisuutta ja impaktia.
On kuitenkin niin, että tietämys ja metodit energiatehokkuuden ympärillä kehittyvät jatkuvasti, mikä tarkoittaa sitä, ettei sivustomme ole kerrasta valmis. Sen sijaan, energiatehokkuuden parantaminen on osa sivuston jatkuvaa kehittämistä sitä myöten kun tietämys ja mittaristot aiheen ympärillä kehittyvät.
Luova ratkaisu
Verkkosivuston työstö alkoi käyttäjäpolkujen määrittelyllä ja kevyellä analytiikka- ja SEO-auditoinnilla, jotta saisimme riittävän kattavan kuvan olemassa olevan palvelun nykytilasta ja tarvittavista muutoksista.
Käyttäjäpolkujen määrittely
Käyttäjäpolkujen määrittelyllä pyrimme tavoittelemaan sujuvampia, ja täten myös tehokkaampia polkuja kävijöille. Tästä koituisi vähemmän sivulatauksia, joka puolestaan vaikuttaisi käytettävän energian määrään. Eri kohderyhmät pidettiin mielessä, ja pyrittiin tarjoamaan heille mahdollisimman selkeä ja suoraviivainen selauskokemus. Myös saavutettavuus oli läsnä jokaisessa valinnassa - värien valinnasta fontteihin ja sisältöihin.
Analytiikka- ja SEO-audit
Tutkimme, mitkä asiat vanhalla sivustolla toimi, ja mitkä taas ei. Lähdimme liikkeelle puhtaalta pöydältä, ja jätimme uudelta saitilta pois ominaisuuksia ja vuosien aikana kertyneitä sisältöjä, jotka eivät analytiikan mukaan hyödyttäneet käyttäjiä tai sen koommin liiketoimintaammekaan.
Ekologisuus brändivalinnoissa
Pyrimme sekä brändin, että sivuston suunnittelussa siihen, että kuvamaailma tulisi olemaan minimalistinen ja kuvien käyttöä ylipäänsä pyrittiin pitämään minimissä. Bitmap-kuvien lisäksi käytämme vektorikuvia esim. taustakuvina ja kuvituskuvina. Videoita sivustolla ei ole lainkaan, lukuunottamatta linkkiä Youtubessa hostattuun webinaaritallenteeseen, ja jos joskus niitä teemme, käytämme niitä ensisijaisesti tiedon jakamiseen, emme esimerkiksi pelkästään visuaalisina tehokeinoina.
Kompromissit
Jos olisimme lähteneet tavoittelemaan energiatehokkainta mahdollista sivustoa, se olisi saattanut näyttää kovin erilaiselta. Tässä suhteessa teimme matkamme varrella kompromisseja muun muassa brändin visuaalisuuden tai sisällön ja energiatehokkuuden välillä.
Hygieniatekijät
Se, että sivustollamme on kaksi kieliversiota, eli suomen lisäksi nyt myös englanti, vaikuttaa tietysti sivuston kokoon. Osaajapoolimme laajentaminen englanninkielisiin osaajiin osana DEI-strategiaamme painoi vaakakupissa enemmän. Analytiikan ja mainonnan seurantatägit vaikuttavat myös sivuston suorituskykyyn hidastavasti, mutta niiden näemme (toistaiseksi) olevan erottamaton osa sivuston ja mainontamme tehokkuuden mittaamista ja kehittämistä.
Fonttivalinta
Tutkimme eri fontteja, ja päädyimme siihen, että sivustolla käytetään otsikoissa custom-fonttia (Polysans) ja sen lisäksi leipätekstinä DM Sans -Google-fonttia. Google-fontit ovat energiatehokkaampia kuin custom-fontit, mutta tässä kohtaa valitsimme tyylin energiatehokkuuden edelle. Tätäkin energiatehokkaampia olisivat olleet järjestelmäfontit, mutta niiden visuaalisuuden ei koettu tukevan brändin tavoitteita. Halusimme fontin, joka olisi visuaalisesti riittävän mielenkiintoinen, jotta se toimisi tarvittaessa myös yksinään, ilman kuvitusta tai muita visuaalisia tehokeinoja.
Brändivärit
Tiesimme, että siniset sävyt kuluttavat enemmän energiaa näyttöpäätteillä kuin muut värit, mutta valitsimme siitä huolimatta brändiväriksemme siniseen taittavan liilan. Tämä siksi, koska halusimme tuoda kahden yhdistyneen firman brändit yhteen visuaalisella tasolla, ja sitä kautta kunnioittaa kummankin yrityksen omaa historiaa. Franticin brändiväri oli sähkönsininen, ja Geniemin taas tummanliila. Tämän vuoksi uutena brändivärinä sähköinen liila, joka on silmämääräisesti melko sinertävä.
Tekninen toteutus ja valinnat
Arkkitehtuuri
Sisällönhallintajärjestelmäksi valikoitui meille tuttu WordPress, sillä se palveli parhaiten myynnin ja markkinoinnin tarpeita. Otimme haasteena sen, miten toteutamme WP-ympäristöön mahdollisimman energiatehokkaan ja liiketoimintaamme palvelevan ratkaisun. Ratkaisumme koostuu Google Cloudin Haminassa toimivassa hostauksesta ja kevyestä fronttipuolen toteutuksesta.
Hostaus tuulivoimalla
Googlen palvelinsali Haminassa tarjosi parhaat mahdolliset puitteet sivustomme hostaamiseen. 97% uusiutuvaa energiaa käyttävä palvelinsali on yksi Euroopan moderneimmista ja energiatehokkaimmista saleista, joten se oli meille selkeä valinta.
Kuvien optimointi
Kuvaoptimoinnissa otettu käyttöön kuvaoptimointiratkaisu EWWWIO, joka uudelleenpakkaa kuvatiedostot mahdollisimman tehokkaaseen muotoon (Webp), mikä puolestaan pienentää kuvien tiedonsiirtoon tarvittavaa energiaa ja siten niiden ympäristövaikutusta.
Välimuistitusratkaisu
Olemme arvioineet, että palvelun energiatehokkuuden kannalta kenties oleellisinta on säästää palvelimen kapasiteettia. Palvelussa sivujen sisältö tulee CDN-jakelun kautta, eli sisältö on valmiiksi tallennettuna CDN-verkon palvelimille, mikä pienentää palvelimen taakkaa.
Tulokset
Oman sisäisen työmme tuloksena olemme todenneet, että verkkopalveluiden ekologisuuden mittaaminen on monisyinen aihe. Digipalvelujen päästöjen mittaaminen on vielä kovin lapsenkengissä. Koska mittaristot ja metodit kehittyvät jatkuvalla tahdilla, ja lisäksi päästöihin vaikuttavat lopulta myös monet palvelun kehittäjästä riippumattomat tekijät, on yksiselitteisen päästölukeman tarjoaminen vielä haastavaa. Pyrimme arvioimaan asiaa kuitenkin sivuston tehokkuuden, nopeuden ja suorituskyvyn kannalta.
Palvelinpuolelta saamme myös Googlen arviot sivujemme hostingin päästöistä.
Nostoja tuloksista
8 CO2 kg/kk
Palvelinpuolen hiilijalanjälki
0.08g /sivulataus
Etusivun päästöt Website Carbon-laskurin mukaan
0.04g /sivulataus
Etusivun päästöt Globemallow -laskurin mukaan
100/100
Sivuston suorituskyky Lighthousen mukaan (incognito-moodissa)
Palvelinresurssien hiilijalanjälki
Kävijöitä sivustollamme käy liiketoimintamme luonteen vuoksi vähemmän kuin esim. kuluttajapalveluita tarjoavalla firmalla, mikä näkyy osaltaan sivulatauksien määrässä ja sivustomme aiheuttamissa päästöissä.
Joulukuussa 2023 sivustomme palvelinpuolen hiilijalanjälki oli 0.008 CO2 tonnia (CO2 tonnes equivalent), eli 8 CO2 -kiloa. Viime vuoden osalta kuukausittainen kulutus oli suhteellisen tasainen, eli voimme tästä johtaa, että sivustomme tuottaa päästöjä tuon saman verran kuukausittain.
Sivujen koko
Eri hiilijalanjälkilaskureilla voidaan arvioida tiedonsiirron määrää ja sivustomme sisällön kokoa (kuvat ja muu sisältö). Eri laskurit antavat keskenään erilaisia arvoja riippuen hieman mittausolosuhteista ja laskimien laskutavoista.
Website Carbon -hiilijalanjälkilaskuri antaa (kyseisellä mittaushetkellä) yksittäisille pääsivujemme sivulatauksille arvoja väliltä 0.08–0.47 g/sivulataus, ja pääsivujemme keskiarvo on 0.28g/sivulataus (etusivu: 0.08g/sivulataus) ja mediaani 0.32g/sivulataus. Etusivun arvosanaksi Website Carbon antaa A+.
Globemallow taasen antaa pääsivuille arvosanat A:n ja B:n väliltä, ja esimerkiksi etusivun päästöiksi 0.04g/sivulataus.
Ecograder antaa etusivulle arvosanaksi A, ja päästöiksi 0.12g per sivulataus.
Lopuksi
Sivustoa kehitetään jatkuvasti kriittisellä otteella, ja pyrimme pienentämään palvelumme hiilijalanjälkeä teknologian ja mittaristojen kehittyessä. Meille on tärkeää käyttää omaa sivustoamme hiekkalaatikkona, jossa voimme kokeilla uusia metodeja ja teknologioita, joita voimme jatkossa hyödyntää myös asiakkaidemme palveluiden hiilijalanjäljen pienentämiseksi.