Kako brzina weba utječe na korisnike i SEO?

Brzina web stranice nije samo tehnička tema.

Ona direktno utječe na to kako korisnik doživljava web, koliko dugo ostaje, hoće li kliknuti dalje i hoće li na kraju napraviti ono što želite.

Spor web može imati posljedice na:

• korisničko iskustvo
• broj upita
• prodaju
• mobilne korisnike
• SEO
• percepciju kvalitete brenda

Problem je što se brzina često promatra samo kroz jedan broj iz PageSpeed Insightsa.

U stvarnosti je važnije pitanje:

Koliko brzo korisnik dobiva koristan sadržaj i može normalno koristiti stranicu?

Korisnik ne želi čekati

Kada netko klikne rezultat na Googleu, očekuje da se stranica pojavi brzo.

Ako vidi:

• prazan ekran
• loader
• hero koji se pojavljuje tek nakon nekoliko sekundi
• layout koji skače
• gumb koji još ne reagira

iskustvo odmah počinje loše.

Korisnik ne razmišlja:

Ova stranica ima problem s JavaScript bundleom.

On samo osjeća da je web spor.

Brzina utječe na prvi dojam

Prvi dojam o webu ne nastaje tek kada korisnik pročita sadržaj.

Počinje tijekom učitavanja.

Brz web često djeluje:

• profesionalnije
• modernije
• pouzdanije

Spor web može djelovati:

• zastarjelo
• loše održavano
• tehnički nepouzdano

To je posebno važno ako prodajete digitalne ili tehničke usluge.

Ako web agencije sam po sebi radi loše, korisnik može opravdano početi sumnjati u kvalitetu usluge.

Brzina i konverzije

Svaka dodatna prepreka između korisnika i cilja može smanjiti broj konverzija.

Ako korisnik mora čekati prije nego što:

• vidi cijenu
• otvori proizvod
• pošalje formu
• učita checkout
• otvori sljedeću stranicu

dio korisnika će odustati.

Problem je posebno izražen kod web trgovina.

Kupac možda već želi proizvod, ali spor checkout ili neodazivna košarica mogu ga zaustaviti tik prije kupnje.

Kod uslužnog weba isto vrijedi za kontakt formu i stranice usluga.

Mobile je osjetljiviji

Na desktop računalu i brzoj Wi-Fi vezi teško je realno procijeniti iskustvo svih korisnika.

Netko drugi može koristiti:

• slabiji telefon
• sporiju mobilnu mrežu
• stariji uređaj
• nestabilnu vezu

Web koji na vašem računalu djeluje brz može na mobitelu biti potpuno drugačiji.

Zato brzinu treba promatrati i kroz mobilno iskustvo.

Više o dizajnu za male ekrane možete pročitati u članku što je mobile-first dizajn.

Brzina i SEO

Brzina i korisničko iskustvo dio su šire tehničke kvalitete web stranice.

Google koristi niz signala pri procjeni stranica, među kojima su i signali povezani s iskustvom korisnika.

To ne znači da će stranica automatski biti prva na Googleu samo zato što je vrlo brza.

Kvalitetan sadržaj, relevantnost i autoritet i dalje su ključni.

Ali ako dvije stranice nude sličnu vrijednost, loše tehničko iskustvo definitivno nije prednost.

Brzina treba biti dio ukupnog SEO pristupa, ne izolirana metrika.

Core Web Vitals

Jedan od najpoznatijih načina mjerenja korisničkog iskustva su Core Web Vitals.

Oni pokušavaju mjeriti nekoliko praktičnih aspekata stranice:

• koliko brzo se prikazuje glavni sadržaj
• koliko brzo stranica reagira na interakciju
• koliko je layout stabilan tijekom učitavanja

To su korisne metrike jer pokušavaju približiti tehničke podatke stvarnom korisničkom iskustvu.

Ali ni njih ne treba promatrati izolirano.

Ako web ima dobre rezultate, ali korisniku je navigacija loša i sadržaj nejasan, stranica nije automatski kvalitetna.

LCP

