Haminan kaupungin energiatehokas sivusto

Päivitetty: 11.2. klo 15.15 – korjattu teknisen toteutuksen osion asiavirheitä

Lähtökohdat projektille

Hamina on liki 20 tuhannen asukkaan pikkukaupunki Kaakkois-Suomessa, joka tunnetaan muun muassa historiallisena linnoituskaupunkina sekä harvinaisesta ympyrän muotoisesta asemakaavastaan.

Verkkopalvelu on Haminan tärkein viestintäkanava, jolla pyritään paitsi luomaan kaupunkimielikuvaa, myös tiedottamaan kuntalaisia tärkeistä ajankohtaisista asioista, sekä osallistaa heitä päätöksentekoon.

Lähtökohta verkkopalvelun uudistusprojektille oli perinteinen.

“Kaiken alku ja juuri oli se, että sivusto kaipasi uudistusta. Edellisestä uudistuksesta oli jo 5 vuotta, eivätkä sivut olleet eläneet ajassa.”, toteaa Aija Kurko, Haminan kaupungin markkinointisuunnittelija.

Saavutettavuusdirektiivikin tuli voimaan viimeisimmän uudistuksen jälkeen, eikä sivusto vastannut kaikkiin sen vaatimuksiin.

Kaupunkilaisilta oli tullut yleisesti palautetta, että kaivataan selkeämpiä ja helppokäyttöisempiä sivuja. Yhteensä kaupungilla oli kuusi sivustoa käytössä. Navigaatioelementtejä oli todella paljon ja tietoa oli vaikea etsiä ja löytää.

“Kaupunkilaisilta tuli myös kommenttia että nämähän ovat matkailusivut. Kaupungin verkkosivut tulisi olla ensisijaisesti kaupunkilaisille suunnattu.”, avaa Haminan viestintäkoordinaattori Riikka Koskimies projektin lähtökohtia.

Siispä oli aika kääriä hihat, ja ryhtyä toimeen.

Tarjouspyyntökilpa uudistuskokonaisuudesta pistettiin käyntiin, ja sen tuloksena projektin toimittajaksi valikoitui Hion.

Kokonaisuuteen sisältyi Haminan verkkosivuston suunnittelu, toteutus sekä ylläpito- ja tukipalvelut. Lisäksi verkkopalvelun käyttöliittymä ja visuaalinen ilme suunniteltiin Haminan kaupungin brändin pohjalta.

Kaupungin uudesta verkkopalvelusta tulisi luoda selkeä ja käyttäjäystävällinen kokonaisuus, jossa mukailtaisiin kestäviä digikehitysperiaatteita. Sen olisi tarkoitus toimia Haminan kaupungin asukkaiden tietopankkina ja kaupungin houkuttelevana käyntikorttina.

Strategia & luova ratkaisu

Projektiin osallistunut suunnittelijamme oli osa Green sustainable web -työryhmäämme, mikä antoi hyvät eväät verkkopalvelun ekologisemmalle suunnittelulle. Säännöllisesti kokoontuvan ja strategisesti tärkeän työryhmän tarkoituksena on viedä kestävämpiä digikehityksen käytäntöjä asiakasprojekteihimme ja edistää aiheeseen liittyvää tietoutta Hionin sisällä.

Suunnittelijamme olivat mukana Haminan projektipalavereissa, joiden aikana karkea runko tarvittavista näkymistä ja lohkoista tehtiin. Lohkoja alettiin käymään läpi yksitellen ja sivuston rakenne mietittiin uusiksi.

Suunnittelijamme hahmotteli asiakkaalle yhtenäistä yleisilmettä, joka pystyttäisiin helposti monistamaan eri lohkoihin. Lohkoja ei tarvinnut siten miettiä jokaista erikseen, vaan perusrakenne toistuu niistä jokaisessa.

Yleisperiaate sivuston designissa oli tehdä elementeistä mahdollisimman pelkistettyjä. Sivuston raskauden välttämiseksi uudella sivustolla tasapainotellaan ekologisuuden ja tyylikkyyden välillä – tuodaan modernia ilmettä ilman että tarvitsee välttämättä nojata valokuvaan tai videoon.

Aikaisemmilla sivuilla, eritoten heroelementeissä oli raskaita kuvia ja automaattisesti käynnistyviä videoita, joista uudistuksen myötä luovuttiin.

Etusivulla on nyt värillinen tausta, jossa Haminan logo taka-alalla, sen sijaan että olisi vain tekstiä ja otsikkoa.

Rakennetta myös uudistettiin, siten että tieto olisi paremmin löydettävissä ja palvelisi kuntalaisia entistä paremmin.

Osioiden nostot ja lohkot ovat yksinkertaisia – käytetty isoja ja pieniä nostoja. Hero-osio on graafinen ja toimii sellaisenaan ilman kuvia. Heroihin on mahdollista lisätä kuvia jos niin halutaan, ja näin onkin toimittu alasivujen kohdalla.

