Headless CMS -ratkaisulla päihität kilpailijat verkossa

15.06.2021
Business Teknologia

Verkkopalveluiden teknologiat ja toteutustavat kehittyvät jatkuvasti. Myös liiketoiminnan siirtyminen entistä enemmän verkkoon ja lisääntynyt tiedon määrä asettavat uusia vaatimuksia verkkopalveluille. Sisällönhallintajärjestelmät (eng. Content Management System – CMS) kuten WordPress tai Drupal kehittyvät koko ajan ja ne tarjoavat uusia mahdollisuuksia tehokkaampaan ja monipuolisempaan tekemiseen.

Samaan aikaan myös verkkosivujen ja web-sovellusten raja on hämärtynyt ja sivustojen kyky ja käyttäjien tarpeet tehdä sovelluksenomaisia toimintoja sekä siirtää dataa eri rajapintojen läpi on kasvanut. Yksi tapa vaativien verkkopalvelujen toteuttamiseen, on hyödyntää headless CMS:ää, joka yleistyy koko ajan ja korvaa perinteisiä tapoja toteuttaa palveluita.

Ohessa löydät tietoa siitä miten eri sisällönhallintajärjestelmät eroavat toisistaan. Tässä kirjoituksessa keskitymme headless CMS:n ominaisuuksiin ja siihen miten ratkaisun avulla voi luoda verkkosivuista entistä kilpailukykyisemmät, turvallisemmat ja tehokkaammin hakukoneoptimoidut.

 

Miten perinteinen ja headless CMS eroavat toisistaan?

Sisällönhallintajärjestelmät (CMS:t) ovat toimineet perinteisesessä mallissa melko suoraviivaisesti. Data asuu järjestelmän tietokannassa ja järjestelmän taustahallinta pitää sisällään työkalut sisällön hallintaan. Lisäksi ulkoinen käyttöliittymä (frontend) on suoraan yhteydessä siihen, mitä taustahallinnassa tehdään.

Kevyemmissä kaupallisissa pakettiratkaisuissa, kuten Squarespace ja Wix sisältöä voidaan editoida suoraan käyttöliittymästä, mutta monipuolisemmat räätälöitävät järjestelmät, kuten WordPress ja Drupal rajaavat usein sisällön hallinnan vain taustahallinnan puolelle.

Lue lisää: Opas verkkosivujen alustan valintaan – WordPress vai Drupal?

Perinteisellä tavalla rakennettu sivusto on lähtökohtaisesti toimiva, varsinkin jos se on toteutettu muuten hyvin. Perinteisessä järjestelmässä sisältöjä ja dataa haetaan jatkuvasti palvelimelta, mikä saattaa näkyä sivuston tiettynä hitautena ja kankeutena selaimessa käyttäjälle, varsinkin kehnomman nettiyhteyden kanssa. Tosin ammattimaisesti toteutettuna ne toimivat myös hyvin. Kaikki riippuu pitkälti sisällön määrästä, laadusta ja sivuston toteutuksesta.

Headless CMS puolestaan tarkoittaa, että sivuston käyttöliittymä (frontend) on erillään julkaisujärjestelmästä – alusta on siis kuvainnollisesti “päätön” eikä ota kantaa siihen miten sisällöt esitetään. Headless CMS ei ole brändi- tai tuotenimi, eikä se edusta yhtä tiettyä ratkaisua. Kyse on enemmänkin toteutustavasta, ei kilpailevasta alustasta. Malli siis eroaa perinteisestä tavasta toteuttaa verkkosivustoja, joissa julkaisujärjestelmä ja käyttöliittymä ovat yhtä ja samaa perhettä.

Headless CMS:ssä käyttöliittymä (frontend) on erillään taustahallinnasta (backendistä) eikä se ole suoraan yhteydessä sisällönhallintajärjestelmän arkkitehtuuriin. Se mitä sivusta näkyy käyttäjälle, ei ole kiinnittyneenä tietokantaan vaan CMS hallinnoi pelkästään itse sisältöä ja kaikki muut toiminnot, sivupohjat ja moduulit ovat jossain sivuston ulkopuolella.

