Kako samostalno postaviti WooCommerce hosting, domenu i temu (bez tuđe pomoći!)

TL;DR: Zakupite domenu i DNS zonu na AWS-u, nakon toga Kinsta hosting i na njega implementirajte WordPress, WooCommerce i Hello Elementor WP temu s Rank Math SEO pluginom.

Podvodni shark-proof kablovi, misteriozne DNS zone i hrpetina HTML/CSS/JS datoteka čine okosnicu svake web aplikacije. Ti arhaični kamenčići, proizašli iz ARPANET-a 1969., dan danas su razlog spoticanja za novopečene internetske trgovce – pogotovo kada ih izrađuju samostalno (DIY).

Na sreću, WordPress i WooCommerce “stack” se toliko razvio i standardizirao u 18 godina postojanja da se “uradi sam” dio zapravo svodi na dva glavna tehnološka odabira: koji hosting zakupiti (2) te koju gotovu temu instalirati (3). Sve ostalo poput domene, SEO-a, unosa sadržaja, unosa i održavanja proizvoda, upravljanja kupcima i narudžbama, eCommerce izvještavanje, vezanje digitalnog marketinga uz eCommerce – opisali smo u prva dva članka ovog serijala pa se nećemo previše zadržavati na tim temama.

Hosting server i gotova WP tema su kompanjoni na duge staze koje za razliku od sadržaja nećete mijenjati, a prirodni tijek postavljanja WooCommerce trgovine ćemo slijediti i ovdje:

1. Kupnja domene i postavljanje DNS zone
2. Zakup hosting servera
3. Odabir gotove WordPress teme
4. Nadogradnja instalacije s pluginovima

1. Kupnja domene i postavljanje DNS zone

Domena je online adresa internetske trgovine i vjerojatno prva puzla “brenda” s kojim će se vaš korisnik susresti.

Sve domene na ovom svijetu imaju dva glavna dijela: SLD (Second Level Domain) i TLD (Top Level Domain). Na primjeru neuralab.net: “neuralab” je SLD, a “net” je TLD. Domenu birate i kupujete na jednom od tisuću službenih registrara, a preporuka je da odaberete Amazon Web Services (AWS) i zakupite uslugu naziva Route 53.

Što se tiče odabira domene, sam TLD poput .hr, .com, .net. biz, .me nije bitan i neće značajno utjecati na vaše poslovanje niti na vaš SEO rank. Postoje mišljenja eksperata poput Maria Frančeševića (SeekandHit) da bi bilo dobro imati lokalnu domenu za lokalno tržište pa poslušajte taj savjet (detalji na donjem videu) ako otvarate web shop samo za Hrvatsku.

Ako imate ambicije o prodaji preko granice, slobodno uzmite .com domenu ili neki drugi globalni TLD. Odabir, naravno, treba imati poslovnog rezona i domena treba biti smisleno vezana uz vaš brend. Ovdje se vratite na drugi članak iz serijala i razmislite kakva domena je dobra za vašu kompaniju i brend. Nije čudno niti da je domena različita od brenda, no to će vam zakomplicirati promociju i cijeli marketinški miks.

Hrvatske domene (.hr) se mogu kupiti kod domaćih registrara poput Avalona, Croadrie ili Plusa, a imate pravo i na jednu besplatnu koja je istog naziva kao i vaše poduzeće. Taj proces besplatnog preuzimanja radite kod Carneta elektronskim putem, a stari znalci se vjerojatno sjećaju doba kada se .hr domena registrirala fizičkim odlaskom na Prisavlje ili faxiranjem (!) pozamašnog formulara.

Jednom kada kupite domenu, koja za .com verziju košta desetak dolara godišnje, AWS Route 53 će vam kreirati i DNS zonu te omogućiti uređivanje iste.

DNS zona je “običan” tekstualni tablični popis koji je smješten na AWS serverima, u IT industriji joj se tepa i da je “internetski imenik”. Glavna zadaća DNS zone je ukazati pregledniku na kojoj IP adresi se nalazi hosting server za traženu stranicu (navedeno se inače zove A (address) DNS zapis).

