Case study: WordPressi veebi Gutenbergile üle viimise eelised

Gutenbergi sisuredaktorist oleme varem põhjalikult kirjutanud WordPressi koolituse artiklisarjas ning seekord jõuame konkreetse näite ja selle analüüsimiseni. Mida tähendab olemasoleva WordPressi lehe Gutenbergile üle viimine ja mis kasu sellest võiks olla?

Etteruttavalt võib öelda, et kõige suurem edasiminek on kindlasti haldusmugavuse ja paindlikkuse oluline paranemine – seda näitas ka Ganttic.com veebilehe kogemus. Pärast Gutenbergile üleminekut näeb haldusvaade välja väga sarnane külastajavaatele, mis muudab halduse lihtsaks ja intuitiivseks. Samuti saab lehe jaoks arendatud plokkide kombineerimisel luua lõputul hulgal erineva ülesehitusega lehti ja plokke, mis võimaldab veebilehel ettevõtte muutuvate vajadustega kohaneda ilma lisaarendusteta. 

Kuna Gutenbergile üleminek tähendab praktiliselt veebilehe uuesti arendamist, siis on võimalik töö käigus parandada ka senise veebilehe tehnilised probleemid. Ganttic.com-i puhul vähenes oluliselt pluginate hulk, parandatud said kõik standarditele mittevastavused koodis ning märksa rohkem sai tähelepanu ligipääsetavus. Veebilehe kiirust Gutenbergile üleminek iseenesest ei paranda, kuigi vahel on võimalik lehe uuesti üles ehitamise käigus siiski üht-teist paremini optimeerida.

WordPressi leht ilma Gutenbergita?

Alustada tuleb aga siiski veidi kaugemalt. Nimelt on Gutenberg alates WordPress 5.0-st vaikimisi sisuredaktor ehk siis ametlikult peaksid kõik sellest uuema WordPressi versiooniga (hetkel uusim versioon on 6.2) lehed kasutama Gutenbergi – mis üleminekust me sellisel juhul räägime? Kuidas need veebilehed toimivad, mis ei kasuta Gutenbergi?

2018. aastaks, kui Gutenbergi redaktor oma esialgsel kujul valmis sai, nõudis kaasaegne veebidisain juba ammu plokkidest koosnevat lehe ülesehitust, layout’e, kus osa sisust on kõrvuti jm tänapäevaste veebilehtede elemente. See tähendab, et kuigi WordPress ise sellist sisuhaldust ei toetanud ja klassikaline redaktor võimaldas lisada vaid tavapärast tekstisisu vaheldumisi piltidega, olid teatud lahendused juba ammu välja kujunenud. Põhiliselt kasutati erinevaid page builder pluginaid (nt Elementor, Visual Composer jms) või siis lisati haldusest vajalik sisu Advanced Custom Fields plugina abil loodud väljadesse ning loodi vajalikud layout elemendid ainult lehe külastaja vaates.

Nagu uute asjadega tihtipeale ikka, tekitas ka Gutenberg esialgu skepsist ja tõsi ta on, et paljude uute lahenduste esimesed versioonid kipuvad olema pigem ebastabiilsed ning nende kasutuselevõtuga tasub pigem veidi oodata. Samuti eeldab Gutenbergi plokkide arendamine märksa rohkem tööd, kui näiteks Advanced Custom Fields väljadest päritud sisu kuvamine, rääkimata siis valmislahenduste kasutamisest nagu page builder pluginad. Gutenbergi plokid on kirjutatud Reactis, mis ei ole paljudele WordPressi arendajatele ilmselt väga kodune raamistik ja eeldab seega enda selleteemalist koolitamist. Ja kui tahta, et leht näeks haldusvaates välja võimalikult sarnane kasutajavaatele, siis tuleb plokk arendada justkui kaks korda – üks versioon haldusesse ja teine külastajavaatesse.

Kõiki neid asjaolusid arvesse võttes on küllaltki loomulik, et paljud WordPressi arendajad otsustasid isegi siis, kui Gutenberg WordPressi n-ö põhipaketti lisati, kasutada edasi varasemaid meetodeid. Lehele lisati Classic Editor plugin, et Gutenberg välja lülitada ning jätkati samu praktikaid, mis olid juba omaseks saanud. Nii kasutavadki umbes pooled hetkel Redwalli hooldusteenuses olevatest WP lehtedest veel mingit muud sisuhalduslahendust, mitte Gutenbergi, kuigi me ise ühtegi uut lehte mingile muule lahendusele enam ammu üles ei ehita.

