Ekologinen verkkosivusto auttaa ilmastonmuutoksen hillitsemisessä

Lähtökohdat

Asiakkaan missio ohjasi myös sivustouudistusta

Polar Night Energy (PNE) on suomalainen kasvuyritys, joka suunnittelee ja rakentaa teollisen kokoluokan lämpöenergiavarastoja tuuli- ja aurinkoenergialle. Yrityksen kehittämä hiekka-akku vähentää polttamista energiantuotannossa ja vauhdittaa yritysten ja yhteiskuntien siirtymistä uusiutuvaan energiaan.

Ainutlaatuisen teknologian ja onnistuneen mediaviestinnän ansiosta Polar Night Energyn kehittämä hiekka-akku on saanut maailmanlaajuista huomiota. Yhtiö on ollut esillä mm. BBC:n, Deutsche Wellen, New York Timesin sekä CNN:n artikkeleissa ja ajankohtaisohjelmissa. Räjähdysmäisesti kasvanut näkyvyys kansainvälisissä medioissa on tuonut PNE:n verkkosivustolle valtavan määrän liikennettä yli sadasta eri maasta.

Vanha sivusto ei kuitenkaan enää vastannut teknisesti eikä sisällöltään kävijöiden tarpeisiin ja yrityksen liiketoiminnan tavoitteisiin. Kiinnostus hiekka-akkua kohtaan oli tervetullutta, mutta esimerkiksi liiketoiminnan kannalta epärelevantit yhteydenotot söivät henkilöstöresursseja ja kasvattivat sivuston energiankulutusta.

Koska PNE:n missiona on mahdollistaa uusiutuvan energiantuotannon nopea kasvu ja hillitä ilmastonmuutosta, yritys halusi myös uuden sivuston suunnittelussa tavoitella mahdollisimman ekologista toteutusta. Me Unfairilla lähdimme suunnittelemaan kokonaisvaltaisesti ekologista verkkopalvelua ja sen toteutusprosessia PNE:n kanssa.

Strategia / Insight

Huolella tutkitusta analytiikasta saatiin tukea työlle

Verkkosivustouudistusten tavoitteena on usein kasvattaa brändin tunnettuutta ja tukea myyntiä generoimalla liidejä. Polar Night Energyssä lähtötilanne oli kuitenkin päinvastainen kuin monessa muussa yrityksessä, sillä yritys oli medianäkyvyyden ansiosta tunnettu ympäri maailman, sen verkkosivustolla riitti liikennettä ja yhteydenottoja tuli enemmän kuin henkilöstö ehti käsitellä.

PNE:n ja Unfairin yhteistyön alusta asti oli selvää, että sivustouudistuksesta ei saataisi irti täyttä hyötyä, jos vanha sivusto sisältöineen siirrettäisiin sellaisenaan uudelle alustalle ja palvelimelle.

Jotta tunnettuus saataisiin konvertoitua kannattavaksi liiketoiminnaksi ja jotta resursseja käytettäisiin järkevästi, oli tärkeää suunnata PNE:n viestit oikealle kohderyhmälle. Siksi aloitimme työt ydinviestien kirkastamisella ja brändiuudistuksella.

Sivustouudistuksen tueksi kävimme tarkasti läpi kävijäanalytiikkaa, jotta ymmärtäisimme, millaisia asioita sivustolta haluttiin löytää. Datan avulla huomasimme, että palaavien kävijöiden osuus kaikista kävijöistä oli minimaalisen pieni. Palaavat käyttäjät ovat laadukasta liikennettä eli he kuuluvat todennäköisesti PNE:n kohderyhmään. Lisäksi he ovat energiankulutuksen kannalta tehokkaita, sillä ensimmäistä sessiota seuraavilla käynneillä suuri osa resursseista ladataan palvelimen sijaan selaimen välimuistista.

Luova ratkaisu

Teollisen kokoluokan innovaatio

Viestinnällinen kulma

Verkkosivuston tekstisisällöt päivitettiin niin, että ne vastaavat tunnistettujen pääkohderyhmien tiedontarpeita. Näitä ryhmiä ovat muun muassa energiantuotannon ja valmistavan teollisuuden edustajat.

