Johdanto
Aurinkoinen kesäpäivä Kvanttorin toimistolla. 🌞
Kvanttorin nykyisten sivujen maali rakoilee, koodissa vilisee purkkaratkaisuja ja sivujen sisällönhallintajärjestelmä (englanniksi CMS) taistelee vastaan aina, kun sisältöä halutaan lisätä tai muokata. Sivujen sisältö ja ulkonäkö alkavat jäämään jälkeen siitä, mitä haluamme viestiä yrityksenä, mutta niiden päivittäminen on hankalaa muille kuin harvalle valitulle.
Kesä on tavallista hiljaisempi, ja muutama Kvanttorilainen vapautui juuri edellisestä projektista. Itselläkin olisi muiden projektien ohella aikaa raapustella designia. -‘Pitäisikö tehdä uudet nettisivut?’ No totta kai!
Kipukohdat
Työstäminen on alkanut! Kartoitamme vanhoista sivuista kaikki ongelmat, jotka haluamme korjata, ja sisältö mietitään uudelleen vastaamaan paremmin Kvanttorin nykyistä tarjontaa ja visiota energiatehokkuuden näkökulmalla.
Tunnistamme kolme suurta kipukohtaa: koodikantaa on vaikea muuttaa, CMS-järjestelmä aiheuttaa enemmän päänvaivaa kuin hyötyä ja design rajoittaa ilmaisukykyämme.
Design-muutokset
Vanhojen sivujen ulkonäkö suunniteltiin aikana, jolloin Kvanttorin visio oli vähemmän selkeä. Sivuista puuttui siksi selkeä teema ja sisältö oli ympäripyöreämpää. Nykyisin selkeänä tavoitteena on kuitenkin energiatehokkuus, ja ulkonäön päivityksen avulla voimme viestiä tämän entistä paremmin. Teemme myös päätöksen käyttää vektorigrafiikoita kuvien sijaan monessa paikassa.
Koodin päivitys
Vanhoihin sivuihin on tehty kaikenlaisia pieniä korjauksia ja lisäyksiä niiden elinkaaren aikana. CMS-järjestelmän mukana on tullut kaikenlaisia ongelmia, joiden korjaus on usein johtanut sivujen tehokkuuden alenemiseen ja monimutkaisempaan koodiin. Esimerkkinä mainittakoon, että sivut käyttävät tekniikkaa, jossa palvelin joutuu luomaan jokaisen sivun uudelleen tyhjästä jokaiselle kävijälle, vaikka sisältö muuttuukin vain viikon parin välein uuden blogikirjoituksen tupsahtaessa sivuille. Lisäksi uuden sisällön julkaisu CMS:n avulla tuntuu käytännössä yhtä vaikealta kuin ilman sitä.
Tavoitteenamme on tuottaa energiatehokkaita ratkaisuja, ja nykyisten sivujen toimintamalli ei mukaile tällaista ajattelutapaa. Heitetään siis CMS ulos ikkunasta. Sisällön muokkaus ja julkaisu pitäisi olla nyt helpompaa ja sivut voidaan luoda kerran etukäteen, jolloin sivujen nopeus paranee ja energiaakin säästyy.
Valmista tuli, mutta mitä tuli tehtyä ja miten?
Hypätään hieman ajassa eteenpäin - työstön päätteeksi uudet sivut on nyt julkaistu. Kvanttorin sisäinen reaktio on pelkkää positiivista! Sivujen uusi ilme tuntuu tuoreelta ja vastaa enemmän arvojamme, ja käytännössä kaikki kykenevät nyt päivittämään sivuja. PageSpeed-tulokset näyttävät pelkkää vihreää, sillä sivujen suorituskykyä on hiottu huolella.
Etusivun koko ja latausaika pienenivät huomattavasti (4.9s -> 1s):
Vanhan ja uuden etusivun koko ja latausaika (GTMetrix.com)
Yhteenveto, uudet sivut vasemmalla (GTMetrix.com)
Myös kaikki PageSpeed-palvelun antamat mittapuut paranivat. PageSpeed antaa hyvän peruskäsityksen sivujen nopeudelle ja käytettävyydelle:
PageSpeed-tulokset työpöydällä
PageSpeed-tulokset mobiililaitteilla
Parhaimman suorituskyvyn saavuttaminen
Suurimmat parannukset nettisivuihin (sekä kehittäjän että nettisivuilla vierailevan näkökulmasta) tulivat neljää tekniikkaa käyttämällä.
Teknologian vaihto
Vanhat nettisivut käyttivät erittäin suosittua Next.js-ohjelmistokehystä. Vaikka Next.js:llä toteutetut sivut ovat usein riittävän nopeita, halusimme vaihtaa Kvanttorilaisille ennestään tuttuun SvelteKit-kehyskirjastoon sen lähes voittamattoman nopeuden[1] sekä mielestämme paremman kehittäjäkokemuksen takia. Lopussa huomasimme myös, että SvelteKit-kirjaston avulla tehdyt sivut sisältävät huomattavasti vähemmän käyttämätöntä koodia kuin Next.js:llä tehdyt vanhat sivut[3].
Staattiset sivut
Kuten aiemmin mainittiinkin, vanhoilla nettisivuilla jokainen sivu rakennettiin tyhjästä jokaiselle kävijälle jokaisella käyntikerralla (englanniksi Server-Side rendering, SSR). Tämä olisi tarpeellista, mikäli sivuilla näytettäisiin käyttäjäkohtaista sisältöä, mutta meillä sisältö on sama kaikille. Uudet sivut ottavat täysin vastakkaisen lähtökulman, ja valtaosa sivuista rakennetaan vain kerran silloin kun sisältöä muutetaan (englanniksi Static Site Generation, SSG).
Sivut on julkaistu Cloudflaren Pages-palvelun avulla. Suurin osa sivuista on luotu etukäteen ja tallennettu Cloudflaren CDN-palveluun maailmanlaajuisesti. Ainoina poikkeuksina tähän ovat hintalaskuri ja yhteydenottosivu, sillä niistä lähetettyjen lomakkeiden käsittelemiseen tarvitaan palvelinta. Cloudflare Pagesin ansiosta tämä onnistuu helposti ja automaattisesti niin, että lomakkeet käsitellään aina sellaisella palvelimella, joka on mahdollisimman lähellä lomakkeen lähettäjää[4].
Kuvien vaihto vektorigrafiikoihin
Kuvat ovat monen sivun suurin kaistanleveyden haaskaaja ja yksi suuria hitauden lähteitä. Vanhoilla sivuillamme kuvat veivät 90% koko sivun koosta, sillä niitä oli paljon eikä niitä oltu optimoitu kunnolla. Ulkonäköä uudistaessa päätimme siksi käyttää useiden kuvien sijaan vektorigrafiikoita.
Jäljellä olevien kuvien optimointi
Kaikkia kuvia emme kuitenkaan halua korvata vektorigrafiikoilla. Blogeissa tarvitaan usein havainnollistavia kuvia, ja meistä-sivulla on lopulta mukavampi näyttää oikeat kasvomme maailmalle piirrustusten sijaan.
Halusimme, että nämä kuvat on optimoitu niin hyvin kuin mahdollista, ettei nopeus kärsisi. Tähän meillä on kolme työkalua käytössä, joista kaksi ensimmäistä ovat täysin automaattisia:
- Kaikkien kuvien optimointi julkaisuprosessin aikana. Tämä pienentää kuvien yhteiskokoa noin 60% [5] ilman, että laatu kärsii huomattavasti.
- Kolmen eri koon luominen jokaisesta kuvasta. Käyttämämme työkalun ansiosta eri kokoiset kuvat luodaan automaattisesti julkaisuprosessin aikana, ja selaimesi osaa automaattisesti ladata niistä näyttökoollesi sopivimman.
- Manuaalinen optimointi Squoosh.app-verkkosovelluksen avulla. Tämän työkalun käyttäminen ei välttämättä olisi meillä tarpeen kahden ensimmäisen prosessin ansiosta, mutta on yleisesti ottaen hyödyllinen. Squooshin avulla voit manuaalisesti muuttaa kuvia eri muotoon ja kokoon sekä tuunailla asetuksia pienimmän koon saavuttamiseksi, usein ilman, että laatu kärsii huomattavasti.
Yhteenveto
Näin meni nettisivujen uudistus Kvanttorilla. Liikkeelle lähdettiin kipukohtien tunnistuksesta, jonka jälkeen tehtiin design-muutoksia sekä itse toteutus ja toteutuksen lopussa vielä hiottiin suorituskykyä yllä mainituilla tekniikoilla.
Suurimmat parannukset tulivat staattisista sivuista, kuvien vähennyksestä sekä jäljellä olevien kuvien optimoinnista.
Lähteet
[1] https://krausest.github.io/js-framework-benchmark/2024/table_chrome_126.0.6478.55.html
[3] PageSpeed-palvelun ‘Treemap’-näkymä. Vanhan etusivun käyttämätön koodi on ~200kb, uudella etusivulla ~60kb (-70%).
[4] https://pages.cloudflare.com/
[5] Julkaisuprosessin aikana käytetty työkalu kertoo optimoinnin tulokset. Yhteensä kaikkien kuvien kokoa saadaan pienennettyä noin 60%, ja yksittäisten kuvien koon pienenemiset vaihtelevat 7%-86% välillä.
