EKOLOGISIN VERKKOPALVELU & PARAS DIGIPALVELU & PARAS TOTEUTUS

Parhaan palvelun Autoklinikka.fi

Tammikuussa 2025 julkaistu uunituore Autoklinikan verkkopalvelu tarjoaa paitsi energiatehokkuutta, myös Suomen parasta palvelukokemusta.

KILPATYÖN LINKKI

Työn perustiedot

  • Työn nimi: Parhaan palvelun Autoklinikka.fi
  • Työn suunnitteluun osallistuneet yritykset: Hion, Autoklinikka
  • Työn tuotantoon osallistuneet yritykset: Hion, Autoklinikka
  • Asiakas: Autoklinikka
  • Kilpailukategoria: Ekologisin verkkopalvelu, Paras digitaalinen palvelu, Paras toteutus

Hionin tiimi

  • Jenny Järvinen – Palvelumuotoilu
  • Riku Lehtinen – Käyttöliittymäsuunnittelu, Design system
  • Mikko Paasto – Kehittäjä
  • Arttu Erkkilä – Kehittäjä
  • Daniel Kouvo – Kehittäjä
  • Joni Liikanen – Kehittäjä
  • Mahbub Khan – Kehittäjä
  • Tuomo Karvinen – Projektipäällikkö
  • Niko Karppinen – Analytiikka
  • Tea Dickman – Green, sustainable web -valmennus, Grand One-toimitus

Autoklinikan tiimi

  • Heli Avikainen – Product owner
  • Alex Neuman – IT-asiantuntija
  • Ditte Järvi – Markkinointikoordinaattori
  • Juhana Laurila – Markkinointisuunnittelija
  • Helena Ruuska – Asiakaspalvelupäällikkö

”Muista vahingossa – Autoklinikka”

Autoklinikka on Suomen johtava vahinkokorjaamoketju. Autoklinikalla hoituvat ammattitaidolla kaikkien automerkkien pelti- ja lasikorjaukset. Helsingissä Autoklinikka tarjoaa myös autojen huoltopalveluja Suomen johtaville automerkeille Konalassa, Alppilassa ja Pitäjänmäellä. Korjauttaessasi autosi Autoklinikalla se tehdään aina ympäristöä kunnioittaen. 

Autoklinikka.fi palvelee kolarivaurioasiakkaita myös digitaalisen 24h palvelun avulla. Palvelun kautta asiakas voi lähettää valokuvat tai videon autonsa vauriosta. Autoklinikan kuvatiimi arvioi kuvien perusteella vaurion laajuuden ja palaa asiakkaalle työ- ja kustannusarvion kera. Palvelun avulla asiakas säästää aikaa ja vaivaa kun ajoa paikan päälle korjaamolle ei tarvita.

Lähtökohdat projektille

Joku kolhaisi ovea parkkipaikalla. Kivi iski tuulilasiin moottoritiellä. Auto kaipaa huoltoa. 

Ihmiset kohtaavat autovahinkoja keskimäärin 7 vuoden välein – tarpeeksi harvoin tietääkseen heti mitä tehdä ja keneen olla yhteyksissä. Jos apua ei kysytä vanhemmilta tai naapurin Penalta, suunnataan usein Googleen. Tämän vuoksi autojen vahinko- ja korjauspalvelut on löydyttävä käden käänteessä digikanavista ja apua on saatava nopeasti. 

Autoklinikalla oltiin vuonna 2023 ison kysymyksen ääressä: miten olla jatkossa kuluttajan ensimmäinen vaihtoehto vahingon sattuessa?

Tätä haastetta lähdimme heidän kanssaan ratkaisemaan.

Autoklinikan edellinen sivustouudistus oli valmistunut vuonna 2018. Sivustolle oli syötetty vuosien saatossa paljon tavaraa, ja tekninen puoli natisi liitoksistaan. Yrityksen toiminta oli kasvanut ja muuttunut – tapahtui yhdistyminen Alppilan Autohuollon kanssa ja laajeneminen PK-seudulle, ja tämä oli saatava sulautettua sivustolle.

Oli selkeä tarve uudistaa verkkopalvelu.

