Page speed – ko o čemu, baba o uštipcima. 4 Page Buildera na testu performansi. Iznenadiće vas rezultati.

Dozvolite da vam postavimo nekoliko pitanja:

• Da li ste ikada merili performanse sajta koji ste uradili?
• Da li ste vi zadovoljni performansama sajtova koje ste uradili?
• Da li ste pokušali da na bilo koji način poboljšate  nezadovoljavajuće rezultate?
• Da li smatrate da o tome treba da vodi računa neko drugi, a ne vi?

Bilo da ste odgovorili sa DA ili NE ovaj članak je ipak za vas. Obaveštenje koje je Google objavio u julu 2018. godine na svojoj zvaničnoj web stranici ne treba prihvatiti olako i bez razmišljanja. To znači ozbiljnu promenu pravila za SEO i to tehničkog dela koji se itekako odnosi na vas.

Prenosimo deo te objave:

People want to be able to find answers to their questions as fast as possible — studies show that people really care about the speed of a page. Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today we’re announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.

Pročitajte ceo članak: Google webmasters

WordPress i Page Builderi – tu sve počinje

Sigurno ste pali u iskušenje da čitate gomile pregleda i tražite preporuke za temu koja ima sjajne performanse i brzo se učitava, ali ste brzo uvideli da je to ipak reklama. I mi smo to radili, ko nije?

Rešili smo da obrnemo logiku traganja za „amazing“ brzim temama i da prvo istražimo najvažniji sastojak (čitaj plugin) svih biznis tema, a to je Page Builder. Svaka biznis tema ima neki Page Builder na koji se oslanja za dizajn stranica (pogledaj članak – čemu služe i kako rade Page Builderi)
Zaključak je više nego jasan, ako neki Page Builder ima bolje performanse od drugog, opredeliću se za njega, a samim tim i za temu sa kojom on najbolje radi.

Koji su Page Builderi najpopularniji u 2019. godini

U ovom trenutku su najpopularniji i najprodavaniji (redosled nije bitan):

• Elementor
• Beaver Builder
• Divi Builder
• Thrive Architect
• SiteOrigin Page Builder
• WPBakery Page Builder
• Themify Builder
• Brizy

Za testiranje smo izabrali Page Buildere sa kojima imamo iskustva u radu, a verovatno su poznati i vama:

Divi Page Builder – PRO verzija

• Front-End Page Builder
• postoji samo u PRO verziji
• nezavisan je i radi sa svakom WordPress temom

WPBakery Page Builder – PRO verzija

• jedan od najstarijih Back-End Page Buildera (bivši Visual Composer). Integrisan je u preko 90% tema koje se kupuju na Themeforest-u (Envato) i tada je uračunat u cenu teme
• PRO verzija je ako se kupuje zasebno
• radi sa svakom WordPress temom

Elementor – Free i PRO verzija

• Front-End Page Builder, najmlađi i najslavniji
• postoji u besplatnoj, ali i u PRO verziji
• potpuno je nezavisan i radi sa svakom WordPress temom. U PRO verziji može da se koristi kao Website Builder, što znači da možete sami da kreirate header, footer, page, post i custom template

SiteOrigin – Free i PRO verzija

• Back-End Page Builder implementiran u preko 2 miliona WordPress tema koje su većinom besplatne
• postoji i u PRO verziji
• radi sa svakom WordPress temom

Kako Page Builderi utiču na performanse sajta?

Napravićemo jedan veoma jednostavan test koji je zamišljen ovako:

Svaki Page Builder će imati sopstvenu instalaciju WordPressa na standardnom (shared) hostingu. Ovaj tip hostinga je izabran iz prostog razloga jer je najveći broj WordPress sajtova instalirano baš na njima.  Sama brzina učitavanja nas trenutno ne interesuje i to nećemo uzimati u obzir.

Ono što nas  interesuje jesu 2 ključna faktora za preformanse sajta, a to su:

• količina podataka (Total Page Size) koji se downloaduje sa servera

• broj zahteva koji browser upućuju prema serveru (Requests)

Dakle, što je manja količina podataka i što manji broj zahteva, bolje su performanse. Naravno da su ova dva parametra samo n-ti deo ukupnih parametara koji se uzimaju u obzir prilikom testiranja performansi sajta, ali obratićemo pažnju na samo ova dva.

