contact

Aleksi Tuompo
aleksi@laniakea.fi
044 252 0386

Laniakea Studio Oy
ALV-tunnus: FI31996699
Helsinki, Finland

Uuden sukupolven verkkosivusto parhaille brändeille – näin moderni sivusto eroaa perinteisestä WordPress-sivustosta

SPA-sivusto eli Single-page Application on moderni verkkosivusto – tai oikeammin verkkosovellus – joka muistuttaa teknologialtaan ja käyttökokemukseltaan paremmin mobiilisovellusta kuin perinteistä verkkosivustoa.

SPA-sivustolla sivulta toiseen siirtyminen tapahtuu silmänräpäyksessä ilman viivettä, sillä sisällöt latautuvat dynaamisesti selailun lomassa. Valkoisena välähtävät ruudut sivujen välissä ovat siis pelkkä muisto viime vuosikymmeneltä.

Lisäksi pilvipohjaiset sisällönhallintajärjestelmät on varta vasten suunniteltu sisällöntuottajille ja digimarkkinoinnin ammattilaisille, mikä tekee sivuston päivittämisestä ja vaikkapa kampanjasivujen luomisesta tavattoman helppoa.

Eikä ylläpidostakaan tarvitse juuri huolehtia. Pilvessä toimiva julkaisupalvelu optimoi koodin, kuvat sekä videon ja jakaa sivuston huippunopeaan sisällönjakeluverkostoon – ja vieläpä perinteistä webhotellia edullisemmilla ylläpitokustannuksilla.

Lopputuloksena saat viimeisen päälle hakukoneille optimoidun, henkeäsalpaavan suorituskykyisen sivuston palvelemaan asiakkaitasi ja kasvattamaan brändiäsi.

Nämä ovat niitä näkyvimpiä hyötyjä, miten nykyajan teknologialla toteutettu SPA-sivusto eroaa perinteisistä WordPress- tai Drupal-sivustoista.

Tässä artikkelissa avaan tarkemmin, mitkä ovat modernin web-kehityksen kolme tärkeää elementtiä ja mistä edellä mainitut hyödyt juontavat juurensa.


1. Sivusto kuin sovellus – parempi suorituskyky ja käyttökokemus

Kun saavut perinteiselle sivustolle, HTML- ja CSS-tiedostot (HTML vastaa sisällöistä ja CSS ulkoasusta) latautuvat päätelaitteellesi ja piirtävät etusivun näytölle. Kun klikkaat seuraavalle sivulle, selain lähettää kutsun palvelimelle ja palvelin vastaa uudella paketilla HTML- ja CSS-tiedostoja. Tästä johtuu pieni viive sivulta toiseen siirtyessä.

Modernin SPA-sivuston toimintaperiaate on erilainen, koska itse asiassa se on sovellus.

Ensimmäisen sivulatauksen yhteydessä puhelimesi tai tietokoneesi selaimeen latautuu Javascript-sovellus, joka on modernin web-kehityksen ydin. Sovellus pitää huolen muun muassa siitä, että seuraava näkymä on aina valmiina esitettäväksi. Tämän ansiosta sivuston selailu on parhaimmillaan yhtä sulavaa kuin hyvän mobiilisovelluksen käyttö.

Modernin sivuston käyttöliittymä koodataan ohjelmointikehyksellä, esimerkiksi Reactilla, jolla koodataan myös mobiilisovelluksia (esim. Instagram). Uusien ohjelmointikehysten ansiosta kaikkea – tai oikeastaan juuri mitään – ei tarvitse ohjelmoida alusta asti itse, mikä nopeuttaa ohjelmointia. 

Reactin lisäksi käytetään Gatsby- tai NextJS-ohjelmointikehyksiä, jotka automaattisesti optimoivat sivuston verkkoympäristöön. Esimerkiksi kuvien dynaaminen lataus, tekninen hakukoneoptimointi, URL-osoitteiden reititys ja XML-sivukartat ovat Gatsbyyn sisäänrakennettuja ominaisuuksia.

Näitä verkkosivuja eli -sovelluksia, jotka toimivat selaimessa applikaation tavoin, kutsutaan nimillä Single-page Application (SPA) tai Progressive Web App (PWA). Tai ehkä olet kuullut puhuttavan JAMstackista (Javascript, APIs ja Markdown) tai Headless web:stä.

Nämä ovat kaikki nykypäivän metodeja ja teknologioita (tietyillä eroavaisuuksilla), joilla edelläkävijät rakentavat verkkoa.