Raskaan kuvamateriaalin karsiminen ja mielenkiinnon ylläpitäminen oli yhtenä haasteena – miten rakennetaan kaupunkikuvaa ilman, että kyllästetään sivu raskailla kuvilla. Tärkeää oli tiedon löydettävyys, selkeys ja saavutettavuus, joten näihin keskityttiin suunnitteluprosessissa. Sivuston eri osilla on omat brändivärinsä, mutta yhtenäiset rakenteet muutoin.

Koodin osalta pyrittiin mahdollisimman optimoituun koodiin, joka sisältäisi mahdollisimman vähän ylimääräistä.

Toteutus

Arkkitehtuuri

Haminan verkkopalvelun teknologiastack nojaa WordPressin päälle rakennettuun DustPress-teemakehykseen, jossa on hyödynnetty natiiveja Gutenberg-lohkoja sekä räätälöityjä ACF-lohkoja. Teknologiavalintoja määrittivät Haminan tarjouspyynnön vaatimukset, mutta pystyimme vaikuttamaan itse kehitystyössä palvelun energiatehokkuuteen.

Esimerkiksi yhteystietointegraatio ajetaan vain kerran yössä, eikä dynaamisesti jokaisella sivulatauksella. Tämä vähentää merkittävästi http-pyyntöjen määrää ja säästää energiaa.

Palvelinresurssit pyörivät uusiutuvalla energialla omassa kaupungissa

Haminan kaupungin etuna on Googlen palvelinsalien läheisyys, sillä ne sijaitsevat nimenomaisesti Haminan kaupungissa. Kun projektista tehtiin tarjous, oli selkeää että Haminalle olisi hyödyllistä ottaa Google Cloud -palvelinresurssit käyttöön, sillä mitä lähempänä käyttäjiä palvelun hostaus tapahtuu maantieteellisesti, sen parempi energiankulutuksellisesti. Lyhyemmät etäisyydet palvelimien ja käyttäjien välillä vähentävät tiedonsiirtoon kuluvaa energiaa ja viivettä.

• Palvelimella on käytössä PHP-FPM, joka on pitkälle optimoitu versio PHP-ohjelmointikielestä. Tämä tarkoittaa, että palvelin pystyy käsittelemään verkkosivuston pyyntöjä tehokkaammin ja nopeammin, mikä vähentää energiankulutusta.
• Nginx käytössä, kun pyyntö tulee CDN:n ohi, eli jos käyttäjä on kirjautunut. Nginx on rakenteeltaan kevyt ja resurssienhallinnaltaan tehokas web-palvelin. CDN:n (Content Delivery Network) ohi tulevat kirjautuneiden käyttäjien pyynnöt ohjataan Nginxiin, koska ne vaativat usein dynaamista sisältöä, jota CDN ei voi välimuistiin tallentaa.
• Tietokanta hostataan Googlen Cloud SQL:ssä, käyttää taustalla MySQL:ää. Google Cloud SQL on pilvipohjainen tietokantapalvelu. Se hyödyntää Googlen tehokasta infrastruktuuria ja resurssienhallintaa, mikä vähentää energiankulutusta ja ympäristövaikutuksia.
• Palvelimen suorituskykyä on parannettu julkaisun jälkeen ottamalla käyttöön HTTP/2-protokolla Dockerin Nginx-konfiguraatiossa. Tämä mahdollistaa nopeammat latausajat, tehokkaamman pakkauksen ja paremman resurssien hallinnan. HTTP/2 on HTTP/1.1-protokollan uudempi ja tehokkaampi versio.

Tulokset

“Sivustot ovat nyt aiempaa selkeämmät ja uudet elementit mahdollistavat paljon enemmän kuin vanhoilla sivuilla olleet ominaisuudet. Kuntalaiset löytävät etsimänsä tiedon helpommin ja ovat näin tietoisempia ajankohtaisista asioista. Kävijäpolut ovat selkeämpiä ja pyrimme jatkuvasti vähentämään pdf-liitteiden käyttöä sivuilla, mikä parantaa saavutettavuutta. Uudistuksen yhteydessä karsimme vanhaa sisältöä ja keskityimme olennaiseen.”

–Aija Kurko, Haminan kaupunki

Etusivu käytiin läpi Website Carbon-laskurilla, EcoGrader-laskurilla, Globemallow-selainlisäosalla sekä Google PageSpeed Insightsilla. Tulokset on napattu 27.1. ja 28.1. aikana. 

Eri laskurien toimivuudesta ja tarkkuudesta voidaan myös olla montaa mieltä, esim. Globemallow-lisäosan tulokset heittelevät suhteellisen paljon, mutta sen antamat tulokset on silti raportoitu alle. 

Mitä tuloksia tutkiessa kannattaa ottaa huomioon:

• Jotkut raportointityökalut (Esim. Globemallow) eivät tunnista sivustolla konvertoituja WebP-kuvia, sillä kuvien tiedostonimessä ei lue WebP, vaikka ne siinä formaatissa ovatkin.
• WordPressissä on oletuksena tuki responsiivisille kuville srcset-attribuutin avulla, mikä auttaa pienentämään sekä latausaikoja että sivuston energiankulutusta. Lohkoeditorissa kuville voi myös valita kulloiseenkin tarpeeseen sopivan kuvakoon, mikä parantaa sivun suorituskykyä. Gutenberg-editorin käyttöön liittyy kuitenkin myös haasteita. Sivun asettelun rakentaminen lohkoilla saattaa johtaa raskaaseen sivurakenteeseen ja kasvattaa DOM-elementtien määrää. Tämä voi näkyä esimerkiksi PageSpeed Insightsin antamana “Vältä liian suurta DOM:ää” -huomiona.
• Lisäksi WordPressin automaattinen logiikka srcset- ja sizes-parametreille ei aina tuota optimaalisia kuvakokoja jokaiselle laitteelle, jolloin sivuston käyttäjän selaimeen saattaa toisinaan latautua todellista tarvetta suurempi kuva. Tämä voi lisätä datankäyttöä ja kasvattaa energian kulutusta erityisesti mobiililaitteilla.

Palvelinresurssien hiilijalanjälki

Palvelun palvelinresurssien aiheuttamat päästöt olivat joulukuussa 2024 11 kg CO₂e.

Kyseessä ovat palvelinsalin scope 1,2,3 -päästöt kyseisen palvelun osalta.

• Scope 1: Paikan päällä tapahtuva fossiilisten polttoaineiden käyttö (esim. lämmitys, omat generaattorit)
• Scope 2: Sähköverkosta ostetun sähkön päästöt
• Scope 3: Työntekijöiden matkustamisen päästöt ja datakeskusten laitteistojen ja rakentamisen aiheuttamat elinkaaripäästöt.

Koko vuoden 2024 aikana arvioimme päästöiksi yhteensä 132kg CO₂e.

Sivujen koko ja päästöt

Eri hiilijalanjälkilaskureilla voidaan arvioida tiedonsiirron määrää ja Haminan sivuston sisällön kokoa (kuvat ja muu sisältö). Eri laskurit antavat keskenään erilaisia arvoja riippuen hieman mittausolosuhteista ja laskimien laskutavoista. 

Keskitymme tulosten raportoinnissa vain palvelun etusivuun, sillä se on palvelun käydyin ja siten myös olennaisin sivu. Se edustaa myös painavinta sivua, sillä se sisältää eniten elementtejä, jotka nostavat palvelun kokoa. Tällainen on muun muassa Tapahtumat-elementti, jonka sisällöt tulevat rajapinnan kautta. Muut palvelun sivut ovat keskimäärin kevyempiä.

Hamina.fi:n viime vuoden kävijäkeskiarvo per kk on noin 14 300 kävijää. 

Etusivun koko on 1.01MB, joka on EcoGraderin mukaan 74.56% pienempi kuin keskivertosivu. EcoGrader antaa etusivulle arvosanaksi C, ja päästöiksi 0.34g per sivulataus.

Etusivun arvosanaksi Website Carbon antaa B.

Carbon Calculator (https://websiteemissions.com/) antaa etusivulle päästöiksi 0.12g.

Globemallow taasen antaa etusivulle arvosanaksi A+, ja etusivun päästöiksi 0.005g/sivulataus.

Google PageSpeed Insights antaa tuloksiksi etusivulle (desktop & mobiili):

• Tehokkuus: 99 & 64
• Largest Contentful Paint: 2s & 2,1s
• Cumulative Layout Shift: 0,06 & 0
• First Contentful Paint: 2s & 2s

Mitä seuraavaksi?

Haminan kaupungin tiimi on tunnistanut useita kehityskohteita sivustonsa jatkokehitykselle.

“Tiedostamme, että sivustot eivät ole koskaan valmiita ja päivitettävää riittää jatkossakin. Mikä tänään on tärkeää, ei välttämättä ole sitä enää huomenna. Siksi meille on tärkeää kuunnella kuntalaisten palautetta ja hyödyntää uuden sivuston ketteriä kehittämismahdollisuuksia.”, Aija Kurko toteaa. 

“Hyvin palvelevat verkkosivut korvaavat isossa määrin paperisen viestinnän tarpeita ja edistävät näin osaltaan kaupunkimme Hinku-tavoitteita.”, kiteyttää Riikka Koskimies.

Työmme jatkuu koulutuksilla asiakkaan sisällöntuotantoon ja muihin energiatehokkuuden kannalta olennaisiin aihealueisiin liittyen. Jatkokehityksessä tulemme ottamaan energiatehokkuuden entistä tarkemmin huomioon ja luomme käyttäjille mm. ohjeistuksen sisällönsyöttöön.