Testiranje će se vršiti na Gmetrix sajtu. Napravili smo besplatan nalog da bi se omogućile opcije koje nisu dostupne bez njega. Odabrali smo sledeće parametre:

1. Najbliži server prema test serveru je London
2. Browser je Chrome
3. Konekcija je LTE (kao 4G) – (ukratko: sporija od 4G, a brža od 3G konekcije, marketinška zavrzlama)

Da bi sve malo začinili i obojili rezultate, pogledaćemo impresije koje daje Google PageSpeed Insights.

A WordPress?

Ne smemo da zaboravimo njegove editore – uređivače teksta. Iako to nisu Page Builderi, interesuje nas koji editor ima bolje performanse: Classic ili Gutenberg?
Za tu svrhu instalirane su dve instance WordPressa, jedna sa verzijom 5.2.1 i jedna starija 4.9. sa klasičnim editorom.

Koji sadržaj se testira?

Najjednostavniji mogući. Instaliran je jedan Page Builder koji se testira i napravljena je jedna stranica u WordPressu. Na tu stranicu je postavljen jedan row, a u taj row je smešten widget za tekst na kome je postavljen h1 tag i natpis „I am…“ – ime Page Buildera.

Evo koji sadržaj treba Page Builder da prikaže:

Test WordPress Editora – Clasic ili Gutenberg

U WordPress editor je postavljen je samo h1 natpis i nije instaliran nijedan plugin, osim onih koji dolaze uz instalaciju WorPressa.

Classic – klasičan stari editor poznat kao TinyMCE editor. Ne postoji čovek na planeti koji ga ne poznaje. Sem onih koji nikada nisu u bili u WordPress-u. Postojao je od samog početka pa sve do kraja 2018. godine kada se prešlo na Gutenberg Block Editor.

Rezultati za TinyMCE editor su sledeći:

Rezultati za Gutenberg Block Editor:

Google PageSpeed Insights impresija – poređenje

Zaključak: bravo za Gutenberg, nekoliko godina rada na njemu se isplatilo. Dragi blogeri, Gutenberg editor je od sada pa nadalje alatka u kojoj ćete pisati i objavljivati vaše članke.
Klasični editor je zasluženo otišao u penziju.

Znači, testiranje nastavljamo u Gutenberg okruženju.

Test Divi Page Buildera

Rezultati su sledeći:

Google PageSpeed Insights impresija

Zaključak: Divi šta to bi? Zar 1.34MB i 20 zahteva za h1 naslov? Nije za verovati. Prilično razočaravajuće.
Divi korisnici bi trebalo da se zamisle nad ovim lošim preformansama.

Test WPBakery Page Buildera

Rezultati su sledeći:

PageSpeed Insights impresija

Zaključak: Dobro se držiš matori, bravo. Odličan rezultat u odnosu na Divi. Očekivalo se da ovaj Page Builder prikaže loše performanse, jer skoro svaka tema kupljena preko Themeforesta ima loše preformanse. Možda razlog tome nije do WPBakery Page Buildera? Možda razlog leži u loše napisanim temama?

Test Elementor Page Buildera

Rezultati su sledeći:

Google PageSpeed Insights impresija

Pa šta je ovo? 25 zahteva do servera? 768KB čega?… ostajem bez ijedne reči komentara.
Šta znače ovi rezultati? Da je WPBakery bolji?

Ovoga puta izostavljam zaključak, razočarenje je potpuno.

Test SiteOrigin Page Buildera

Rezultati su sledeći:

Google PageSpeed Insights impresija

Zaključak: ??? Iznenađenjima nikada kraja. Ovo su trebali da budu rezultati za Elementor, zar ne? Da nije neka greška. Ne, ipak nije, rezultati su ispravni.

Kako da posmatramo ove rezultate?

• Divi

• ako bi to bio vaš izbor onda razmislite o hostingu. Pogledajte koji hosting preporučuje WordPress. Svakako vam treba brz i ne baš jeftin hosting.
• razmislite i o plaćenom cache pluginu koji dobro radi sa Divi Page Builder-om (možda WP Rocket)
• plaćeni plugin za poboljšanje preformansi (Perfmatters)
• možda i Cloudflare bude od pomoći.
• razmislite i o tome koliko sve to košta na godišnjem nivou i da li je vaš izbor isplativ.

• WPBakery