Naprimjer, kada poželite ići na google.com, vaš preglednik prvo pita DNS zonu na kojem se serveru nalazi Google.com web aplikacija i tada DNS zona odgovara pregledniku: “Hej pregledniče, Google.com server ti se nalazi na IP adresi 173.194.36.51, molim te učitaj stranicu s tog servera i prikaži je korisniku”. U DNS zonu se stavljaju i ekstremno važni MX (Mail eXchanger) zapisi koji usmjeravaju email poruke prema email poslužiteljima (Google Suite, Office 365, Zoho Mail…) no s time već izlazimo izvan gabarita ovog teksta.

AWS Route 53 je odličan izbor iz nekoliko razloga. Ekstremno je jeftin, a iznimno potentan sustav s kojim ćete dobiti enterprise-grade DNS rješenje. AWS je inače pionir cloud usluga te je razvio data centre po cijelom svijetu. Samim time će vaša DNS zona biti brza i globalno disperzirana, što ima utjecaja na brzinu učitavanja stranice (koja pak ima utjecaj na SEO i cijelo korisničko iskustvo).

2. Zakup hosting servera

“Zar nisu domena i hosting ista stvar?” često je pitanje kod novopečenih eCommerce vlasnika. Odgovor je jednostavno – ne. Hosting je server, računalo koje ugošćuje vašu eCommerce web aplikaciju. Za nove čitatelje, web aplikacija je skup HTML, JavaScript, CSS, PHP i ostalih datoteka koje moraju biti smještene na stalno dostupnom serveru kako bi ih korisnik mogao učitati u svoj preglednik.

U slučaju WordPressa i WooCommercea to bi trebao biti server s Linux operativnim sustavom (koji se i inače koristi na otprilike 2/3 svih svjetskih servera). Ljepota WordPressa je što je njegova popularnost dovela do poplave specijaliziranih hosting firmi koje će za vas napraviti sve postavke i optimizaciju kako bi WooCommerce pravilno radio.

Neke od najpoznatijih WP hosting kompanija su Pantheon, WPX, Kinsta, Liquid, WPEngine, GreenGeeks, SiteGround itd. Odabir hosting kompanije se može temeljiti na tisuću varijabli, no bitne su zapravo samo tri:

• Hosting kompanija treba upošljavati WordPress sistem administratore i DevOps inženjere kako bi vam oni mogli pomoći oko specifičnih WordPress problema. Ova stavka je podosta bitna jer si ne želite dozvoliti da vam u subotu u 2 ujutro sistem admin kaže “kod nas je sve u redu, problem je u vašem WP-u”. Takve rečenice nećete čuti od WPEnginea, WPX-a ili Kinste i njihovi timovi će raditi s vama u otklanjanju problema na bilo kojoj razini eCommerce aplikacije.
• Hosting kompanija treba temeljiti svoje servere na Google Cloudu i njihovim novim C2 VM strojevima. Google Cloud je dokazano najbolja Infrastructure-as-a-Service platforma te njihove virtualne mašine omogućuju bolje brzine učitavanja za razliku od AWS-a ili Azurea (što će se vidjeti dolje u tablici). Jedan od mnogih razloga je što Google ima vlastitu globalnu optičku mrežu te prvi privatni trans-atlantski podvodni kabel naziva “Dunant”.
• WP performance metrike trebaju biti najbolje moguće, a to ostvaruje tek par hosting firmi. Po mjerenjima ćete također vidjeti i prednost Google C2 virtualnih mašina.

Skalabilni Fun Fact: U IT svijetu vlada lažni mit da WP ili Woo nisu skalabilni. WooCommerceova Ahilova peta je recimo tablica baze eCommerce podataka koja nije najbolje tehnički riješena, no programerke/programeri koji to tvrde zaboravljaju da skalabilnost ponajviše ovisi o serverima, a manje o odabiru aplikacijske platforme (Magento, Woo, Shopify, Presta…). Za razliku od broja SKU-ova ili broja mjesečnih narudžbi, Add To Cart per Minute (ATCM) je kvalitetnija metrika kada želite izmjeriti skalabilnost eCommerce sustava. ATCM je inače i preporučena metrika skalabilnosti od strane WooCommerce dokumentacije. Na primjer, Chris Lema je uspio postići 2000 ATCM-a na WooCommerce WP Engineu što je u svom “Alec Baldwin ABC” stilu prezentirao 2016. na globalnom WooConfu…