Raakamuodossa oleva sisältö tuodaan käyttäjälle näkyvään käyttöliittymään rajapinnan kautta, esimerkiksi REST API:n avulla. Tämä tarkoittaa, että headless-järjestelmä ei aseta juurikaan rajoituksia datan ja sisällön julkaisemiseen, vaan antaa todella vapaat kädet siihen miten ja missä sisältöä halutaan esittää.

Tästä päästäänkin asian ytimeen:

Headless CMS vapauttaa suunnittelijoiden ja toteuttajien kädet luomaan ainutlaatuisia verkkopalveluita, joissa voi saumattomasti yhdistellä sovellusmaisia toimintoja, eri datan lähteitä ja interaktiivisia ominaisuuksia piittaamatta taustajärjestelmän rajoitteista.

Headless tarjoaa lisäksi mahdollisuuksia toimittaa tietoa halutussa muodossa eri alustoille ja kanaviin. Yhdestä taustajärjestelmästä, jossa sisällöt asuvat (vaikkapa WordPress), voidaan viedä eri käyttöliittymiin sisältöä näkyviin. Toteutus voisi esimerkiksi sisältää vaikkapa verkkosivuston, mobiilisovelluksen ja intranetin eri käyttöliittyminä tietyille sisällöille, esim. uutisartikkeleille.

Huolimattomasti rakennetuissa headless-toteutuksissa sisällön indeksointia ei ole osattu huomioida riittävällä tavalla, jolloin vaarana on ettei sisältö löydy hakukoneista. Tästä ongelmasta on kohuttu mm. single page app (SPA) -tyylisissä ratkaisuissa, jotka olivat muutama vuosi sitten suosittuja ja ensimmäisiä headless CMS ratkaisuja toimialalla. On toki olemassa myös headless-ratkaisuja, joissa hakukonelöydettävyyttä ei tarvitse ottaa huomioon, kuten vaikkapa toiminnallisissa järjestelmissä, jossa sisältöjä ei tarvitse indeksoida hakukoneisiin. Näissä tapauksissa toteuttajilla on vielä vapaammat kädet valita mieleisensä teknologiat.

 

Kannattaako verkkopalvelut viedä headless CMS:ään – mitä etuja voit saavuttaa?

Headless CMS:n etu on se, että verkkopalveluiden rakentaminen helpottuu, kun sisällönhallinta pidetään erillään sen esittämisestä. Nykyään sisällön julkaisun frontti voi olla periaatteessa lähes mitä vaan, eikä se ole enää pakotettu mukautumaan sisällönhallintajärjestelmän raameihin.

Verkkosivut voidaan esimerkiksi tarjoilla staattisen sivugeneraattorin luomina selaimelle. Toisin sanoen staattisia html-sivuja ja niiden sisältöjä, tyylejä ja kuvia ei tarvitse erikseen ladata palvelimelta. Ratkaisu mahdollistaa sen, että staattisella sivulla kaikki tieto on jo valmiina, mikä tekee sivuista äärettömän nopeita latautumaan. Tästä on hyötyä varsinkin käytettävyyden ja hakukoneoptimoinnin näkökulmasta, etenkin kun Googlen algoritmit nostavat nykyään sivuston latausnopeuden ja käytettävyyden entistä korkeampaan arvoon.

Headless-ratkaisussa kaikki data kulkee rajapinnan läpi, joka tarkoittaa että sisällönhallintajärjestelmään ei ole suoraa pääsyä käyttöliittymästä. Tämä tuo mukanaan merkittäviä tietoturvahyötyjä, kuten esimerkiksi vähentämällä taustahallinnan ylläpidon kirjautumisnäkymään kohdistuvia hyökkäyksiä.

 

PwC Uutishuoneen Google PageSpeed Insight tulokset
Rakentamamme PwC:n Uutishuone-sivusto perustuu headless CMS -ratkaisuun ja suoriutuu keskiarvoa huomattavasti paremmin mm. tässä Googlen PageSpeed Insights testissä, jonka perusteella sivusto hyvin todennäköisesti nousee hakutuloksissa kilpailevia sivustoja korkeammalle.

 

 