Olgu öeldud ka, et Gutenbergi-eelsetel lahendustel ei pruugi iseenesest midagi viga olla. Kui leht on korralikult tehtud, siis töötavad nad väga hästi ja kui haldaja jaoks on muutmisvõimalused piisavad ning lehega mingeid probleeme ei ole, võib rahulikult ka olemasoleva lehega jätkata. Kui aga leht enam nagunii kõigile ettevõtte vajadustele ei vasta või ilmnevad mingid tehnilised probleemid, mis vajavad suuremaid arendustöid, tasub ühtlasi kaaluda ka üleminekut Gutenbergile. 

Siiski tuleb arvestada, et Gutenbergile üleminek tähendab, et suur osa veebilehest tuleb arendada täielikult uuesti ka sel juhul, kui külastajavaates võiks esialgu kõik täiesti samasuguseks jääda. Olemasolevalt lehelt saab kindlasti komponente taaskasutada (sõltuvalt veidi sellest, missuguse kvaliteediga on kood), näiteks menüüd, jalus, arhiivivaated, kuid töömahu ja seega maksumuse mõttes tuleb arvestada üsna samas suurusjärgus kuluga, mis läheks uue veebi arendusele (uue lehe puhul lisanduvad muidugi suuremas mahus kulud ka teistele töödele, nt analüüs, disain, projektijuhtimine). Kindlasti on tegu aga suure sammuga tänapäevasema veebilehe suunas, mis toob kaasa palju eeliseid.

Gantticu veebiuuenduse plaan

Ganttic tegeleb ressursside planeerimise tarkvara müügiga. Nende klientideks on ettevõtted üle maailma, esindatud on üle 50 erineva tegevusvaldkonna, tarkvara kasutab üle 20 000 kasutaja ning planeeritud on üle 350 000 projekti. Seega on veebileht Gantticu jaoks oluline visiitkaart ja müügikanal, näidates ettevõtte professionaalsust ja tutvustades oma toote parimaid külgi. Veebilehel on ka mahukas blogi, kus avaldatud artiklites tutvustatakse ettevõtte kliente, jagatakse infot Gantticu uuenduste kohta ning antakse nõu erinevatel töövoo planeerimisega seotud teemadel.

Ganttic.com veebileht on väga tänapäevane, dünaamiline ja visuaalselt mõjus veebileht. Kujunduses on kasutatud ohtralt animatsioone ja interaktiivseid elemente ning see jätab külastajale väga värske ja kaasaegse mulje.

Ganttic pöördus algselt meie poole sooviga tellida hooldusteenust. Pakume uutele hooldusteenuse klientidele alati ka võimalust teha kõigepealt tehniline audit ning selle käigus ilmnes veebilehel tehnilisi probleeme. Lehel oli palju uuendamata pluginaid, samuti pluginaid, mille vajalikkus ei olnud kindel, esines mõningaid probleeme koodi kvaliteedi, ligipääsetavuse ning turvalisusega. Oli lehti, mida ei kuvatud väiksematel ekraanidel korrektselt. Suureks mureks oli veebilehe kiirus. Samuti soovis klient teha veebilehe sisus ja ülesehituses muudatusi, mis eelneva lahenduse korral ei olnud võimalik. 

Kuna muudatusi ja parandusi tuli nagunii teha, otsustas klient investeerida ka Gutenbergile üleminekusse, hoolimata sellest, et veebidisaini muudatused olid minimaalsed. Seega alustasime tööd täiesti uue arendusveebi loomiseks, mis näeks välja olemasoleva lehega identne (v.a sisumuudatused, mida klient soovis ning mõned väiksemad disainiga seotud parandused, mille ise välja pakkusime), kuid kasutaks ära Gutenbergi eeliseid. Töö käigus plaanisime parandada ka olemasoleval veebilehel esinenud tehnilised probleemid.

Haldusmugavus

Gantticu veebilehe disain on küllaltki keeruline ja standardsed page builder’id vajalikke funktsionaalsusi pakkuda ei suuda, seega kasutati vanal veebilehel plokkide sisu haldamiseks ACF-i. Selle abil loodud haldusvaade oli üsna selge ja arusaadav, kuid täiesti erinev sellest, missugune plokk kasutajavaates välja nägema hakkab.

Gutenberg võimaldab aga kuvada halduses väga sarnast pilti sellele, mida külastaja veebilehel näeb ja tekstid on enamasti muudetavad lihtsalt neile haldusvaates klikkides.