Ovdje ćemo se pozvati na sada već legendarno mjerenje hosting firmi koje izvodi Matthew Woodward uz jednu napomenu – dat ćemo prednost dvjema metrikama: “WP Execution Time” (milisekunde, manje je bolje) i “Number of Queries per Second” (više je bolje) jer te dvije metrike najbolje opisuju ponašanje servera u non-cached situacijama što je tipična eCommerce situacija. Prevedeno, ta dva parametra će najviše utjecati na maksimiziranje ranije spomenutog ATCM-a.

Po navedenim mjerenjima ispada da je Kinsta prvak u Woo hostingu za maksimiziranje ATCM-a i ovo mogu potvrditi iz prve ruke. Neuralab inače koristi AWS, Kinsta i WP VIP te je topla preporuka da za vlastiti DIY projekt uzmete Kinsta ekipu. Pri zakupu Kinsta paketa ćete odmah dobiti opciju da instalirate WP i Woo.

Napravite to, ali nemojte automatski instalirati dodatne predložene pluginove jer to vas čeka kasnije. Kinsta sučelje će vam dati IP adresu zakupljenog kontejnera, a istu sada možete staviti u već kupljenu AWS Route 53 DNS zonu. Cijeli ovaj članak vam zapravo i nije potreban ako idete s Kinstom jer njihov WP tim će podesiti cijeli “stack” ako ih zamolite. Kinsta nije jeftina, početni paketi su oko 30 USD mjesečno, no uštedjet će vam vrijeme i živce “down the road” jer upravo je hosting najveći razlog što neki od škrtih trgovaca njeguju podočnjake.

3. Odabir gotove WordPress teme

U WordPress svijetu postoji koncept tzv. tema, a one su tehnički gledano skup HTML, CSS, JS i PHP datoteka koje WordPress web sjedištu daju dizajnirani gotovi izgled i poneku funkcionalnost. Kažem poneku funkcionalnost jer bi u WP svijetu “pluginovi” trebali biti ti koji webu daju određenu funkcionalnost (na primjer, kreaciju i obradu formulara ili automatsko punjenje polja za SEO).

WordPress tema je dakle osmišljeni, dizajnirani, potpuno funkcionalni i već izgrađeni izgled WordPress/WooCommerce web aplikacije. Instalacija teme traje doslovno 5 minuta i njezina aktivacija na WordPress stranici će potpuno preuzeti brigu oko samog izgleda web stranice.

Vi naravno možete razviti i svoju vlastitu ekstremno brzu enterprise-grade WP temu s custom CX/UX/UI (što recimo radimo mi u Neuralabu), no to je već projekt za web dizajnere, frontend inženjere i programere što je posebna znanost koju ćemo obraditi u 4. (sljedećem) članku serijala. Samim time dolazimo do glavne prednosti WP tema – one su praktički gotove, većinom besplatne i standardizirane, a štede i vrijeme za pokretanje internetske trgovine tzv. time to market. Ukratko, neće vam biti potrebni web dizajneri, frontend programeri i cijeli projekt izrade custom WP teme.

S gotovom WP temom ne možete puno “promašiti” no morate biti svjesni par momenata. Naime, na zadnjem digitalnom doručku ste mogli saznati pravu istinu o eCommerce projektima – prepuni su malih kotačića od kojih svaki nepodmazani može narušiti krhko povjerenje kupaca (Ivan Vučković, A1, gornji video). Sadržaj, cijene, popusti, dostava, načini plaćanja, put korisnika pri plaćanju (checkout UX), kupon kodovi, uvjeti korištenja, GDPR, SSL, CX, PCI-DSS, A11Y … vrti li vam se već u glavi? U ovom serijalu smo već pričali da sadržaj JEST kralj te da će nam pravilan odabir eCommerce platforme riješiti puno budućih problema. No pazite – uzalud vam kvalitetan sadržaj i korištenje WooCommercea ako je WordPress tema toliko loša i spora da gubite svakog trećeg kupca!