Millaisille organisaatioille headless CMS sopii parhaiten?

Verkkopalvelun tavoitteiden myötä selviää melko pian onko headless CMS järkevä vaihtoehto vai ei. Karkeasti yleistäen seuraavat tekijät puoltavat ratkaisua ja suosituksemme on lähtökohtaisesti aina headless CMS silloin kun:

  • haetaan korkeita sijoituksia hakukoneissa, jolloin sivuston tehokkuudella ja latausnopeudella on merkitystä
  • halutaan tarjota mahdollisimman nopea ja sulava käyttäjäkokemus
  • sisältöjä hallitaan joustavasta ja helppokäyttöisestä taustajärjestelmästä (e.g. WordPress tms)
  • verkkosivuston käyttöliittymä voi sisältää useita monimutkaisiakin eri toimintoja ja/tai sovellusmaisia elementtejä
  • sisältöjä haetaan eri lähteistä (esim. integraationa rajapintojen avulla)
  • sisältöjä halutaan näyttää eri useissa käyttöliittymissä (e.g. verkkosivut, intranet, mobiilisovellus)
  • halutaan panostaa tietoturvaan

 

devaajat-sampo-julia
Pixelsin oman headless-teeman kehittämisestä vastaava Sampo näkee verkkopalveluiden kehityksen liikkuvan selkeästi suuntaan, jossa sisältöjä koostetaan useista eri lähteistä, jonka myötä kaikki niputetaan yhteen käyttöliittymään. Tyypillisesti näissä tapauksissa perinteinen CMS-ratkaisu jää tarpeettoman kankeaksi.

Pixelsin lähestyminen headless CMS:ään

Pixelsin toteuttamissa headless-ratkaisuissa verkkopalvelu toteutetaan tyypillisesti WordPressiä hyödyntäen, sillä olemme rakentaneet WordPressin päällä vuosikausia omaa luotettavaa ohjelmointirunkoa, ja toteuttaneet satoja sivustoja sen avulla. Ratkaisu yhdistää parhaat palat eri lähestymisestä: tuttu, joustava ja helppokäyttöinen WordPressin sisällönhallinta yhdistyy staattisia sivuja generoivaan huippunopeaan, moderniin käyttöliittymään. Tässä mallissa vain sisältö sijaitsee WP:n tietokannassa ja käyttöliittymäkerros (eli frontend) on täysin siitä irrallinen. Toteutuksessa käytetään Reactia sekä Next.js:sää, jotka ovat laajalti tuettuja avoimen lähdekoodin ratkaisuja, joita näkee usein räätälöityjen web-sovellusten toteutuksissa.

Verkkopalveluja rakentaessa otamme huomioon teknisen hakukoneoptimoinnin ja pidämme sitä yhtenä tärkeimmistä prioriteeteista, joka usein tukee headless CMS:n valintaa toteutustavaksi.

Pixelsillä headless CMS -projektin tekeminen ja käytännöt ovat samoja kuin perinteisessä WordPress-verkkosivuprojektissa. Ainoat erot löytyvät teknologioissa ja tietyissä ratkaisuun sisältyvissä raameissa kuten lisäosien käytössä.

Lue lisää: Räätälöidyt WordPress-verkkosivut

 

 


Devaaja! Kiinnostaako haastaa miten toimialalla rakennetaan verkkosivuja? Alkaako perus WordPress-saittien rakentaminen maistua puulta?

Hyppää Pixelsin remmiin tekemään verkkopalveluita moderneilla työkaluilla ja siirtämään verkkosivukehitystä lähemmäksi sovelluskehitystä. Kurkkaa avoimet työpaikkamme.

 


Kiinnostaako miten headless CMS toimisi ratkaisuna yrityksellesi?

Jätä meille viesti tai ota yhteyttä valitsemallasi tavalla ja saat asiantuntijan arvion siitä soveltuuko headless CMS ratkaisuksi tulevaan verkkopalveluprojektiisi ja mikä sisällönhallintajärjestelmä sopii tarpeisiinne parhaiten. Palaamme tyypillisesti yhden arkipäivän sisällä kaikkiin kyselyihin!