Lisaks on paljudel juhtudel võimalik plokke lisada üksteise sisse ja luua nii lõputul hulgal erinevaid kombinatsioone. Piltidel näidatud ploki puhul näiteks on vanas veebis võimalik sisutulpa lisada üks kindla taseme pealkiri, tekstilõik, mida saab vormindada ka näiteks loendiks, ning link, millest tekib külastajavaates nupp. Seevastu uues veebis on võimalik sisutulpa lisada kõikvõimalikke kombinatsioone pealkirjadest, lõikudest, loenditest ja nuppudest, näiteks lisada mitu nuppu üksteise kõrvale, muuta pealkirja taset jpm. Samuti on võimalik elementide järjekorda muuta.

Paindlikkus

Gutenbergi-põhine lahendus võimaldab võrreldes vana veebilehega palju suuremat paindlikkust ka plokkide taustavärvide ja ülesehituste osas. Võtame näiteks avalehe ploki “A more efficient world”.

Vanal lehel oli võimalik antud ploki puhul muuta selle pealkirja ja kirjeldavat teksti, muuta vahepealkirja ning lisada ettevõtete logosid. Plokki kuvati alati sinise taustavärviga ning sisu jagati kindlaks määratud laiusega tulpadesse.

Seevastu uues veebis on plokk loodud erinevate üksteise sisse paigutatud Gutenbergi plokkide abil. Kõige välimine plokk on “Content background”. Kui halduses on aktiivne see plokk, siis on võimalik seadete paneelilt muuta taustavärvi, sisu laiust ja seda, kui palju jätta ruumi ploki sisu ja ääre vahele. Selle sees on tulpade plokk, millel on erinevaid variatsioone tulpade laiuste ja arvu muutmiseks. Tulpadesse omakorda saab lisada kõikvõimalikke muid sisuplokke. Hetkel on vasakpoolsesse tulpa lisatud pealkiri, lõik ja plokk “Companies”, millesse on lisatud ettevõtete logod. Parempoolsesse tulpa on aga lisatud plokk “Globe”, mis kuvab välja gloobuse.

Seega, kuigi plokid näevad külastajavaates välja identsed, on uues veebis plokk loodud palju paindlikumaid lahendusi kasutades. Kõiki ploki osi on võimalik kasutada ka väljaspool konkreetset sinise taustavärviga plokki ning juba ainuüksi selles ühes terviklikus plokis kasutatud sisemiste plokkide abil on võimalik luua tohutul hulgal erinevaid plokke, kasutades erinevaid taustavärve, erineva laiusega konteinereid, lisada sisu mitmesse tulpa jaotatuna või ühes tulbas jne. Need võimalused annavad haldajale väga palju mänguruumi kujundada oma veebileht täielikult ümber, hälbimata samas veebilehe disainist – kasutatavad värvid, pealkirjasuurused, fondid, konteineri laiuste variandid jm lähtuvad lehe disainist, kuid haldajal on nende ulatuses vabad käed.

Vanal veebilehel leitud tehniliste probleemide lahendamine

Ganttic.com veebilehele tehtud tehnilises auditis ilmnesid mitmed probleemid, mis said uue lehe arenduse käigus parandatud. Need parandused ei ole üldjuhul seotud otseselt Gutenbergile üleminekuga, vaid said lahendatud tänu sellele, et leht ehitati uuesti nullist üles ning tehti seadistused vastavalt Redwallis kasutusel olevatele standarditele. Nii sai näiteks oluliselt vähendatud kasutusel olevate pluginate arvu (21 vs 9), mis vähendab ajakulu veebilehe hooldusele, muudab lehe stabiilsemaks ning vähendab turvaaukude tekkimise riski.

Samuti said parandatud olemasoleva veebi koodis ilmnenud probleemid ja standarditele mittevastavused. Märkimisväärselt paremaks sai veebilehe ligipääsetavus. Lisaks ligipääsetavuse validaatori leitud vigade parandamisele on Gantticu uus leht täies mahus navigeeritav ka ainult klaviatuuri kasutades. Samuti said parandatud turvaküsimused – lisatud vajalikud HTTP headerid ja peidetud päringust serveri versiooninumber.