Koska Autoklinikka on osa konsernia, joka toimii myös pohjoismaissa, oli ajatuksena että Suomen sivustoa päästäisiin hyödyntämään myös muissa maissa.

“Kilpailutus tehtiin, vertailtiin useita eri toimijoita, ja päädyttiin Hioniin.” –Heli Avikainen, Autoklinikan Head of Marketing and Communications.

Ekologisuudella on Autoklinikalle valtava rooli

Vastuullisuus ja erityisesti ympäristövastuu on Autoklinikalle tärkeä arvo. Kuluttaja-asiakkaat ovat tietoisia palveluiden ympäristökuormituksesta ja vaativat palveluntarjoajilta konkreettisia vastuullisia toimia. Tähän vaatimukseen Autoklinikka on vastannut. Autoklinikka tekee muun muassa vastuullisuusraportit konsernitasolla vuosittain. Raportit nojaavat valittuihin YK:n ympäristökehityspilareihin (Sustainable development goals). 

“Kuluttajat ovat entistä kiinnostuneempia siitä, että ostetut palvelut on tuotettu ympäristö huomioon ottaen. Suurin osa asiakkaistamme tulee meille vakuutusyhtiöiden kautta ja vakuutusyhtiöille ympäristöasiat ovat tärkeitä myös. Meille on tärkeää, että lunastamme sidosryhmien odotukset ja että toimimme kaikin puolin vastuullisesti.” Heli Avikainen summaa.

Koska ekologisuus ja ympäristövastuun huomioiminen on Autoklinikalle tärkeää, nousi Hionin digitaalisuuden saralla tekemä ympäristövastuutyö edukseen jo tarjousvaiheessa. Muita valintaa tukevia seikkoja olivat lisäksi Hionin kansainvälinen kokemus, referenssit, ratkaisuehdotuksen esittely ja projektin hinta.

“Teemme kaikki korjaustyöt ympäristöä kunnioittaen”

Autoklinikan omassa liiketoiminnassa ympäristövastuu näkyy monilla eri tavoilla. Iso osa vauriokorjaamojen tuottamasta jätteestä syntyy rikkinäisistä osista, kuten muovista, metallista ja lasista.

“Autoklinikalla selvitämme aina ensin, onko rikki mennyt osa – esimerkiksi puskuri, ovi tai tuulilasi – korjattavissa laadukkaasti ja turvallisesti, jotta sitä ei tarvitsisi vaihtaa uuteen. Useimmiten peltikolhut ovat oikaistavissa ennalleen. Muovia taas voidaan hitsata ja lasia korjata. Korjaamalla vähennetään jätettä, energiankulutusta ja kustannuksia.” painottaa Heli Avikainen Autoklinikalta.

Autoklinikalla on myös alan ympäristösertifikaatit, kuten ISO 14001:2015 -ympäristöjärjestelmän sertifikaatti, jolla yritys pyrkii minimoimaan ympäristöjalanjälkeään: 

  • vähentämällä varaosien käyttöä
  • vähentämällä energian kulutusta
  • vähentämällä kemikaalien käyttöä
  • käsittelemällä ja kierrättämällä jätteet oikein

Autoklinikan hyötyaste on 99,5%, joten iso osa jätteestä päätyy uusiokäyttöön: 

“Korkean kierrätysasteemme ansiosta iso osa Autoklinikalla syntyvästä korjaamojätteestä saa uuden elämän: ruttuun mennyt pelti voi päätyä haarukaksi ja pahvilaatikko palvella uutta omistajaa kahvimukina.”, kerrotaan  Autoklinikan vastuullisuus – Ympäristövastuu -sivulla.

Strategia ja luova ratkaisu

Lähtökohtamme Autoklinikan verkkosivuston uudistuksessa oli selkeä: luoda digitaalinen asiakaskokemus, joka on yhtä saumaton ja miellyttävä kuin Autoklinikan palvelu toimipisteissä. 

Tiesimme, että kilpailu alalla on kovaa ja parasta asiakaspalvelua tarjoavat toimijat menestyvät. Sukelsimme syvälle Autoklinikan liiketoiminnallisiin tavoitteisiin ja analysoimme vanhan sivuston dataa ymmärtääksemme paremmin heidän tarpeitaan. Pohjoismainen yhteistyö konsernin kanssa mahdollisti laajan näkökulman ja auttoi tunnistamaan sekä yhteneväisyyksiä että eroavaisuuksia eri maiden verkkopalvelutarpeissa.

