EKOLOGISIN VERKKOPALVELU -KUNNIAMAININTA

Energiatehokas Hiondigital.com

Hion sai viime vuonna uuden brändin ja verkkosivuston, jotka on luotu kunnioittaen energiatehokkaita työskentelytapoja.

Kilpatyön linkki

Työ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.

Hiondigital.com:in etusivun koko on noin 390KB, josta isointa osaa pelaa skriptit.

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.