2. Headless CMS – uuden sukupolven pilvipohjaiset sisällönhallinta-alustat

Kuvakaappaus DatoCMS-sisällönhallinta-alustasta, jolla tämänkin sivuston sisältöjä hallitaan.

DatoCMS on niin kutsuttu headless CMS (Content Management System), joka on suunniteltu varta vasten sisällöntuottajille ja markkinoinnin ammattilaisille. Some-toiminnot, versiohistoria, kuvankäsittely, kieliversiot, käyttäjätasot, rajapinnat ja paljon muuta kuuluvat palveluun. 

Head eli pää viittaa sivustoon (koodiin ja ulkoasuun), joka on siis riippumaton sisällönhallinta-alustasta. Headless web-arkkitehtuuri, jossa järjestelmät/palvelut keskustelevat keskenään rajapintojen välityksellä, on suosittua modernissa web-kehityksessä. 

Headless-sisällänhallintajärjestelmän käyttöönotto on suoraviivaista. Web-kehittäjä luo sisältömallit ja kentät sivuston sisällöille, kustomoi hallintapaneelin asiakkaalle sopivaksi ja konfiguroi rajapinnan sisällönhallinta-alustan ja varsinaisen sivuston välillä.

Sisällönhallinta tilataan ikään kuin palveluna (Saas), eikä järjestelmää tarvitse itse ylläpitää vuokratulla palvelimella. Tämän ansiosta alusta pysyy ajan tasalla, turvallisena ja sitä kehitetään jatkuvasti.

Headless CMS on kasvattanut suosiotaan valtavasti viime vuosien aikana, joten tarjolla on monia sekä kaupallisia että avoimen lähdekoodin ratkaisuja. 

3. Selkeä kokonaisuus – edullinen (tai maksuton) ja ulkoistettu ylläpito

Tämänkin SPA-sivuston sisällöt sijaitsevat DatoCMS:ssä ja koodikanta GitHubissa. Netlify julkaisee sivun sisällönjakeluverkostoon.

Modernit verkkosovellukset ovat usein modulaarisia – elegantti kokonaisuus syntyy muutamasta palvelusta, jotka kommunikoivat keskenään rajapintojen välityksellä. 

Perinteisessä sivustossa (esim. WordPress tai Drupal) kaikki toiminnot sijaitsevat samassa ympäristössä, asiakkaan vuokraamalla webhotellissa eli palvelimella.

Pilvipohjaisen mikropalveluarkkitehtuurin idea on tilata järjestelmät (esim. sisällönhallinta ja julkaisualusta) palveluna (Software as a Service). Markkinoilla on sekä kaupallisia että avoimen lähdekoodin ratkaisuja. Palvelujen kehitystä vauhdittaa niiden keskinäinen kilpailu. 

Modulaarinen rakenne auttaa myös pitämään koodin siistinä ja kokonaisuuden selkeänä. Itseään kunnioittava ohjelmoija nukkuu siis yönsä paremmin.

Selkeä ja nykyaikainen arkkitehtuuri on jatkokehityksen kannalta olennaisen tärkeää. Verkkokaupan tai minkä tahansa muun toiminnon integroiminen sivustoon onnistuu luontevasti, kun teknologiat ja menetelmät ovat ajan tasalla.

Esimerkiksi tämän sivuston toiminnan ja ulkoasun saneleva koodi sijaitsee GitHubissa. Sivusto hakee sisällöt DatoCMS:stä. Kun päivitän koodia GitHubissa tai sisältöjä DatoCMS:ssä, pilvipohjainen julkaisualusta Netlify huomaa muutoksen ja päivittää sivuston automaattisesti globaalissa sisällönjakeluverkostossa. 

Mitä ylläpito maksaa?

Vaikka edellä mainitut palvelut ovat kaupallisia, tämän sivuston ylläpitokustannukset ovat 0 €/kk (ainoa, mistä maksan, on domain-nimestä). Pilvipalveluille on yleistä pay as you grow -hinnoittelumalli, joten hinnat vastaavat tarvetta. 

Kiinnostuitko, vai oliko teksti liian teknistä tai pinnallista? Kysy tai kyseenalaista, yhteystiedot alapalkissa.

references

yonoton.com

Special Features
High-performance Video Streaming
Easy-to-manage PDF Embedding

customer Yonoton
design Yonoton
development Laniakea

jcad.fi

Special Features
Advanced SVG & Animations

customer JCAD
design Jacob Stewart
development Laniakea

customer Helkama
design Sparksof
development Laniakea