Sisällöissä keskityttiin esittämään hiekka-akkuteknologian vahvuudet ja toimintaperiaatteet selkeästi sekä todentamaan hiekka-akkujen käytännön toimivuus jo toteutettujen kaupallisten projektien kautta. Lisäksi teksteissä haluttiin kertoa, miten lämpöenergian varastointi voi tehostaa uusiutuvan energian käyttöä ja tukea energiatehokkuuden kehittämistä.

Visuaalinen ilme

Polar Night Energyn brändi-ilme uudistettiin sivustoremontin yhteydessä. Uuden ilmeen on luonut PNE:n Simo Heikkinen, ja sivuston käyttöliittymän suunnittelivat yhteistyössä Heikkinen ja Unfairin Sanna Vaasheimo.

Ekologisuus ja saavutettavuus huomioitiin jo ilmeen suunnittelussa, ja esimerkiksi videoista osana käyttöliittymää luovuttiin. Valokuvilla ja kuvituksilla on kuitenkin tärkeä rooli verkkosivustolla. Huolellisesti valittujen kuvien avulla PNE saa viestittyä vaivattomasti, että hiekka-akkuja on jo olemassa ja niitä rakennetaan jatkuvasti lisää. Kyseessä ei siis ole tulevaisuuden konsepti vaan tämän päivän teknologia.

TOTEUTUS

Toteutustapa huomioi liiketoiminnan tavoitteet tinkimättä ekologisuudesta

Toteutuksen ohjenuorana käytimme W3C:n Web Sustainability Guidelines 1.0 (WSG) -opasta. Mahdollisimman ekologisen verkkopalvelun toteuttaminen on tekniseltä kantilta melko suoraviivainen juttu: mitä vähemmän palvelimelta siirtyy dataa selaimeen, sitä enemmän energiaa säästyy. Tästä näkökulmasta kaikista ekologisin olisi pelkkää tekstiä mustalla taustalla sisältävä verkkosivusto, mutta liiketoiminnallisten tavoitteiden, brändi-ilmeen ja käyttökokemuksen vuoksi sivuston on pakko olla monitahoisempi.

Toteutimme PNE:n uuden sivuston WordPress-julkaisujärjestelmällä, jonka päälle rakensimme räätälöidyn teeman Unfairin omaa pohjateemaa käyttäen. Teemassamme on oletuksena ”konepellin” alla monia sivuston suorituskykyä parantavia ja kehittämistä helpottavia ominaisuuksia kuvien optimoinnista modulaariseen tiedosto- ja koodirakenteeseen.

Kuvien optimointi

Sivuston mediakirjastoon ladatut bittikarttakuvat muutetaan automaattisesti uuden sukupolven webp-muotoon. Hävikitöntä pakkausta käyttävät webp-kuvat ovat tiedostokooltaan keskimäärin 25 prosenttia pienempiä kuin vastaavat png- tai jpg-tiedostot. Mediakirjastoon ladatuista kuvista generoidaan automaattisesti myös erikokoisia versioita, joista loppukäyttäjälle tarjoillaan tämän näyttökoolle sopiva vaihtoehto automaattisesti.

Logoista, ikoneista ja muista grafiikoista valitsimme käyttöön svg-muotoiset vektoritiedostot. Ne ovat huomattavasti pienikokoisempia kuin bittikartat ja skaalautuvat käytännössä loputtomiin.

Sivuston kuvat, ikonit, animaatiot ja muut grafiikat ladataan käyttäen lazy load -toiminnallisuutta. Se lataa kuvat vasta, kun ne ilmestyvät käyttäjän näytölle.

Videoiden korvaaminen

Aiemmin sivustolla oli YouTube-palvelusta upotettuja videoita, joilla selitettiin hiekka-akkujen toimintaperiaatetta. Uudella sivustolla korvasimme videot kevyillä, Lottie.js-kirjaston avulla toteutetuilla SVG-animaatioilla, jotka yhdessä tekstin kanssa havainnollistavat toimintaperiaatetta jopa paremmin kuin videot. Animaatiot pyörähtävät käyntiin vasta, kun ne ilmestyvät käyttäjän näytölle.

Turhan liikenteen karsiminen

Verkkosivustoja käyvät selaamassa erilaiset botit, jotka etsivät sisältöä esimerkiksi hakukoneisiin, AI:n kouluttamiseen, SEO-tilastojen tutkimiseen tai kilpailija-analyysiin. Osa boteista on sivustolla vain levittääkseen roskapostia ja täyttääkseen lomakkeita. Kaiken kaikkiaan bottiliikenteen määrä on AI-työkalujen aikakautena kasvanut nopeasti. Botit lataavat sivuston ja sen sisällöt, mikä käyttää energiaa.

