Preskoči na sadržaj

Web stranica po mjeri: šta je važno za brzinu i SEO

Šta su Core Web Vitals (LCP, INP, CLS), kakve veze imaju sa Google pretragom i šta najviše utiče na brzinu web stranice.

Vibika

4 minuta čitanja

Ilustracija brzine web stranice: prozor preglednika u slojevima, rastući stubići i brzinomjerIlustracija brzine web stranice: prozor preglednika u slojevima, rastući stubići i brzinomjer

Web stranica je za mnoge firme prvi kontakt sa budućim klijentom. Ako se sporo učitava, ako se sadržaj pomjera dok korisnik pokušava da klikne ili ako dugme reaguje sa zakašnjenjem, posjetilac vrlo lako odustane i vrati se na rezultate pretrage. Google zato već godinama mjeri upravo ovakva iskustva i o njima otvoreno piše u svojoj dokumentaciji.

Šta su Core Web Vitals

Core Web Vitals su tri metrike koje opisuju stvarno korisničko iskustvo na stranici. Prema web.dev dokumentaciji, dobre vrijednosti su:

Metrika Šta mjeri Dobra vrijednost
LCP (Largest Contentful Paint) koliko brzo se prikaže najveći vidljivi sadržaj, npr. glavna slika ili naslov do 2,5 sekunde
INP (Interaction to Next Paint) koliko brzo stranica reaguje na klik, dodir ili unos do 200 milisekundi
CLS (Cumulative Layout Shift) koliko se sadržaj neočekivano pomjera tokom učitavanja do 0,1

Važno je kako se ove vrijednosti procjenjuju: Google preporučuje da se gleda 75. percentil posjeta, posebno za mobilne i desktop uređaje. To znači da nije dovoljno da stranica bude brza na računaru programera sa brzim internetom, nego da bude dobra za veliku većinu stvarnih posjetilaca.

INP je u martu 2024. zamijenio raniju metriku FID, jer bolje opisuje odziv stranice tokom cijele posjete, a ne samo pri prvoj interakciji.

Dijagram Core Web Vitals granica: LCP dobar do 2,5 s, a loš preko 4 s; INP dobar do 200 ms, a loš preko 500 ms; CLS dobar do 0,1, a loš preko 0,25; mjeri se 75. percentil posjetaDijagram Core Web Vitals granica: LCP dobar do 2,5 s, a loš preko 4 s; INP dobar do 200 ms, a loš preko 500 ms; CLS dobar do 0,1, a loš preko 0,25; mjeri se 75. percentil posjeta
Granice za Core Web Vitals prema web.dev. Stranica je „dobra“ kada je u zelenoj zoni za 75 % posjeta.

Kakve veze to ima sa SEO

Google u dokumentaciji za Search navodi da Core Web Vitals odgovaraju onome što njegovi osnovni sistemi rangiranja nastoje da nagrade, i preporučuje dobre vrijednosti i zbog uspjeha u pretrazi i zbog korisničkog iskustva uopšte. Istovremeno, Google navodi da pretraga uvijek nastoji da prikaže najrelevantniji sadržaj, čak i kada korisničko iskustvo na stranici nije najbolje, ali da kod pretraga gdje postoji mnogo korisnog sadržaja dobro iskustvo može doprinijeti uspjehu. Drugim riječima, brzina ne može nadoknaditi loš sadržaj, ali može napraviti razliku između sličnih stranica.

Tu je i mobile-first indeksiranje: Google za indeksiranje i rangiranje koristi mobilnu verziju sadržaja stranice. Ako je stranica na telefonu spora, nepregledna ili ima manje sadržaja nego na desktopu, to se odražava i na pretragu.

Zašto je izrada po mjeri prednost

Kod stranica sklopljenih iz gotovih šablona i velikog broja dodataka čest problem je kod koji se učitava „za svaki slučaj“: skripte, stilovi i fontovi koje stranica uopšte ne koristi. Kada se stranica pravi po mjeri, može se od početka planirati šta se učitava, kojim redom i u kom obliku. To ne garantuje dobre rezultate samo po sebi, ali daje punu kontrolu nad faktorima koji na njih utiču.

Šta najviše utiče na brzinu

Slike

Slike su vrlo često najveći element na stranici, pa direktno utiču na LCP. Dobra praksa je:

  • koristiti savremene formate (npr. WebP ili AVIF) i dimenzije prilagođene prikazu;
  • učitavati više veličina iste slike za različite ekrane;
  • glavnu sliku na vrhu stranice ne učitavati „lijeno“ (lazy loading), a slike niže na stranici da.

Fontovi i skripte

  • ograničiti broj fontova i varijanti;
  • izbjegavati skripte koje blokiraju prikaz stranice;
  • pažljivo birati alate trećih strana (chat, analitika, mape), jer svaki od njih dodaje težinu i može pogoršati INP.

Stabilan raspored (CLS)

  • slikama, video snimcima i reklamnim blokovima unaprijed rezervisati prostor;
  • ne ubacivati sadržaj iznad onoga što korisnik već čita (npr. banere koji se pojave naknadno).

Server i keširanje

  • brz odziv servera i keširanje statičkih fajlova;
  • kompresija sadržaja i isporuka preko HTTPS-a;
  • redovno održavanje i praćenje dostupnosti.

Tehnički SEO osnove

Pored brzine, pretraživačima je važno da stranicu mogu lako da razumiju:

  • jasna struktura naslova (jedan H1, zatim H2 i H3);
  • jedinstveni naslovi stranica i meta opisi;
  • čitljivi URL-ovi i ispravni interni linkovi;
  • sitemap i ispravna podešavanja za indeksiranje;
  • alternativni tekst na slikama, što pomaže i pristupačnosti.

Kako izmjeriti stanje

Nije potrebno pogađati. Google nudi besplatne alate:

  • PageSpeed Insights prikazuje i laboratorijska mjerenja i podatke stvarnih korisnika, kada ih ima dovoljno;
  • Search Console ima izvještaj o Core Web Vitals za cijeli sajt, grupisan po tipu problema;
  • alati za programere u pregledaču (Lighthouse) pomažu da se pronađe konkretan uzrok.

Kontrolna lista

  • LCP, INP i CLS su u „dobrom“ opsegu za mobilne i desktop posjete.
  • Slike su optimizovane i prilagođene veličini ekrana.
  • Nema nepotrebnih skripti i dodataka trećih strana.
  • Sadržaj se ne pomjera tokom učitavanja.
  • Mobilna verzija ima isti važan sadržaj kao desktop.
  • Svaka stranica ima jedinstven naslov i meta opis.
  • Sajt je prijavljen u Search Console i stanje se povremeno provjerava.

Kako vam možemo pomoći

Web stranice radimo po mjeri, sa pažnjom na brzinu, mobilni prikaz i tehnički SEO. Više o tome pročitajte na stranici Izrada web stranica, a za procjenu vašeg projekta pošaljite nam upit.

Izvori

  1. web.dev: Web Vitals
  2. web.dev: Interaction to Next Paint becomes a Core Web Vital on March 12
  3. Google Search Central: Understanding Core Web Vitals and Google search results
  4. Google Search Central: Understanding page experience
  5. Google Search Central: Mobile-first indexing best practices
  6. PageSpeed Insights

Trebate pomoć sa ovom temom?

Pošaljite upit i javićemo vam se sa prijedlogom.