Suur murekoht olemasolevas veebis oli lehe jõudlus. Esilehe kiirustestid mobiilis ei andnud häid tulemusi ning lootsime ka seda uue lehe arenduse käigus parandada. Gutenbergile üleminek iseenesest jõudlust otseselt ei mõjuta, kui ainult nii palju, et vahel võib tänu sellele väheneda pluginate hulk, mis vähendab lehele laetavate skriptide ja stiilifailide hulka. Kuigi ka seekord on uuel lehel pluginaid palju vähem kui vanal lehel, ei andnud see esilehe kiirusele soovitud mõju ning laadimiskiirus jäi muutumatuks.

Veebilehe kiiruse puhul tuleb aga arvestada, et see sõltub väga paljudest asjaoludest. Lisaks veebilehe üldisele optimeeritusele mõjutab lehe laadimiskiirust suurel määral näiteks lehel kasutatavate piltide, videote jm visuaalsete elementide suurus. Hetkel tundubki, et kuna Gantticu esilehel on suuremahulisi visuaalseid elemente väga palju, ei pääsenud tehtud optimeerimine mõjule ning kiirus tervikuna ei paranenud. Kui võrrelda laadimiskiirust lehtedel, kus visuaalset materjali ei ole, on laadimiskiiruse tõus mitmekordne.

Laadimiskiirust mõjutavaid tegureid on loomulikult veelgi rohkem, näiteks serveri seadistus, lehele lisatud skriptid (näiteks vestlusaken, jälgimiskoodid jmt), tehtavate päringute hulk jne. Kõige rohkem on arendajal võimalik laadimiskiirust mõjutada, pakkides failid kokku nii väikseks kui võimalik ning seadistades erinevad reeglid, millal laadida alla uued failid ja millal kasutada juba olemasolevaid. Siiski võivad selles osas tehtud pingutused jääda tulemusteta, kui on piisavalt teisi mõjutegureid, mida muuta ei saa. Pilte ja videosid on võimalik optimeerida, kuid mitte lõpmatuseni, ning kui veebilehe eesmärke arvestades on lisaskriptid hädavajalikud, ei saa ka neist kuidagi loobuda.

Kokkuvõtvalt

Gutenbergi sisuredaktor võimaldab luua veebilehe disainile vastava tööriistakasti, mis on stiililises mõttes piiratud disaineri loodud elementidega, kuid mille erinevaid osi omavahel kombineerides on võimalik veebilehe ülesehitust lõputult ümber kujundada. Selline veebileht vastab igati tänapäevase modulaarse disaini nõuetele ning suudab hea hooldamise ja täpse halduse korral kohaneda paljude vajadustega, mis võivad ettevõttel oma kodulehega seoses tekkida. 

Arvestada tuleb, et Gutenbergile üleminek on mahukas töö ning hoolimata sellest, kas varasem veebileht juba WordPressi kasutab, on arendusmaht võrreldav uue veebilehe arendusega. Samal ajal tähendab uuesti arendamine seda, et üldjuhul on võimalik ühtlasi ära lahendada olemasoleval lehel tekkinud tehnilised probleemid ka juhul, kui need ei ole otseselt sisuredaktoriga seotud.

Samuti tuleb olla valmis selleks, et võimaluste rohkus tähendab ka teatud keerukust veebilehe halduses orienteerumisel – plokkide võimaluste ärakasutamiseks tuleb end Gutenbergi haldusloogikaga kurssi viia ning võib minna pisut aega enne, kui haldus omaseks ja mugavaks muutub. Kui aga Gutenbergi plokkide haldusega ära harjuda, hakkab see tunduma täiesti loomulik ja väga mugav.

Omalt poolt saame selles osas aidata halduskoolituse ja põhjaliku kirjaliku haldusjuhendiga, mille alati meie tehtud veebilehtedele kaasa anname. Samuti on võimalik abi saamiseks pöörduda meie kasutajatoe poole. Isegi kui mingite haldusest tehtavate muudatuste elluviimiseks on vaja kasutajatoe abi, on sellele kuluv aeg ja tasu kindlasti kordades väiksem, kui lasta uusi lahendusi juurde arendada.

Meie Redwallis oleme kindlalt Gutenbergi usku, seega kui hakata planeerima suuremaid uuendustöid oma veebilehel, soovitame me kindlasti kaaluda ka Gutenbergile üleminekut. Igal juhul laiendab see samm oluliselt veebilehe kasutamise paindlikkust ja muudab halduse tänapäevasemaks. Lasta 2023. aastal veel arendada uusi WordPressi veebe, mis ei kasuta ära Gutenbergi eeliseid, ei ole kindlasti kuidagi põhjendatud.