• na Themeforest sajtu za $59 se nudi kompletno rešenje sajta. Kupite temu, a u njoj imate sve, od velikog broja šablona, plaćenih pluginova koji dobijate besplatno i uz sve to naravno WPBakery Page Builder
• međutim teme sa Themeforesta nisu bez razloga dobile nadimak „bloated“ – u njih je nagurano najviše onoga što je nepotrebno i što nikada nećete koristiti ni na jednom sajtu.
• performanse samih tema su izuzetno loše, a izgleda da je WPBakery u ovoj priči kolateralna šteta, kako se to pokazalo na našem testu.
• Da li to znači da je ova solucija ipak za izbegavanje?

• Elementor

• potpuno razočaranje
• verovatno bi performanse izgledale mnogo bolje ako bi primenilo sve ono što se odnosi na Divi. A čemu onda služi ono „free“?

Nekoliko stvari koje nikako ne idu u prilog ovom Page Bulderu

Prijavljeno je mnogo žalbi na funkcionisanje kako free tako i premium pluginova koji su instalirani zajedno sa Elementorom. Neki jednostavno ne rade, a sa drugima je problem što nema načina da se kontroliše prikaz sadržaja koji plugin daje. Ozbiljne primedbe su ukazane nekompatibilnost sa Yoast-om. Možda Elementor bira društvo? Ako drugi plugin nije kompatibilan sa njim onda nikom ništa, džaba ste krečili. Iz kompanije Elementor tvrde da će se sve nekompatibilnosti rešavati.

Umesto zaključka

Back-End Page Builderi su mnogo bolji sa preformansama, ali rad sa njima može biti naporan, a ponekad i frustrirajući. Svako unošenje sadržaja ili  bilo kakva izmena traži pregled i vi se stalno krećete napred-nazad dok ne dođete do zadovoljavajućeg rešenja. I koliko puta tako? Neko je izmerio da takav način rada uzima 3-5 puta više vremena za izradu sajta nego rad sa Front-End Page Builderima.

Tehnologija „live“ uređivanja stranica koje nam pružaju Divi, Elementor i još neki drugi Front-End Page Builderi su najprirodniji način dizajniranja web stranice. Kao kada radite u nekom grafičkom softveru, rezultati se odmah vide. Međutim, to očigledno da ima svoju cenu – drastičan pad performansi samog sajta. Da bi se to nadoknadilo mora se posegnuti za skupljim serverima, plaćenim cache i performance pluginovima, vrlo ozbiljnoj optimizaciji slika… Znači ne važi više: gotov je sajt, ide live! Tek kada je sajt live nastaje borba za bolje performanse.

A taman kada ste pomislili „ma ko to gleda“, neće proći mnogo dana i zazvoniće vam telefon, a marketar (ili klijent) sa druge strane će vas upozoriti (ili će početi da viče) da se zbog loših performansi i sporog učitavanja sajta vidi drastičan pad pozicije na Google pretrazi i da je cena oglašavanja 20% viša nego inače… Drugim rečima zbog vaše nestručnosti je pala prodaja, klijent je u novčanom gubitku… Ko će to da nadoknadi? A krivac ste, naravno, vi.

I na kraju ipak savet

Ne vredi da kukate na taj prokleti Google, ipak on ne izmišlja pravila. Pravila kreiraju ljudi sa svojim navikama i ponašanjima, a on (Google) vešto koristi te navike i ponašanja i uzima ogromne količine novca gurajući reklamu na pravom mestu i pravom trenutku za kupovinu. E, upravo tu, na tom mestu i u tom trenutku želi da bude vaš klijent. Ako mu to tehnički onemogućite, vi ste krivac. Imajte to na umu kada je Google u pitanju.

Ova testiranja smo uradili da se i vi, a i mi, lakše opredelimo za radno okruženje. Da upozorimo klijenta na sve moguće posledice ali i cene korišćenja modernih tehnologija.
Uradite i vi testove. Uverite se u rezultate ili pronađite drugi pristup u testiranju. Drugim rečima, budite stručni i iznad proseka u poslu koji radite. Uloženo vreme i trud će se isplatiti, jer ćete u ovom poslu biti stručniji i vaš ugled i kredibilitet će svakako biti primećeni, a benefite od toga nije potrebno nabrajati.

Priča se ovde ne završava, nastavak sledi.