Matt Mullenweg procjenjuje vrijednost WP ekosustava na cca 10 milijardi dolara [Postlight podcast, 03:08] i tu dolazimo do jedne posljedične veze – nedostatak gotovih tema je što su one u većini slučajeva tzv. bloated software s puno sitnih “điđa” koje vam načelno neće trebati. Autor teme želi pokriti čim veći market reach i moguće scenarije korištenja pa ih zato unapređuje raznim nepotrebnim funkcijama. Bloated software ima jedan ozbiljniji problem – povećava vrijeme učitavanja stranice. Prevedeno, gotove teme će uvijek, ali uvijek biti sporije od custom (dobro) izgrađenih WP tema ili golog HTML / CSS / JS-a. Drugo, bit će teže za kasnije održavanje. Treći problem je što će vaš web izgledati kao sijaset drugih (ipak, tome možete doskočiti unosom originalnog i kreativnog sadržaja što smo pisali u drugom članku serijala).

Sad se postavlja najveće pitanje – koju gotovu WordPress temu odabrati? Time otvaramo Pandorinu kutiju. U ovih 18 godina koliko WordPress postoji, svjetlo dana je ugledalo više od 31.000 aktivnih tema (!) i nemoguće je da vi samostalno obradite cijeli ekosustav te izanalizirate što koja od njih nudi i koliko se brzo učitava.

Također, varijabli oko odabire tema je u najmanju ruku previše. Svaka od njih nudi neke funkcije, izglede, demoe, vizualizacije, izbornike, mogućnosti prilagodbe te važno za ovaj članak – mogućnosti prikaza WooCommerce proizvoda. Te sve fakte nećemo direktno uzimati u obzir već ćemo se baciti na DIY inženjerske parametre poput opisane brzine učitavanja, Google Lighthouse score-a, GTMetrix i Pingdom metrika.

Naime, ti parametri će dugoročno utjecati na vaš CX, UX te SEO score, a zapravo su i jedine objektivne fer metrike za usporedbu tema. Također, Google će u svibnju 2021. izbaciti novu verziju svog SEO ranking algoritma koji će “Core Web Vitals” metrike još više uzimati u obzir. One su redom:

• TTFB – Time To First Byte – vrijeme koje protekne od korisničkog klika tj. zahtjeva za nekim resursom pa do prvog dolaska tog resursa na korisnički preglednik. Manje je bolje.
• FCP – First Contentful Paint – vrijeme koje je potrebno da bi se na vašem pregledniku pokazale prve naznake sadržaja. Manje je bolje.
• MSI – Mobile Speed Index – Googleov indeks brzine stranice na mobilnim uređajima. Vrijeme koje je potrebno da bi se iscrtao sav vidljivi sadržaj na mobilnim uređajima. Manje je bolje.
• TTI – Time To Interactive – Vrijeme koje je potrebno da bi učitana web stranica postala potpuno interaktivna. Manje je bolje.
• Google PSS – kompilirani indeks brzine stranice, izračunan na temelju gornjih mjerenih varijabli. Više je bolje.

U obzir smo uzeli WP teme koje zadovoljavaju 4 faktora: poznate su na tržištu, imaju kontinuiranu podršku od strane njihovih kreatora, redovno se nadograđuju kako bi pratile razvoj WP sustava i podržavaju WooCommerce funkcionalnosti. Uži izbor se sveo na 21 WP temu uključujući nativnu Woo temu “Storefront”, općepoznati “OceanWP” ili pak “Hello Elementor” kreiran od tima koji inače proizvodi jedan od najpoznatijih page buildera u WP ekosustavu – Elementor.

Detaljno mjerenje rađeno je od strane Kinsta tima, a datum mjerenja je bio 25.11.2020. Postoji mogućnost da rezultati variraju ili da je neki od proizvođača tema objavio novu (bolju/lošiju) verziju iste teme. Tipična mjerena instalacija je uključivala WordPress, WooCommerce, unesene sadržaje iz standardnog WP Unit Test XML-a te dodatnih 12 različitih proizvoda uz instalaciju standardnih WP pluginova. Više informacija i postavki oko samog mjerenja možete naći na detaljnom Kinsta članku.