Kaikkia botteja ei voida sulkea pois, koska se vaikuttaisi negatiivisesti esimerkiksi hakukonenäkyvyyteen. Rajasimme kuitenkin bottiliikennettä palvelintasolla estämällä tiettyjä botteja lataamasta sivustoa. Turhia lomakelähetyksiä estimme muun muassa siten, että teimme lomakkeista monivaiheisia. Botit eivät toistaiseksi osaa täyttää tällaisia lomakkeita, mikä vähentää resurssien käyttöä.

Sivuston käyttöä pyrimme nopeuttamaan ja suoraviivaistamaan luomalla sisällöstä helppolukuista ja hyvin jäsenneltyä. Käyttäjä löytää tarvitsemansa tiedon nopeasti ja vähäisellä selauksella, mikä osaltaan tehostaa sivuston toimintaa ja vähentää energian käyttöä.

Yksi aiemman sivuston haasteista oli runsas lomaketäyttöjen määrä, sillä hiekka-akkuteknologia herättää laajalti mielenkiintoa. Koska PNE tarjoaa hiekka-akkuja vain energia-alalle ja prosessiteollisuuteen, loimme heti lomakkeiden alkuun suodatuksen, joka erottelee potentiaaliset asiakkaat ja muut aiheesta kiinnostuneet. Asiakkaat ohjataan kertomaan lisää tilanteestaan ja muille ehdotetaan uutiskirjeen tilaamista. Näin saimme vähennettyä PNE:n myyjien näkökulmasta turhien kyselyiden määrää ja tehostimme samalla heidän työtään.

Harkittu tietorakenne ja välimuistitus

Sivusto on ajankohtaisia uutisia lukuunottamatta melko staattinen, eikä sivuston sisältö muutu käyttäjän toiminnan tai valintojen mukaan. Sivuston sisältö tallennetaan välimuistiin, eikä sivujen sisältöjä tarvitse luoda jokaiselle käyttäjälle erikseen. Tämä nopeuttaa sivuston käyttöä ja vähentää palvelimen työtä.

Kun organisaatio on tekemässä merkittävää investointipäätöstä, sen edustajat vierailevat toimittajan sivustolla todennäköisesti useita kertoja. Tämän vuoksi otimme PNE:n sivuston rakenteessa huomioon myös palaavat kävijät. He ovat liiketoiminnan näkökulmasta erittäin kiinnostavia ja energiankulutuksen kantilta uusia kävijöitä kevyempiä tehokkaan välimuistituksen ansiosta. Jos käyttäjä vierailee sivustolla useasti, selain tarkistaa ja lataa palvelimelta vain muuttuneet sisällöt.

Kevyttä koodia

WordPress-sivustoilla käytetyt lisäosat ja ulkoiset palvelut, kuten chatbotit, mediaupotukset tai lomakkeet, lisäävät ladattavien resurssien määrää ja kasvattavat latausaikoja. Teeman monimutkainen koodi tai suuret JavaScript-kirjastot kuormittavat kävijän selainta. Osa lisäosista ja palveluista on kuitenkin hyödyllisiä, eikä kaikkia voida sulkea pois. Esimerkiksi analytiikkatyökalut ovat liiketoiminnan kehityksen ja asiakasymmärryksen kannalta oleellisia. ”Pakolliset pahat” eli Google Analytics ja osittain sen seurauksena Usercentrics Cookiebot -evästehallinta vaikuttavat merkittävästi siirtyvän datan määrään.

Otimme sivuston kehityksessä julkaisujärjestelmän olemassa olevista työkaluista kaikki irti. Sisältösivujen rakenne ja muokkaus on mahdollisimman kevyttä ja yksinkertaista, ja suoritettavaa koodia on mahdollisimman vähän. Esimerkiksi usein kysyttyjen kysymysten haitarimainen rakenne on rakennettu selainten sisäänrakennettuja toiminnallisuuksia hyödyntävillä moderneilla CSS- ja HTML-elementeillä raskaiden JavaScript-kirjastojen asemasta.

Sivustolla on käytetty suorituskykyä parantavia lisäosia, kuten Autoptimize ja WordPress-projektin suorituskykytiimin kehittämä Performance Lab. Niiden avulla esimerkiksi optimoidaan ja pakataan koodia, kuvia ja fonttitiedostoja.