Largest Contentful Paint, odnosno LCP, odnosi se na vrijeme potrebno da se prikaže glavni veliki sadržaj u početnom prikazu.

To često može biti:

• hero slika
• veliki naslov
• glavni blok sadržaja

Problem može nastati ako je hero fotografija ogromna ili se učitava na loš način.

Korisnik tada vidi velik prazan prostor dok čeka ključni element stranice.

INP

Interaction to Next Paint, odnosno INP, odnosi se na odziv stranice nakon korisničke interakcije.

Primjerice, korisnik klikne:

• gumb
• menu
• tab
• filter

i očekuje brzu reakciju.

Ako se ništa ne događa nekoliko stotina milisekundi ili dulje, web počinje djelovati tromo.

To je posebno problematično na stranicama s puno JavaScripta.

CLS

Cumulative Layout Shift, odnosno CLS, mjeri koliko se sadržaj neočekivano pomiče tijekom učitavanja.

Tipičan primjer:

Korisnik želi kliknuti gumb.

U tom trenutku se iznad njega učita velika slika.

Gumb se pomakne.

Korisnik klikne nešto drugo.

Takvo iskustvo vrlo brzo frustrira.

Česti uzroci su slike bez definiranih dimenzija, oglasi, fontovi i elementi koji se kasno ubacuju u layout.

PageSpeed nije cijela priča

PageSpeed Insights je koristan alat.

Ali jedan rezultat od 100 nije cilj sam po sebi.

Web može imati:

100/100

i svejedno biti loš ako:

• sadržaj nije jasan
• forma ne radi
• navigacija je loša
• korisnik ne može pronaći cijenu

S druge strane, web s rezultatom 92 nije automatski problem samo zato što nema 100.

Treba gledati stvarno korisničko iskustvo i najveće probleme.

Lab i field podaci

Kod alata za performanse često postoje dvije vrste podataka.

Lab podaci

Test se izvršava u kontroliranim uvjetima.

Dobri su za:

• pronalaženje problema
• usporedbu promjena
• tehničko testiranje

Field podaci

Prikazuju iskustvo stvarnih korisnika.

Mogu biti puno vrijedniji jer uključuju:

• različite uređaje
• različite mreže
• stvarne uvjete korištenja

Idealno je gledati obje vrste podataka.

Velike slike

Slike su jedan od najčešćih razloga sporog weba.

Problem nastaje kada se na web učita fotografija:

4000 × 3000 px

a prikazuje se u elementu širine 600 px.

Korisnik preuzima puno veći file nego što treba.

Rješenje uključuje:

• odgovarajuće dimenzije
• kompresiju
• moderne formate
• responsive slike
• lazy loading gdje ima smisla

Ne treba svaku sliku komprimirati do točke gdje izgleda loše.

Cilj je pronaći dobar balans između kvalitete i veličine filea.

Hero fotografije

Hero slike zaslužuju posebnu pažnju jer se često učitavaju odmah.

Ako je hero fotografija:

• ogromna
• nepotrebno visoke rezolucije
• pogrešnog formata

može značajno usporiti prikaz prvog ekrana.

Za razliku od slika niže na stranici, hero često nije kandidat za klasični lazy loading jer ga korisnik treba vidjeti odmah.

Zato ga treba pravilno optimizirati.

Previše JavaScripta

Moderni webovi mogu vrlo brzo nakupiti veliku količinu JavaScripta.

Izvori mogu biti:

• framework
• animacije
• analytics
• chat
• cookie alati
• popupovi
• third-party widgeti
• forme

Problem nije samo download.

Browser taj kod mora i obraditi.

Na slabijem uređaju to može dovesti do sporijih interakcija čak i kada se stranica vizualno već pojavila.

Third-party skripte

Svaki vanjski servis može dodati dodatni trošak.

Primjeri:

• chat widget
• tracking
• heatmap
• social widget
• video embed
• advertising script

Pojedinačno možda nisu veliki problem.

Ali kada ih se nakupi deset, performanse mogu značajno pasti.

Dobro pitanje prije dodavanja novog servisa je:

Koliku stvarnu vrijednost dobivamo za njegovu cijenu u performansama?

Previše pluginova

Kod WordPressa broj pluginova sam po sebi nije jedini problem.

Jedan loše napravljen plugin može biti problematičniji od deset kvalitetnih.

Ali veliki broj dodataka povećava mogućnost za:

• dodatne skripte
• dodatne upite
• konflikte
• sigurnosne probleme
• sporije održavanje

Plugin treba imati jasnu svrhu.

Ne treba instalirati novi dodatak za svaku sitnu funkcionalnost.

Page builderi

Page builder može značajno ubrzati razvoj i omogućiti lakše uređivanje sadržaja.

Ali može proizvesti i više HTML-a, CSS-a i JavaScripta nego što bi bilo potrebno kod jednostavnijeg custom rješenja.

To ne znači da builder automatski čini web sporim.

Kvalitetno postavljen builder web može biti brz.

Problem nastaje kada se:

• koristi previše dodataka
• svaka sekcija sastoji od velikog broja wrappera
• uključuju sve moguće funkcionalnosti
• ne optimizira output

Alat treba koristiti promišljeno.

Fontovi

Custom fontovi također utječu na performanse.

Problem može nastati ako web učitava:

• mnogo različitih font familyja
• velik broj weightova
• italic verzije koje se gotovo ne koriste

Primjerice, nije nužno učitati:

300, 400, 500, 600, 700, 800 i 900

ako dizajn koristi samo 400, 600 i 700.

Manje potrebnih fileova znači jednostavnije učitavanje.

Hosting

Hosting ima velik utjecaj na brzinu.

Ako server sporo odgovara, optimizacija slika neće riješiti cijeli problem.

Kod hostinga treba gledati:

• resurse
• lokaciju servera
• cache
• PHP verziju
• bazu
• CDN opcije
• pouzdanost

Najjeftiniji hosting nije automatski najjeftinije rješenje ako zbog njega web konstantno radi loše.

Cache

Cache omogućuje da se određeni sadržaj ne mora svaki put ponovno generirati.

Kod WordPressa može značajno poboljšati brzinu.

Ali cache nije magično rješenje.

Ako je web temeljno pretežak zbog:

• ogromnih slika
• velikog JavaScripta
• loših pluginova

cache može pomoći, ali neće ukloniti uzrok.

Najbolja optimizacija često kombinira više pristupa.

CDN

Content Delivery Network može korisniku poslužiti određene resurse s lokacije bliže njemu.

To može pomoći posebno kod:

• međunarodnih webova
• velikog broja statičkih resursa
• većeg prometa

Za mali lokalni web CDN nije uvijek presudan.

Ali može biti koristan dio cijelog sustava.

Baza podataka

Kod dinamičkih webova baza također može postati izvor usporenja.

Posebno ako:

• ima puno nepotrebnih podataka
• pluginovi rade velik broj upita
• tablice nisu dobro optimizirane
• postoji velik broj autoloaded opcija

Kod WordPressa problemi se često gomilaju tijekom godina instaliranja i uklanjanja dodataka.

Zato održavanje nije samo update pluginova.

Animacije

Animacije mogu biti vrlo lijepe.

Ali ako svaka sekcija ima kompleksan scroll efekt, web može postati trom.

Posebno na mobitelu.

Dobra animacija treba:

• imati svrhu
• biti kratka
• ne blokirati sadržaj
• ne uzrokovati trzanje

Ako korisnik mora čekati završetak animacije prije nego što vidi informaciju, efekt više ne pomaže.

Video

Veliki hero video može imati velik utjecaj na performanse.

Prije korištenja treba pitati:

• je li video stvarno potreban
• može li biti kraći
• može li se drugačije komprimirati
• treba li se učitavati na mobitelu
• postoji li dobar poster image

Ponekad fotografija daje gotovo isti vizualni efekt uz puno manji trošak.

Lazy loading

Lazy loading znači da određeni sadržaj učitavamo tek kada se približi viewportu.

To je vrlo korisno za slike niže na stranici.