Gornja tablica prikazuje da najbolji Google PSS ima Hello Elementor, a ta tema ima ujedno jedan od najnižih FCP i TTFB vremena. Samim time je moja preporuka da vlastiti WP i Woo izgradite pomoću Hello Elementor teme. Možete probati i s Orchid, Neve ili Generate press (i Ocean WP je dosta kvalitetna i brza tema) no nema potrebe da oko toga razbijate glavu – Hello Elementor podržava sve nativne WooCommerce funkcije, a dobro radi i sa svim pluginovima koje će nam kasnije trebati. Odabranu temu implementirate unutar nativnog WordPress admin sučelja, a WordPress.org stranica ima i sijaset drugih službenih edukativnih videa oko upravljanja WP stranicom i njenim proširenjima tzv. pluginovima.

4. Nadogradnja instalacije s pluginovima

Kada samo već kod pluginova, njih nećemo detaljno obrađivati u ovom članku jer je Google prepun informacija i savjeta o njima. Također, odabir pluginova ovisi o vašim specifičnim potrebama no ipak, spomenimo tri stvari:

1. Nemojte koristiti page buildere poput Divija ili već spomenutog Elementora. Već i defaultni WP i njegov nativni Gutenberg editor će osigurati da imate podosta veliku kontrolu nad sadržajem, a s korištenjem Gutenberga ćete osigurati dugoročnost, nadogradivost i održivost cijelog WP sustava. Još važnije – smanjit ćete bloat i ubrzati učitavanje stranice ako koristite samo Gutenberg. (Preporučena tema Hello Elementor, naravno, forsira Elementor Page Builder pa njega ostavite unutar instalacije. No ne brinite… I s tim pluginom je tema još uvijek najbrža po Kinstinom mjerenju. – editirano 28.1.)
2. Za SEO funkcije odaberite Rank Math. On će vam osigurati kvalitetno punjenje svih potrebnih meta polja, dobar rad automatiziranog sitemapa te kontrolu nad svim 301 redirekcijama (uz 404 monitoring) tako da doista ne morate tražiti više od SEO alata. Yoast SEO je također popularan plugin, no on nema toliko jaku podršku za WooCommerce meta polja kao Rank Math, a i generiranje sitemapa je rudimentarnije od Rank Matha. U WP zajednici vlada mišljenje da Yoast SEO usporava učitavanje stranice, no nisam naišao na kvalitetan neovisan izvor koji bi to legitimno mjerio.
3. Dodatni izbor pluginova za koje smatram da su kvalitetno napravljeni (i da bi vam mogli koristiti su):

• Search WP za omogućavanje naprednih pretraga.
• Facet WP za omogućavanje naprednih opcija filtriranja i sortiranja proizvoda.
• ACF Pro za kreiranje custom polja koje možete vezati uz sadržaj, na primjer, ako uz blog post želite dodati lokaciju i mapu (za implementaciju će te trebati developera).
• Gravity Forms za izradu i obradu bilo kakvih interaktivnih kontakt formi ili kompleksnih formulara.
• WP All Import za unos i izvoz sadržaja te automatiziranu obradu “importa”. Ovaj plugin je krucijalan suborac ako morate uvesti velike količine proizvoda i cijena iz nekog vanjskog sustava poput CRM-a, ERP-a … čak nudi i opciju sinkronizacije putem Zapiera.

I za sam kraj ću ponoviti TL;DR

(1) Zakupite domenu i DNS zonu na AWS-u, nakon toga (2) Kinsta hosting i na njega implementirajte WordPress i WooCommerce (Kinsta će ponuditi te opcije pri uzimanju paketa ili vam njihova podrška to može napraviti). Kada uđete u WP admin instalirajte (3) Hello Elementor WP temu, a nakon toga instalirajte Rank Math SEO plugin (4). Ako sam vas izgubio na sredini članka ili ako vam se ne da “igrati” sa svim ovim postavkama, ne brinite. Upravo zato postoje digitalne agencije koji cijeli ovaj posao (i više od toga) rade za vas. Suradnju s njima ćemo obraditi u četvrtom i zadnjem članku iz serijala.

Ostali članci iz serijala

1. dio – Kako otvoriti webshop? Važan korak je odabir platforme – što nudi WooCommerce? 
2. dio – Potpuni plan za sav sadržaj koji uspješan webshop mora imati!
3. dio – Kako samostalno postaviti WooCommerce hosting, domenu i temu (bez tuđe pomoći!) (ovaj članak)
4. dio – Kako odabrati eCommerce agenciju