Ymmärsimme, että autovahinko on asiakkaalle usein stressaava ja harvinainen tilanne. Siksi digitaalisen palvelun tuli olla erityisen selkeä ja helppokäyttöinen, jotta asiakas löytää tarvitsemansa tiedon ja palvelut vaivattomasti. 

Autoklinikan strategisen ytimen – palveluiden esittelyn, kilpailijoista erottautumisen ja mutkattoman asiakaspalvelun – tuli heijastua vahvasti myös verkkosivustolla. Lisäksi vastuullisuus korostui suunnittelussa, tavoitteena oli luoda mahdollisimman ekologinen verkkopalvelu ja korostaa Autoklinikan vastuullisuutta sisältöjen kautta.

Palvelumuotoilu

Käyttäjälähtöisyys oli suunnittelumme kulmakivi. Määrittelimme neljä motiivipohjaista kohderyhmää, jotka perustuivat Autoklinikan markkinoinnin määrittelemiin kohderyhmiin ja asiantuntijoiden näkemykseen tyypillisistä asiakkaista.

Löysimme neljä hyvin erilaista käyttäjää, joiden yksilöllisiin tarpeisiin tuli vastata. Yhdistämällä käyttäjien tarpeet, sivuston tavoitteet ja analytiikan löydökset, muodostimme pääteemat ja viestit, joiden ympärille rakensimme uuden, selkeän ja loogisen sisältöhierarkian, käyttäjäpolut ja navigaatiorakenteen. Suunnittelun osana määrittelimme myös palvelun tone-of-voicen, jotta yhtenäinen palvelu- ja brändikokemus saadaan toteutettua pohjoismaisella tasolla.