Primjerice, nema potrebe odmah učitati 20 fotografija projekta koje se nalaze nekoliko ekrana ispod prvog prikaza.

Ali lazy loading nije dobar za svaki element.

Glavni hero sadržaj uglavnom treba biti dostupan odmah.

Preload

Za određene ključne resurse ponekad ima smisla koristiti preload.

Primjerice:

• važan font
• hero slika

Ali ni preload ne treba koristiti za sve.

Ako sve označimo kao prioritet, ništa zapravo nije prioritet.

Responsive slike

Desktop i mobitel ne moraju preuzeti istu fotografiju iste veličine.

Responsive slike omogućuju browseru da odabere prikladniju verziju.

To posebno pomaže kod velikih vizuala.

Mobilni korisnik ne mora preuzimati fotografiju prilagođenu monitoru širine 2.000 piksela.

CSS

Velike količine CSS-a također mogu usporiti početni prikaz.

Problemi se često pojavljuju kod:

• velikih frameworka
• buildera
• pluginova
• starih stilova koji se više ne koriste

Kod kompleksnijih projekata može imati smisla analizirati što se stvarno učitava na svakoj stranici.

DOM veličina

Vrlo kompleksan HTML DOM može utjecati na performanse.

To se često događa kada jednostavna sekcija ima puno nepotrebnih wrapper elemenata.

Vizualno stranica izgleda jednostavno, ali browser obrađuje vrlo složenu strukturu.

To je još jedan razlog zašto performanse treba razmatrati tijekom razvoja, a ne tek nakon završetka.

Web trgovine

Kod web trgovina performanse su često kompleksnije.

Stranice mogu uključivati:

• proizvode
• filtere
• košaricu
• korisnički račun
• checkout
• dinamičke cijene
• preporuke

Posebno treba paziti na:

• kategorije
• pretraživanje
• filtere
• checkout

Spor hero na naslovnoj je problem.

Spor gumb “Dodaj u košaricu” može biti još veći poslovni problem.

Administracija također može biti spora

Kod WordPressa performanse nisu važne samo na frontendu.

Ako je administracija vrlo spora:

• objavljivanje sadržaja traje duže
• uređivanje proizvoda postaje frustrirajuće
• održavanje zahtijeva više vremena

To može biti znak problema s:

• pluginovima
• bazom
• hostingom

Kvaliteta sustava uključuje i iskustvo ljudi koji ga održavaju.

Kako testirati brzinu?

Možete koristiti kombinaciju alata i stvarnog testiranja.

Primjerice:

• PageSpeed Insights
• Lighthouse
• browser DevTools
• stvarni mobitel
• različite mrežne uvjete

Ne oslanjajte se samo na jedan test.

Jedno mjerenje može varirati.

Važniji je obrazac koji se ponavlja.

Testirajte ključne stranice

Nema smisla testirati samo naslovnu.

Provjerite:

• glavne usluge
• blog članke
• kontakt
• kategorije
• proizvode
• checkout

Različiti templateovi mogu imati potpuno različite probleme.

Primjerice, naslovna može biti brza, dok product page učitava deset dodatnih skripti.

Testirajte mobile

Mobilni rezultat je posebno važan jer često simulira slabiji uređaj i mrežu.

Desktop rezultat može izgledati odlično dok mobile otkriva:

• prevelike resurse
• puno JavaScripta
• spore interakcije

Ako vaši korisnici značajno koriste mobitel, mobilno testiranje ne smije biti sekundarno.

Nemojte optimizirati slijepo

Ako alat kaže:

Remove unused JavaScript

ne znači da treba odmah obrisati svaku skriptu.

Prvo treba razumjeti:

• odakle dolazi
• čemu služi
• hoće li uklanjanje nešto pokvariti
• postoji li bolji način učitavanja

Performanse se optimiziraju uz razumijevanje funkcionalnosti.

Ne samo prema listi upozorenja.

Prioritet najvećim problemima

Ako je stranica teška 8 MB zbog hero videa, nema puno smisla prvo optimizirati ikonu od 4 KB.

Fokusirajte se na najveće izvore problema.