Palvelimen päässä

Sivuston hosting-palveluntarjoajaksi valitsimme Seravon, joka on omalta osaltaan tehnyt töitä hiilinegatiivisuuden saavuttamiseksi. Seravo on ollut hiilineutraali toimija vuodesta 2019 ja hiilinegatiivinen vuodesta 2020 alkaen. Kun vertailimme palveluntarjoajia, Seravon läpinäkyvyys ilmastoystävällisyydessä oli ainutlaatuista.

Seravo huolehtii osaltaan, että palvelimet ja WordPress toimivat tehokkaasti ja että sivusto latautuu nopeasti. Sivuston välimuisti luodaan jo palvelintasolla ja jopa tietokantakyselyt tallennetaan välimuistiin, jotta palvelimelle tulee mahdollisimman vähän työtä.

TuLOKSET

Todistetusti energiatehokas

Kun arvioidaan verkkosivuston ekologisuutta, on otettava huomioon kehitys suhteessa aiempaan sivustoon sekä sivuston käyttötarkoitus. Esimerkiksi pikamuodin verkkokauppaa olisi hyvin vaikea pitää ekologisena verkkopalveluna, vaikka se saisi hiilijalanjälkilaskureilta täydet pisteet. Arvioimme verkkosivustoprojektimme ympäristövaikutusta seuraavien tekijöiden avulla:

1. Kehitysprojektin ympäristövaikutusten minimoiminen

Sivuston suunnittelu- ja toteutusvaiheen ympäristövaikutuksia on vaikea arvioida. Toimistollamme tehdään lähtökohtaisesti paljon asioita ekologisen vastuun eteen. Tässä projektissa pienen loppusilauksen antoi kaksi asiaa: Ensinnäkin Polar Night Energyn arvomaailmaan kuuluu, että yrityksen maksamat tarjoilut ovat yleensä vegaanisia, joten me Unfairilla päätimme noudattaa samaa linjaa yhteisissä työpajoissa ja palavereissa. Toiseksi kuljemme mieluusti asiakastapaamisiin julkisilla liikennevälineillä aina, kun se on mahdollista. Tässä projektissa päästiin kuitenkin liikenteen päästöjen osalta vielä vähemmällä, sillä PNE:n ja Unfairin toimistot ovat samassa rakennuksessa. Tapaamiset päädyttiin pitämään Unfairin tiloissa.

2. Yksittäisen kävijän siirtämän datamäärän pienentäminen

Yksittäisen sivustokävijän energiatehokkuuden mittarina toimii yksinkertaisesti siirrettävän datan määrä. Suorituskykyä ja/tai hiilijalanjälkeä arvioivat testipalvelut, kuten Pingdom, PageSpeed Insights ja Website Emissions, mittaavat sivustoa ja antavat konkreettisia ohjeita tulosten parantamiseen. Testit ja niiden antamat arvosanat tai pisteet eivät kuitenkaan kerro koko totuutta, sillä niiden suorittamiseen käytetään botteja, jotka eivät lataa sivustoa samalla tavalla kuin tavallinen käyttäjä. Täyden pistemäärän tavoittelu testeistä ei siis ole kannattavaa, sillä hyvä käyttäjäkokemus on kiinni muustakin kuin sivuston nopeudesta. Esimerkiksi Google Workspace -tuotteen esittelysivu saa Googlen omassa testissä tehokkuudesta mobiilissa 74/100 pistettä ja tietokoneessa 60/100 pistettä.

Testit eivät todennäköisesti osaa ottaa huomioon sitä, missä vaiheessa esimerkiksi kuvat latautuvat käyttäjälle, tai mitä resursseja jää välimuistiin, kun kävijä siirtyy sivulta toiselle. Esimerkiksi PNE:n etusivulla kävijälle siirrettävän datan määrä tippuu tehokkaan välimuistituksen ansiosta noin 1,3 prosenttiin toisella latauskerralla verrattuna ensimmäiseen sivuvierailuun. Kun tutkitaan sivuston vertailukelpoisia osia, uusi Sand Battery -sivu on kooltaan vain 62 prosenttia aiemmasta vastaavasta sivusta. Sen lisäksi vanhalla sivustolla hiekka-akun toimintaperiaatetta esiteltiin YouTube-videoilla, joiden katsominen kulutti vielä lisää energiaa. Uudella sivustolla videot on korvattu kevyillä animaatioilla ja tekstillä.

