Kordades kiirem veebipood

Stokker

Stokker on Baltikumi juhtiv professionaalsete tööriistade ja masinate müügi- ja teenindusettevõte.

Stokkeri viiel erineval domeenil käib kokku keskmiselt 3000–4000 külastajat päevas. Hooaja tipphetkedel ulatub külastajate arv aga kuni 10 000-ni päevas.

Pilt uuest lehest

Eesmärk

Varasemalt kasutas Stokkeri veebipood Reactil põhinevat kasutajaliidest. Veebipood töötas, kuid sellel oli nii visuaalseid kui ka jõudlusprobleeme.

Meie eesmärk oli muuta veebipood kiiremaks ja kasutajasõbralikumaks ning parandada samal ajal ka selle visuaalset külge. Tööga alustasime veebruaris ning oluline oli saada uus veebipood valmis kevadhooajaks.

Visuaalse poole pealt tegime koostööd disainiagentuuriga reThink, kes lõi Figmas uued kujundused. Kujundusprotsess käis koostöös — arvestati nii Stokkeri soove kui ka meie tagasisidet — ning meie ülesandeks jäi need kujundused veebipoes teostada.

Olemasolevat koodi analüüsides ja Stokkeriga vajadusi läbi arutades jõudsime järeldusele, et olemasoleva rakenduse parandamise asemel on mõistlikum kasutajaliides täielikult ümber kirjutada. Nii saime alustada puhtalt lehelt ning teha arhitektuursed otsused kohe uue eesmärgi järgi.

Ümberkirjutamine

Kirjutasime kogu kasutajaliidese Reacti asemel ümber Svelte'ile.

Nullist alustamine andis meile võimaluse mõelda läbi kogu lehe laadimise protsess. Eesmärk ei olnud lihtsalt vana rakendust uue tehnoloogiaga kopeerida, vaid vaadata üle, millist tööd peab tegema server, millist brauser ning millist infot on kasutajal tegelikult lehe esmakordsel laadimisel vaja.

Üks oluline osa oli ka SEO parandamine. Veebipoes on tuhandeid tooteid ja üle saja kategooria ning oluline on, et need oleksid otsingumootoritele hästi loetavad ja kiiresti kättesaadavad.

Server või brauser?

Üks esimesi küsimusi uue arhitektuuri juures oli, millal ja kus andmed laadida. Kõike ei ole mõtet serveris valmis teha, kuid samamoodi ei ole mõistlik saata kogu rakendust koos suure hulga andmetega brauserisse ja lasta kasutaja arvutil ülejäänud töö ära teha.

Lehe esmakordsel laadimisel renderdame serveris selle info, mida kasutajal on kohe vaja näha. Nii jõuab oluline sisu brauserisse võimalikult kiiresti ning otsingumootorid saavad lehe sisust kohe aru. Interaktiivsemad ja kasutaja tegevusest sõltuvad osad laadime seejärel kliendi poolel — näiteks ostukorvi loogikat pole mõtet saata koos esimese HTML-iga, kui kasutaja pole veel midagi ostukorvi lisanud.

Selline jaotus võimaldab vähendada esialgset laadimismahtu ja vältida olukorda, kus brauser teeb kogu töö veebilehe kuvamiseks.

Vähem JavaScripti

Selle jaotuse elluviimiseks oli Svelte meile suureks abiks. Erinevalt paljudest teistest raamistikest ei paki Svelte kogu rakenduse loogikat ühte suurde JavaScripti paketti, mis kasutajale tervikuna saadetakse. Selle asemel kompileerib Svelte iga komponendi ehitamise ajal just selliseks JavaScriptiks, mida selle konkreetse komponendi tööshoidmiseks tegelikult vaja on.

See on eriti oluline veebipoes, kus ühes rakenduses on väga palju erinevaid funktsioone: otsing, filtrid, ostukorv, kasutajakonto, uudised ja palju muud. Tänu Svelte'i lähenemisele ei jõua kasutajani korraga kogu see funktsionaalsus, vaid ainult see kood, mida konkreetsel lehel päriselt vaja on.

Tulemuseks on väiksem JavaScripti maht, mida brauser peab alla laadima, lugema ja käivitama — see tähendab vähem tööd nii võrguühendusele kui ka kasutaja seadmele ehk leht laeb kiiremini.

Tulemus

Projekti tulemuseks on uus, ilus, kaasaegne ja kiire e-pood.

Kiiruse paranemine tuleb hästi esile laadimisaegade võrdlusest. Mõõtsime nelja tüüpilist lehte nii vana kui ka uue veebipoega ning kõigil juhtudel oli uus lahendus kiirem.

Vana ja uue veebipoe laadimisaegade võrdlus

Paranesid ka teised mõõdetavad näitajad. Lighthouse'i SEO skoor on 92 ning Accessibility skoor samuti 92, mis näitab, et uus veebipood ei ole ainult kiirem, vaid ka otsingumootoritele paremini loetav ja kasutajatele ligipääsetavam.