Energiatehokkaiden palveluiden peruspilarina toimii aina tehokkaat käyttäjäpolut, ja tehokkaiden käyttäjäpolkujen taustalla toimii kohderyhmien tunnistaminen ja tarveanalyysi. Jos keskimääräinen sivulataus tuottaa noin 0,8gCO2 päästöjä (https://www.websitecarbon.com), on tärkeää myös ilmaston näkökulmasta, että käyttäjän ei tarvitse klikkailla sivustolla edestakaisin. Myös Autoklinikan tahto oli, että käyttö on mahdollisimman sujuvaa, ettei käyttäjän tarvitse viettää sivustolla tarpeettomasti aikaa. 

”Olemme moderni, ystävällinen, vakavasti otettava varma tuote joka saa homman hoidettua. Toimimme rennolla otteella, tarkasti fokusoituneesti ja olemme raikas, mutta kuitenkin tuttu ja turvallinen. Olemme rauhallinen ja yhdenmukainen, mutta vahva ja dynaaminen."

Pohjoismaiden yhteistyöpalaverissa suunniteltu Tone of Voice

Uudistuksen keskiössä oli saumattomien ostopolkujen luominen, jotta Autoklinikasta tulisi ensisijainen valinta vahingon sattuessa. Panostimme erityisesti navigaation toimivuuteen ja helppokäyttöisyyteen, jotta asiakas löytää helposti etsimänsä tiedon ja palvelut stressaavassakin tilanteessa. Mobile-first-lähestymistapa varmisti, että verkkosivusto toimii saumattomasti kaikilla laitteilla ja palvelee asiakasta parhaalla mahdollisella tavalla aidossa vahinkotilanteessa.

Toteutus

Lopputuloksena syntyi käyttäjäystävällinen ja intuitiivinen verkkosivusto, joka ohjaa asiakkaan vaivattomasti oikeaan palveluun ja helpottaa asiointia stressaavassa tilanteessa.

Suunnittelun pohjana Hion GSW (Green, sustainable web) UI Kit

Käyttöliittymän suunnitteluvaiheen pohjana toimi Hionin kehittämä GSW UI Kit (käyttöliittymäkirjasto), joka on suunniteltu energiatehokkaita selainpohjaisia digitaalisia palveluita, pääasiassa verkkosivustoja varten.

GSW UI Kit on räätälöity HTML5-pohjaisten verkkosivujen ja -palveluiden suunnitteluun Figmassa. Se sisältää oletuksena kaikki verkkoselaimen natiivit UI-komponentit ja se laajentuu niiden avulla suuremmiksi osakokonaisuuksi.

Energiatehokkuus suunnittelun ytimessä

Kirjaston suunnittelussa on tunnistettu energiatehokkain tapa toteuttaa verkkosivuston front end; web-standardit (semanttinen HTML ja moderni CSS), ja pyritty välttämään nykyaikana entistä tunnetuimmaksi tulleet trendikkäät, standardeista poikkeavat ratkaisut, jotka saattavat itsessään olla resursseiltaan suurempia kuin koko sivuston front-end koodi. Web-standardiin kuuluu saavutettavuus, joka itsessään on hyvä lähtökohta energiatehokkuudelle, varsinkin kun käyttöliittymäelementit yhdistetään tarkasti suunniteltuihin käyttäjäpolkuihin.

Kirjasto on yksi osa Hionin suunnittelemaa GSW Frameworkia (työnimi), joka on ennen kaikkea mindset, mutta joka sisältää myös valmiiksi pureskeltuja palasia designin ja kehittämisen tehostamiseksi. Yksi palasista on UI Kit. Autoklinikka-sivusto on yksi ensimmäisistä Hion-projekteista, jossa sitä käytetään. Työ on siis kokonaisuuden osalta kesken mutta monia asioita on jo otettu huomioon tässäkin projektissa. UI Kitin seuraava askel on täysiverinen Design System, jossa koodatut komponentit noudattavat tarkempia määrityksiä.

UI Kitin hyödyt

UI Kit on suunniteltu alusta asti mahdollisimman energiatehokkaaksi; Figma-kirjasto on kevyt ja helppokäyttöinen ja sisältää vain kaiken tarvittavan. Kun tunnistamme alusta asti vain ne elementit, joita web-sivustolla oikeasti käytetään, säästetään aikaa ja energiaa muutosten ja uusien asioiden tekemisessä. Kirjasto nopeuttaa projektien aloitusta, samalla tavalla kuin esim. optimoitu WordPress-pohjateema. Myös elementtien variaatioiden ja attribuuttien nimeäminen noudattaa tiettyjä standardeja, joka nopeuttaa jatkossa kehitystä ja turhilta väärinymmärryksiltä vältytään kaikissa vaiheissa.

Kuinka kevyt GSW UI Kit on verrattuna esim. Googlen Material 3 Design Kitiin, jonka paino on 64MB? Autoklinikan uudelleenkäytettävät komponentit Figmassa painavat yhteensä 16.9MB, eli jokaisella designerin ja kehittäjän tiedoston avaamisella säästetään runsaasti energiaa verrattuna painavampiin kirjastoihin.

Sujuva yhteys kehitykseen

Toteutukseen kirjasto ui design tokenien avulla. Kirjasto on yhteydessä kehitys-repositorioon, josta kehittäjät saavat käyttöliittymän väri, spacing ym. arvot suoraan käyttöönsä CSS-muuttujina. Tämä vähentää turhien Figma-resurssien käyttöä ja vähentää huomattavasti tehottomia “design to dev handoff” (etä)tapaamisia. Myös ns. punakynän käyttö (virheiden etsintä) designerin toimesta vähenee, kun oikeat arvot ovat jo valmiina kehittäjän käytössä automaattisesti.

Suunnittelun lähtökohtana olleet vakio-HTML-elementit toimivat pohjana WordPressin natiivilohkoille. Tällä vältettiin mahdollisimman hyvin turhien custom-elementtien kehittäminen, ja pyörää ei tarvi keksiä missään kohtaan uudelleen, vaan uudelleenkäytettävyys on sisäänrakennettu kokonaisuuteen.

Kirjaston pohjalta räätälöity kokonaisuus mahdollistaa selkeän, yksinkertaisen, saavutettavan, kevyen sekä käyttäjäystävällisen lopputuloksen, jota on tehokasta kehittää jatkossa vielä paremmaksi.

Tekninen toteutus ja green coding -käytänteet

Moderni serverless-arkkitehtuuri ja skaalautuvuus

Sivuston palvelinarkkitehtuuri pohjautuu serverless-teknologiaan, joka mukautuu automaattisesti kävijämäärän vaihteluihin ja suojaa tehokkaasti haitallisilta hyökkäyksiltä.

Kävijäpiikkien aikaan palvelinten määrää skaalataan automaattisesti ylöspäin. Tällä tavoin voidaan minimoida palvelinten tyhjäkäyttöä sekä optimoida resurssintarvetta. Palvelimen levykuva on optimoitu WordPress-sovelluksen ajoa varten. 

Ajastetut toiminnot ajetaan erillisillä palvelinresursseilla kuin mihin julkiverkon käyttäjäliikenne ohjataan. Bottiliikenne sekä palvelinestohyökkäyksien suojaukset ovat toteutettu jo verkkotasolla sovelluspalomuurissa, jolloin ei-toivottu liikenne haittaa mahdollisimman vähän sovelluksen toimintaa.

Uusiutuvalla energialla hostattu palvelu

Autoklinikka.fi hostataan Google Cloudissa Haminan konesalissa, joka saa 97% energiastansa paikallisesta tuulipuistosta, ja joka on yksi Googlen energiatehokkaimmista keskuksista. Vanhaan paperitehtaaseen rakennetussa palvelinsalissa on myös energiankulutusta pienentävä jäähdytysjärjestelmä, jossa käytetään Suomenlahdesta saatavaa merivettä. 

Optimoidut välimuistiratkaisut

Sivusto latautuu nopeasti optimoitujen välimuistiratkaisujen ansiosta. Huolellisesti suunniteltu välimuistitus vähentää palvelimen kuormitusta ja nopeuttavat sivujen näyttämistä.

Välimuistiratkaisu hyödyntää usean kerroksen strategiaa. Verkkotasolla hyödynnetään Google Cloudin kuormantasaajan jakeluverkkoa. Tämä poistaa tarvetta pyytää kyselyitä palvelimelta saakka ja pienentää vasteaikaa palvelinkutsuissa. Sivuston kävijälle pyritään tarjoilemaan HTML-sisältö tästä jakeluverkosta. 

Palvelimella sovelluskerros käyttää PHP-ohjelmointikielen OPcache-välimuistia lähdekoodin suorituskyvyn parantamiseksi. Mittauksissa havaittiin lisäksi hienoista suorituskyvyn nopeutusta käyttämällä OPcachen lisäksi JIT-kääntäjää. Tässä tapauksessa suorituskyvyn parannus huomattiin vain raskaita operaatioita sisältävissä toiminnoissa. 

Sivuston WordPress-teeman sivupohjat hyödyntää Laravel-ohjelmistokehystä. Tämä mahdollistaa WordPressin sivupohjien välimuistituksen ja siten vähentää palvelimen levylukukertoja. 

Huippunopea tietokanta ja sivustohaku

Sivuston tietokantakyselyt ja sivustohaku ovat optimoitu huippunopean Redis-ratkaisun avulla.

Tietokantakerroksen ja sivustohaun välimuistiratkaisuna käytetään Redis-palvelinta, jonka tarkoituksena on minimoida pullonkaulaksi usein muodostuvat hitaat tietokantakyselyt nopeilla palvelimen muistiin tallennettavilla arvopareilla. 

Tietokantakyselyiden tallentaminen on yksi kriittisimmistä suorituskykyä nostavista toimenpiteistä. Tämän vuoksi sovellus käyttää myös hakupalveluissa hyväksi Redistä. Sivuston sisäinen haku hyödyntää Redikseen pohjautuvaa RediSearch hakumoottoria suorituskyvyn parantamiseen hauissa.

Kevyet kuvat ja nopeat latausajat

Sivuston bittikarttakuvat tarjoillaan selaimille WebP-kuvaformaatissa. WebP on moderni kuvaformaatti, joka tarjoaa samalla kuvanlaadulla pienemmän tiedostokoon kuin jpeg-kuvat.

Kuvien konversio WebP-kuviksi on on toteutettu hyödyntämällä Ewwwio-palvelua, joka muuntaa ja optimoi mediakirjastoon tallennetut kuvat. Kuvat sekä muut staattiset tiedostot tarjoillaan jakeluverkon kautta. Tämä mahdollistaa nopeat latausajat sekä loppukäyttäjän selaimen välimuistin tehokkaan hyödyntämisen. 

Kuvat tarjoillaan pääsääntöisesti “lazyload” tekniikalla. Sivustolla käytössä olevat herokuvat tarjoillaan käyttäjälle esiladattuna latauksen aikaisen sisällön siirtymisen (cumulative layout shift) minimoimiseksi.

Vektorikuvissa, kuten ikoneissa ja logoissa, käytetään erittäin kevyttä SVG-formaattia.

Mitatusti nopea ja energiatehokas

Sivuston nopeutta on hiottu huippuunsa Core Web Vitals -mittariston ja muiden optimointityökalujen avulla, jotta se latautuisi salamannopeasti.

Valitsemamme päämittaristo suorituskyvyn mittaamiseen ja optimointitoimenpiteiden todentamiseen on Core Web Vitals. Sivun latautumisen havaittu nopeus (largest contentful paint, LCP) on ollut mittareista avainasemassa. Tämä mittari kokoaa esimerkiksi palvelimen vasteajan, kuvien optimoinnin sekä sivuston skriptien latauksen. 

Mittaukseen käytimme Google PageSpeed Insights -ohjelmistoon perustuvaa omaa Afilar-työkaluamme. Afilar on Hionin kehittämä työkalu, jolla mitataan sivutyyppien Core Web Vitals -arvoja ja tunnistetaan mahdollisia parannuskohteita. Työkalu tarjoaa kehittäjille Hionin kehitysympäristöön sovitetut ohjeet parannuksien toteuttamiseksi.

Verkkopalvelimen suorituskykyä olemme mittaroineet pilvipalvelimelta OpenTelemetry-kehyksellä. OpenTelemetryn avulla pystymme selvittämään tuotantoa vastaavassa ympäristössä suorituskyvyn pullonkauloja jo lähdekooditasolla.

Kompromissit

Pyrkimyksenämme oli luoda palvelu, joka olisi niin energiatehokas kuin mahdollista. Projektin myötä jouduimme kuitenkin tekemään muutamia kompromisseja ekologisuuden suhteen. Kompromissit liittyvät lainsäädäntöön, valittuihin teknologioihin ja asiakkaan liiketoimintatavoitteisiin.

Keksibannerin pakollinen paha

GDPR:n myötä evästebannerit ovat tulleet jäädäkseen. Evästebannerin lataus ja tämän automaattinen skriptien esto hidastaa latausta aina. Tämä vaikuttaa Core Web Vitalsin osalta esim. LCP:hen. Käyttäjän selaimeen ladattavien evästeiden määrä on saatu pidettyä maltillisena, ja evästeiden tallentamisen suhteen pyritään pitämään tiukka linja kunnioittaen käyttäjän hyväksynnän tasoa.

Tasapainoilu näyttävyyden ja ekologisuuden välillä

Autoklinikka haluaa verkkopalvelun kuvastavan vahvasti heidän brändiään. Tähän liittyy esimerkiksi laadukas ja ihmiskeskeinen brändikuvitus. Palvelussa käytetään kuvia ja sieltä löytyy myös videoupotuksia, joiden tiedetään olevan energiatehokkuuden kannalta huono ratkaisu. Uudistuksessa kuvien ja videoiden käyttöön ja niiden tuottamaan energiankulutukseen kiinnitettiin runsaasti huomioita. Optimoidut kuvat ladataan vain tarvittaessa lazy load -toiminnolla, eikä videoita näytetä automaattisesti.

Liiketoiminnan vaatimat skriptit ja evästeet

Verkkosivusto on Autoklinikalle erittäin merkittävä liiketoiminnallinen kanava. Sivustoa markkinoidaan ja kehitetään aktiivisesti, joten sivustolla on käytössä markkinointiin ja analytiikkaan liittyviä skriptejä. Näihin kuuluvat esimerkiksi Adfrom, Facebook, Google Ads, Hotjar, LinkedIn ja TikTok. Skriptien käyttö on pyritty minimoimaan ja optimoimaan, mutta kaikilta osin tämä ei ole teknisen toteuttajan käsissä.

Saavutettavuus edellä

Vaikka Autoklinikkaa ei yksityisenä toimijana sido lain asettamat saavutettavuusvaatimukset, pyrimme aina takaamaan kaikille yhtäläiset mahdollisuudet käyttää verkkopalveluita ja asioida niissä. On tiedossa, että tummat pinnat kuluttavat vähemmän näyttöpäätteiden energiaa, jolloin olisi järkevää luoda sivusto tummalle taustalle. Tumma tausta jonka päällä on vaaleaa tekstiä ei ole saavutettavuuden osalta paras mahdollinen ratkaisu, joten käytimme sitä vain tietyissä tilanteissa erottamaan sisältöalueita toisistaan.

WordPressin plussat ja miinukset

Sivusto on toteutettu WordPress-julkaisujärjestelmällä, ja sisällönhallinnassa on käytössä WordPressin lohkoeditori (ns. Gutenberg-editori).

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 osalla käyttäjistä.

Tulokset

Palvelun käytettävyys sekä visuaalinen ilme paranivat uudistuksessa ja ovat saaneet hyvää palautetta varsinkin Autoklinikan sisäisiltä sidosryhmiltä. Vanhan palvelun asiakaspolut sekä lomakkeiden käytettävyys eivät palvelleet parhaalla mahdollisella tavalla käyttäjiä ja merkkihuollon yhdistäminen osaksi Autoklinikan liiketoimintaa mahdollisti uudenlaisen jaottelun palveluihin.

Asiakaspalvelulomakkeiden uudelleenmuotoilu on jo parantanut varausastetta. Vaikka sivusto on ollut käytössä vasta lyhyen aikaa, olemme jo nähneet positiivisia tuloksia: lomakkeiden kautta tehtyjen varausten määrä on kasvanut 8 % viime vuoteen verrattuna. Uskomme, että tämä on vasta alkua ja että uusi verkkosivusto tukee Autoklinikan kasvua ja menestystä tulevaisuudessa. Jäämme mielenkiinnolla odottamaan vasta julkaistun verkkosivun loppukäyttäjäpalautteita sekä käyttäjätestausten tuloksia. 

“Tosi selkeät, helppokäyttöiset ja freesit sivut.”

– Kommentti Autoklinikan henkilöstöltä

Verkkopalvelun vahinkotarkastuspalvelu, jonka kautta käyttäjä voi lähettää asiantuntijalle kuvat tai videon vaurioista hinta- ja työmääräarviota varten.

Parhaan palvelun paranneltu, uusi, energiatehokkaampi Autoklinikka.fi

Uuden sivuston myötä olemme onnistuneet laskemaan etusivun painoa 92% ja yhden sivun mediaanipainoa 40%. Päästöinä tarkoittaa autoklinikan verkkosivuston osalta noin 180.9 kg CO₂e kevennystä vuositasolla verrattuna aikaisempaan. Uuden sivuston myötä voimmekin todeta, että olemme parantaneet sivuston käytettävyyttä sekä ekologisuutta merkittävästi. Asiakkaamme voi todeta hyvällä omallatunnolla toimivansa ympäristövastuullisen digikumppanin kanssa.

Ennen sivustouudistusta keskimääräinen Autoklinikan etusivu kaikkine lisäosineen oli kuormaltaan 6.4 MB, joka tuotti 0.215 g CO₂e päästöjä [CO2.js perusteella laskettu].

Autokorjaamot (Klinikat) sivujen mediaanikuormitus noin 7.5 MB, joka tuotti 0.254 g CO₂e päästöjä.

Uuden sivuston osalta etusivu kaikkine lisäosineen oli 0.7MB keventyen latauskuormaltaan -39.2% [0.024 g CO₂e päästöjä].

Kaikkien autoklinikan toimipisteiden sivut eli klinikat sivun mediaanikuorma laski 0.8MB (-90%) [0.025g CO₂e päästöjä].

Sivustonlaajuisesti Google PageSpeed Insightin antama Performance Score parani mediaanilla laskettuna +56% vaikka Cumulative Layout Shift kärsi vähän.

Avainluvut koko sivuston mediaaneista ennen ja jälkeen uudistuksen.

Muilta osin uudistuksella ollaan saatu sivuston energiatehokkuutta parannettua reippaasti, mutta esim. Cumulative Layout Shift on heikentynyt. Lukema on uudellakin sivustolla alle 0.1, mikä on CLS:n hyvissä viitearvoissa. Luvut on kauttaaltaan raportoitu mediaaneina, sillä ne antavat huomattavasti luotettavamman kuvan tilanteesta kuin pelkät keskiarvot.

Etusivun avainlukujen mediaanit ennen ja jälkeen, sisältää kieliversioiden etusivut.

Etusivu on kaikkein käydyin sivu, joten positiiviset muutokset näkyvät käyttäjäkokemuksessa. Erityisesti ensimmäisen sivulatauksen tiedonsiirtoa on saatu pienennettyä huomattavasti. 

Toimipisteen sivujen mediaanit ennen ja jälkeen uudistuksen.

Etenkin tiedostonsiirron mediaani on pienentynyt roimasti uudistuksen myötä. Se, että sivu on mahdollisimman nopeasti interaktiivinen vaikuttaa asiakkaan tunteeseen sivuston nopeudesta. Parantuneet tulokset Time to interactive ja First Contentful Paintin osalta yhdessä vaikuttavat positiivisesti asiakkaan kokemukseen sivun nopeudesta.

Nostoja Autoklinikka.fi energiankulutuksen tuloksista

-88.7%

Etusivun sivulatauksen tiedonsiirron mediaanin muutos uudistuksen myötä

5g CO₂e

Palvelinresurssien hiilijalanjälki (tammikuu 2025)

0,1 g CO₂e /sivulataus

Etusivun päästöt Website Carbon-laskurin mukaan

99/100

Sivuston suorituskyky PageSpeed Insightsin mukaan (desktop)

Palvelinresurssien hiilijalanjälki

Autoklinikka.fi:n uusi verkkosivu julkaistiin 10.1. Tammikuun osalta palvelimen puolelta otettujen mittauksien mukaan sivusto päästi 5 gCO₂e. Kyseessä ovat siis 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.)