Otos mittaustuloksista

PageSpeed Insights

Uusi sivusto	Vanha sivusto
Mobiili Tehokkuus 68 Esteettömyys 97 Parhaat käytännöt 100 Hakukoneoptimointi 92	Mobiili Tehokkuus 27 Esteettömyys 90 Parhaat käytännöt 75 Hakukoneoptimointi 92
Desktop Tehokkuus 95 Esteettömyys 94 Parhaat käytännöt 100 Hakukoneoptimointi 92	Desktop Tehokkuus 39 Esteettömyys 90 Parhaat käytännöt 74 Hakukoneoptimointi 92

Pingdom

Uusi sivusto	Vanha sivusto
Performance grade: 83 Load time: 750 ms	Performance grade: 83 Load time: 831 ms

Website emissions

Uusi sivusto	Vanha sivusto
0,27 g of CO2e per visit	1,31 g of CO2e per visit

3. Sivuston kokonaisvaikutuksen pienentäminen

Kokonaisvaikutus on useamman tekijän summa. Yksittäisen kävijän energiankulutuksen vähentämisen lisäksi on syytä tarkastella esimerkiksi palvelimen energiatehokkuutta sekä sivuston kävijämäärää ja etenkin keskimääräisen kävijän laatua. Yksittäinen kävijä on käsitelty edellä ja Seravo on hiilinegatiivinen palveluntarjoaja, joten tässä osiossa käsittelemme sivustoliikennettä kokonaisuudessaan.

Kävijämäärää ei ole laajan kiinnostuksen myötä mielekästä saati mahdollista rajoittaa turhan bottiliikenteen blokkaamisen lisäksi, mutta liikenteen laatuun pyrimme vaikuttamaan esimerkiksi viestikärkien määrittelyllä. Sivustoanalytiikan perusteella palaavien käyttäjien osuus on noussut sivustojulkaisua edeltävältä ajalta lähes viisi prosenttiyksikköä. Pieneltä vaikuttava muutos on kuitenkin suuren kävijämäärän sivustolla merkittävä. Se on tuntuva myös energiankulutuksen näkökulmasta, sillä mittaustulosten perusteella sivulatausten datansiirto tippuu murto-osaan ensimmäisen sivulatauksen jälkeen. Lisäksi toteutettavuustutkimuslomakkeen täyttöjen (eli lähetettävän datan) määrä on laskenut yli 70 prosenttia. Yleisesti ottaen lomaketäyttöjen määrän laskua voisi pitää huonona asiana, mutta aiemmin lomakkeen kautta tuli todella paljon liiketoiminnan kannalta hyödyttömiä yhteydenottoja. Jäljelle jääneet yhteydenotot ovat aiempaa laadukkaampia.

”Meille tulee todella paljon viestejä ympäri maailmaa. Uuden sivuston ja yhteydenottolomakkeen avulla on onnistuttu huomattavasti vähentämään turhien yhteydenottojen määrää ja parantamaan liidien laatua.”

Miika Peltola, Communications Manager, Polar Night Energy Oy

Jatkokehitys

Vanhan sivuston kävijäanalytiikasta teimme ekologisuuden kannalta oleellisen huomion, joka liittyy uuden sivuston jatkokehitykseen. Aiempaa sivustoa käytettiin paljon (Googlen) automaattisen kääntäjätyökalun kautta, jolla englanninkielinen sivusto käännettiin yleensä joko saksaksi tai espanjaksi. Yhtenä kehitysaskeleena voisi olla sivuston tai sen osien lokalisointi näille kielille, jolloin automaattisen kääntäjän käyttämiseen kuluva energia säästyy.

Suorituskykytestitulosten perusteella yhtenä pullonkaulana energiatehokkuudessa on sivustolla käytettävät kolmannen osapuolen palvelut, kuten sivustoanalytiikka sekä evästehallinta. Ne ovat liiketoiminnan, sivuston jatkokehityksen ja toisaalta myös lainsäädännön osalta oleellisia. Haluamme kehittää tarjontaamme analytiikan osalta kartoittamalla esimerkiksi tietosuojan ja energiankulutuksen kannalta tehokkaampia vaihtoehtoja. Kriteerinä on, että dataa on mahdollista hyödyntää saumattomasti esimerkiksi digitaalisen mainonnan kanavissa.

Lisää aiheesta