Tänä vuonna suoritimme tarpeellisen uudistuksen myös omille sivuillemme. Alkuperäinen verkkosivu oli toteutettu parhaimmilla mahdollisilla standardeilla toki, vain vuonna 2015. Moni asia on muuttunut, mutta olennaisimpana on teknologiat, joiden ympärillä Agenda työstää verkkosivuja.
Backend
WordPress-lisäosien lukumäärää on laskettu runsaasti. Riippuvuutta kolmannen osapuolen toteutuksiin on vähennetty paljon backend-devien taitojen kehittyessä. Uudella sivulla on seassa useita lisäosia, jotka koetaan sen verran yleispäteväksi että niitä pidetään osana omaa suunnittelujärjestelmäämme (Agenda Design System, ADS). Suunnittelujärjestelmästä voit lukea lisää tästä.
Oudoista typewriter-efektin ja karusellin purkkavirityksistä on siirrytty tuoreempiin ja yleispätevimpiin toteutuksiin. Aikaisemmassa artikkelissani mainittu uudistettu plugin agenda-gutenberg tekee juuri mitä nimi kertoo: tuo parannuksia uuteen Gutenberg-editoriin. Editorin tyylittelyä on paranneltu luettavammaksi ja uusia grid-blokkeja on toteutettu. Myös vanhan sivun dynaamisemmat sisällöt, kuten asiakaslausuntojen karuselli ja julkaisujen ristikko, ovat uudelleentehty Gutenberg-blokkeina.
Kasvavan integrointitarpeen myötä WordPress-sivujen devaamisessa on pikkuhiljaa kehityttävä laajemmin PHP/JS-ohjelmoinnissa, ei pelkästään “WordPress-ohjelmoinnissa”.
Liitännäiset
Tietoturvaan käytämme liitännäisiä iThemes Security ja Sucuri Security, jotka tekevät kaikenlaista haitallisten url-reittien estämisestä tietoturvalokien keräämiseen. SEO-optimointiin apuna on Yoast SEO, joka auttaa tarvittavien metatietojen ja some-datan asettamisessa per-sivu tai -artikkeli. Seurantatietoon on toki oma selosteensa (linkki footerissa), mutta tässä olennaisena komponenttina Hubspot. Joissain sivuissa tarvitaan blokkeihin ja itse sivuun kiinni hienompaa dataa, jossa auttaa Advanced Custom Fields ja sen kehittyneet syöttökentät.
Performanssi
Tärkeimpänä suorituskyvyn mittarina pidän edelleen Googlen Lighthouse -työkalua, joka simuloi hidasta mobiiliyhteyttä ja mittaa sillä viivetttä eri dokumentin lataustapahtumille. “Milloin sivusta tulee interaktiivinen”, “Milloin sivulla on luettavaa sisältöä” ja niin edespäin.
Mitä lähemmäs päästään Googlen määrittämää minimiviivettä mitattavissa tapahtumissa, sitä lähemmäs performanssipiste skaalautuu kohti sataa. 0-100 pisteytyksellä sivumme sai parhaimmillaan etusivulla 93-pistettä. Ilman paljoa mitään toiminnallisuutta tai kuvia WordPressin oma, virallinen teema Twenty Twenty sai 94 pistettä etusivulla. Vanhan 2015 sivun piste oli 40:n luokkaa, joka merkkautui punaisena Googlen työkalussa.
Nautin pienistä asioista elämässä, kuten siitä kuinka paljon Google antaa nyt vihreää valoa sivullemme. 🙂
Ulkoasu ja rakenne
Ulkoasu, vaikkakin tehtiin sisältöineen kaikkineen uudestaan, pyrki lähtökohtaisesti näyttämään samalta kuin vanha sivu. Pieniä päivityksiä siellä täällä tuli samalla, kun sivu ja teema tehtiin uudestaan Gutenbergillä. Esimerkiksi hakutoiminto navigaatiossa, päivitetty versio fontista, parempi mobiilinavigaatio ja uudet typewriter- / slick.js efektit ovat näitä.
Ulkoasuun, käyttöliittymään ja aivan erityisesti saavutettavuuteen tullaan pian palaamaan tarkemmin seuraavissa kehitysharppauksissa.