Sivujen koko ja päästöt

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

Etusivun koko on 941,20 KB, joka on EcoGraderin mukaan 72% pienempi kuin keskivertosivu. Ecograder antaa etusivulle arvosanaksi B, ja päästöiksi 0.32g per sivulataus.

Etusivun arvosanaksi Website Carbon antaa B.

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

Google PageSpeed Insights 

Google PageSpeed Insights antaa sivustolle pääasiassa erittäin hyviä tuloksia. Erityisesti mobiilitestin tuloksia heikentää kuitenkin sivustolla ensimmäisellä latauksella näytettävä lakisääteinen evästebanneri. Evästebanneri hidastaa sivun FCP- ja LCP-arvoja mobiilaitteiden osalta jopa sekunneilla mikä näkyy merkittävänä tulosten heikentymisenä. Tämä ei kuitenkaan vastaa todellista tilannetta evästebannerin hyväksymisen jälkeen.

Google PageSpeed Insights – Mobiili

Google PageSpeed Insights – Tietokone

Mitä seuraavaksi?

Autoklinikka.fi-verkkosivusto on Autoklinikalle olennainen osa liiketoimintaa. Sivusto toimii näyteikkunana Autoklinikan palveluihin, ja sitä kautta tulee merkittävä määrä ajanvarauksia Autoklinikan palveluihin.

Sivuston kehitys jatkuu analytiikkaan ja käyttäjätutkimuksiin perustuen. Palvelua pyritään aktiivisesti parantamaan ja sivustoa kehitetään samalla entistäkin energiatehokkaampaan suuntaan. Haluamme Autoklinikan palvelun kautta muistuttaa etteivät energiatehokkaat palvelut ole ikinä kerralla valmiita, vaan kehitystyö on prosessi ja aina on parantamisen varaa.

Eli maailma ei ole niin sanotusti tämänkään palvelun osalta valmis, vaikka  jo itsessään erinomaisella mallilla onkin. Jatkamme tinkimätöntä arvopohjaista kehitystyötä, jonka tavoitteena on saada verkkopalvelu kerrallaan digimaailma kestävämpään suuntaan. On hienoa tehdä tätä työtä asiakkaiden kanssa joilla on sama visio!