DNA Teknologiatrendit 2024 -raportti
Hiilijalanjäljen kutistusnappi on trendiraportin alareunassa kelluva valitsin. Kutistusnappia painamalla lukija voi valita lukukokemuksen raportin kevyt- ja täysversion väliltä. Kevytversion hiilijalanjälki on 15 kertaa pienempi.
Jaa
Strategia
Tulevaisuutta luovat valinnat
Teknologiatrendit 2024 -raportin kokonaisuuden luova konsepti, tulevaisuutta luovat valinnat, toimi design driverina käyttöliittymäsuunnittelulle.
Totesimme, että tulevaisuutta muokkaavista valinnoista pitää tehdä kokemus - sen sijaan että vain kertoisimme yritysten tulevaisuuteen vaikuttavista muutosvoimista ja trendeistä.
Ratkaisuna on näyttää raportin lukijoille, yrityspäättäjille, miten pienillä toimenpiteillä saamme aikaan muutosta ilman, että lukukokemus kärsii. Näennäisesti pienillä valinnoilla, kuten verkkosivun hiilijalanjäljellä, on suuria kerrannaisvaikutuksia.
Totesimme, että tulevaisuutta muokkaavista valinnoista pitää tehdä kokemus - sen sijaan että vain kertoisimme yritysten tulevaisuuteen vaikuttavista muutosvoimista ja trendeistä.
Ratkaisuna on näyttää raportin lukijoille, yrityspäättäjille, miten pienillä toimenpiteillä saamme aikaan muutosta ilman, että lukukokemus kärsii. Näennäisesti pienillä valinnoilla, kuten verkkosivun hiilijalanjäljellä, on suuria kerrannaisvaikutuksia.
Ratkaisu
Hiilijalanjäljen kutistusnappi
Otimme haasteeksi luoda houkuttelevan valintapainikkeen, hiilijalanjäljen kutistusnapin, ja kutistaa kevyversion datansiirron hiilijalanjälki mahdollisimman pieneksi.
Tekninen toteutus
Teknistä toteutusta ohjasivat kaksi tavoitetta:
Halusimme tarjota raportin lukijalle yllättävän yksinkertaisen käyttökokemuksen ja näyttää, että hiilijalanjäljeltään pienempi lukukokemus ei ole täysversiota huonompi.
Kuvien pakkaaminen, sekä seurantaskriptien, vuorovaikutteisten elementtien ja fonttikirjaston poistaminen koskevat sivun kevytversiota.
Kuvien pakkaaminen, sekä seurantaskriptien, vuorovaikutteisten elementtien ja fonttikirjaston poistaminen koskevat sivun kevytversiota.
Arkkitehtuuri
Rakensimme sivuston käyttämällä Jamstack- ja Next.js-arkkitehtuuria. Valitsimme nämä, koska ne vähentävät verkkosivujen energiankulutusta tarjoamalla paremman suorituskyvyn ja tehokkuuden staattisen sisällön optimoidun koodin ansiosta.
Kun sivusto on luotu Next.js:llä, se voidaan tallentaa välimuistiin ja näyttää sieltä ilman tarvetta uudelle prosessoinnille. Next.js tehostaa sivuston toimintaa ja parantaa sen kykyä selviytyä suurista kävijämääristä.
Sivuston rakenne ja moduulit nojaavat aikaisempiin ratkaisuihimme, joiden teknistä ratkaisua saimme pienennettyä huomattavasti.
Koodin optimointi
Panostimme huomattavasti tehokkuuden ja virtaviivaisuuden parantamiseen. Tavoitteemme oli, että sivusto toimii saumattomasti, samalla kun sen digitaalista hiilijalanjälkeä pienennetään. Tämän saavutimme poistamalla kaikki tarpeettomat elementit, kuten ylimääräisen JavaScriptin ja seurantaskriptit, sekä vuorovaikutteiset visuaaliset elementit ja mukautetut fontit.
Analytiikan osalta käytimme Google Tag Manageria ja Google Analyticsia, mutta estimme bottiliikenteen ja hakukone-bottien indeksoinnin.
Sisältöjen optimointi
Tavoitteemme oli varmistaa, että versio latautuu nopeasti ja kuluttaa vähemmän energiaa. Kuvamateriaalin optimointiin kiinnitettiin erityistä huomiota. Kuvat optimoitiin huolellisesti niin, että muutokset näkyvät selkeästi, mutta käyttökokemus ei kärsi.
Optimoimme sivuston kuvat png8-muotoon, jolla saimme pakattua ne huomattavasti pienemmällä väriavaruudella ja kuvien fyysistä kokoa pienennettiin. Png-formaatin ylösskaalaus antaa kuvalle anteeksi enemmän, kuin esimerkiksi jpg-formaatti. Lisäksi poistimme videot.
Esimerkiksi alkuperäisen version kuvakoko 49 KB, kevyen version optimoitu kuvakoko 16 KB.
Hosting ja välimuistiratkaisut
Valitsimme hosting-ratkaisuksi Netlifyn, pilvipohjaisen web-kehitysalustan, jonka suorituskyky, skaalautuvuus ja luotettavuus tekevät siitä ympäristöystävällisen. Netlify sitoutuu energiatehokkuuteen tuotteissaan ja palveluissaan. Lisäksi se tekee yhteistyötä johtavien pilvipalveluntarjoajien kanssa energiankulutuksen minimoimiseksi.
Jamstack-metodologia on resurssitehokas ja luo jokaisen sivun vain kerran, toisin kuin perinteiset verkkosivut, jotka rakentuvat uudelleen jokaisella vierailulla. Tämä tarkoittaa, että Netlifystä tarjoillun verkkosivuston hiilijalanjälki voi olla huomattavasti pienempi kuin perinteisillä sivustoilla.
Jamstack tukee palvelimetonta laskentaa, joka käyttää vähemmän energiaa verrattuna aina päällä oleviin, omiin palvelimiin. Tämä pilvipohjainen arkkitehtuuri toimii vain tarvittaessa, mikä vähentää entisestään energiankulutusta.