Često su to:

1. slike
2. video
3. JavaScript
4. third-party skripte
5. hosting

Tek nakon toga sitnije optimizacije.

Ne žrtvujte funkcionalnost

Web može postati iznimno brz ako uklonimo:

• sve slike
• fontove
• animacije
• forme
• analitiku

Ali tada možda više ne služi poslovnoj svrsi.

Cilj nije najlakši mogući web.

Cilj je najbrži web koji i dalje kvalitetno radi ono što treba.

Ne žrtvujte dizajn bez razloga

Isto vrijedi za vizualnu kvalitetu.

Nema potrebe svaki web pretvoriti u crni tekst na bijeloj pozadini kako bismo dobili maksimalni rezultat.

Dobar dizajn i dobre performanse mogu postojati zajedno.

Potrebno je samo svaku komponentu koristiti s razlogom.

Brzina i povjerenje

Brzina utječe i na percepciju pouzdanosti.

Web koji odmah reagira na korisnika djeluje stabilnije.

To je jedan od tehničkih elemenata koji pomaže izgraditi povjerenje na webu.

Korisnik možda neće znati zašto mu jedna stranica djeluje kvalitetnije od druge.

Ali brzina je dio tog dojma.

Brzina i UX

Performanse i UX nisu odvojene teme.

Ako je CTA tehnički na savršenom mjestu, ali reagira dvije sekunde nakon klika, iskustvo je loše.

Ako kontakt forma izgleda odlično, ali submit traje dugo bez ikakvog feedbacka, korisnik može kliknuti više puta ili odustati.

Dobar UX zahtijeva responzivno sučelje.

Ako vas zanimaju drugi česti problemi, pročitajte najčešće UX greške na web stranicama.

Brzina i sadržaj

Nemojte zaboraviti da je najbolja optimizacija ponekad uklanjanje nepotrebnog elementa.

Ako sekcija ne daje stvarnu vrijednost, možda je ne treba optimizirati.

Možda je treba ukloniti.

Primjer:

velika animacija s deset slika koja korisniku ne daje novu informaciju.

Uklanjanjem dobivate:

• brži web
• manje vizualnog šuma
• jednostavnije održavanje

Performanse i sadržaj ponekad imaju isti cilj: ukloniti ono što nije potrebno.

Kada optimizirati?

Idealno:

tijekom razvoja.

Ne:

nakon što je cijeli web gotov.

Ako se od početka vodi računa o:

• slikama
• fontovima
• JavaScriptu
• strukturi komponenti
• third-party servisima

na kraju treba puno manje popravljati.

Performanse trebaju biti dio procesa izrade web stranice.

Nakon objave

Performanse treba povremeno ponovno provjeriti.

Web se s vremenom mijenja.

Dodaju se:

• novi pluginovi
• tracking alati
• fotografije
• članci
• novi fontovi
• widgeti

Stranica koja je bila brza na dan objave može nakon dvije godine izgledati potpuno drugačije.

Zato je performanse korisno uključiti i u redovno održavanje.

Koliko web mora biti brz?

Ne postoji jedan univerzalan broj koji određuje je li web dobar.

Važnije je da:

• ključni sadržaj brzo postane vidljiv
• korisnik može brzo reagirati
• layout ostane stabilan
• iskustvo bude dobro na stvarnim uređajima

Metrike poput Core Web Vitals daju dobar okvir.

Ali uvijek ih treba povezati sa stvarnom poslovnom stranicom.

Brzina nije bonus

Brzina weba nije luksuzna optimizacija koju treba napraviti samo ako ostane vremena.

Ona je dio osnovne kvalitete stranice.

Dobar poslovni web treba biti:

• jasan
• jednostavan
• brz
• stabilan
• upotrebljiv

Ako korisnik mora čekati da bi došao do sadržaja, sva ostala optimizacija ima manju vrijednost.

Ako želite širu sliku o kvaliteti poslovne stranice, pročitajte što čini dobar poslovni web.

Ako planirate novi web, pogledajte naše pakete i cijene izrade web stranica.