Brzina web stranice i Core Web Vitals: kako provjeriti i popraviti

Spora stranica ne gubi samo strpljenje posjetilaca. Na telefonu se slika koja kasni, dugme koje ne reaguje ili tekst koji skoči baš kad pokušate kliknuti, doživljavaju kao nepouzdana firma. Dobra vijest je da se većina problema može izmjeriti i popraviti ciljano. Ovaj vodič pokazuje kako provjeriti stranicu, kako čitati rezultate i šta obično donosi najviše poboljšanja.

Šta su Core Web Vitals i koje su dobre vrijednosti?

Core Web Vitals su Googleov skup mjerenja korisničkog iskustva. Nazivi su tehnički, ali svaki odgovara jednom pitanju koje biste postavili izvođaču:

Pragovi dolaze iz web.dev dokumentacije (Web Vitals i Core Web Vitals thresholds), a ocjenjuje se 75. percentil: stranica prolazi ako je tri četvrtine posjeta barem tako dobro. Vrijednosti shvatite kao referencu, a ne obećanje za svaku posjetu. Od izvođača tražite izvor mjerenja i kategoriju uređaja (mobilni ili računar).

Kako provjeriti brzinu stranice korak po korak?

1. Odaberite reprezentativne stranice. Naslovnica, stranica usluge ili proizvoda, blog članak i kontakt stranica sa formom imaju različite probleme. Zamislite arhitektonski studio s velikim projektnim fotografijama: provjerite stranicu projekta, a ne samo naslovnicu.
2. Otvorite PageSpeed Insights (pagespeed.web.dev), unesite adresu i pogledajte mobilni rezultat prvo.
3. Pročitajte dva dijela rezultata. Gornji dio prikazuje podatke stvarnih korisnika (ako ih ima), donji laboratorijski test koji pokreće Lighthouse.
4. Zabilježite nalaze u tabelu: adresa, datum, uređaj, LCP, INP, CLS, uočen problem i odgovorna osoba.
5. Provjerite Search Console. Izvještaj Core Web Vitals grupiše stranice po statusu i pokazuje obrasce, na primjer sve stranice proizvoda sa istim problemom.
6. Ponovite poslije izmjene na istim stranicama i istim uređajima, da poređenje ima smisla.

Snimak bez konteksta kasnije je teško protumačiti, pa uz rezultat zabilježite i da li su tokom testa bili prisutni vanjski dodaci (chat, mape, video).

Kako čitati preporuke u izvještaju

Ispod ocjena PageSpeed Insights navodi preporuke i dijagnostiku, na primjer „Smanjite veličinu slika”, „Odgodite učitavanje slika izvan ekrana” ili „Smanjite neiskorišten JavaScript”. Ne pokušavajte popraviti sve. Svaku preporuku povežite s mjerom koju poboljšava i s pitanjem da li taj element uopšte treba stranici. Često je odgovor da se dodatak može ukloniti, a ne ubrzati.

Lighthouse u pregledniku

Isti Lighthouse test možete pokrenuti i lokalno u Chrome alatima za programere (kartica Lighthouse). Korisno je za stranice koje još nisu javne ili su iza prijave, ali rezultati zavise od vašeg računara i veze, pa ih ne poredite direktno s rezultatima iz PageSpeed Insights. Za praćenje trenda koristite uvijek isti alat i iste uslove.

Provjeru radite posebno za mobilni i računarski prikaz. Mobilni rezultat je obično slabiji, a Google za indeksiranje koristi mobilnu verziju stranice, pa mu dajte prednost.

Zašto se laboratorijski i stvarni podaci razlikuju?

PageSpeed Insights prikazuje laboratorijske podatke i podatke stvarnih korisnika (Google: About PageSpeed Insights). Laboratorijski test simulira jedan uređaj i mrežu, pa je koristan za dijagnostiku, ali ne opisuje sve vaše posjetioce. Podaci stvarnih korisnika dolaze iz posjeta u prethodnom periodu i bliži su istini, ali mogu nedostajati ako stranica nema dovoljno posjeta ili je nova.

Nedostatak podataka stvarnih korisnika nije dokaz da stranica prolazi, a ni da pada. Na novoj stranici koristite dijagnostiku i praktične provjere puta kupca, uz jasnu oznaku da terenskih podataka još nema, pa ih pratite nakon objave. Laboratorijsko mjerenje prije objave pokazuje posao koji treba uraditi, a posmatranje nakon objave odgovara na drugo pitanje: kako stranica radi kod stvarnih ljudi.

Šta najčešće usporava stranice i kako se popravlja?

Redoslijed je manje bitan od toga da popravite ono što mjerenje stvarno pokazuje. U praksi se ponavljaju isti uzroci:

Kod WordPress sajtova su najčešći krivci preveliki dodaci i nekomprimirane fotografije, pa je redovna briga o kešu, kompresiji slika i broju dodataka dio održavanja web stranica. Više o tome šta održavanje obuhvata pročitajte u članku održavanje WordPress stranice: šta uključuje.

Kako vizuelni izbori utiču na brzinu?

Video preko cijelog ekrana, niz velikih slika i statična naslovna fotografija donose različit obim pripreme i održavanja. Zato tražite poređenje na stvarnom primjeru sa stvarnim sadržajem, a ne na praznoj demonstraciji. Procijenite može li posjetilac razumjeti rad i doći do sljedećeg koraka dok prezentacija još radi.

Ako je neki efekat bitan za brend, dogovorite kako sačuvati njegovu svrhu a ipak ispuniti ciljeve brzine, na primjer pokretanjem videa tek po zahtjevu korisnika. Ako malo doprinosi odluci posjetioca, razmislite o jednostavnijoj varijanti. Isto vrijedi za ugrađene mape, chat i rezervacijske dodatke: za svaki zapišite svrhu, odgovornu osobu i stranicu na kojoj je potreban. Dodatak koji treba samo na kontakt stranici ne mora se učitavati svuda. Isto pravilo vrijedi za skripte praćenja i oglasne oznake: zadržite one koje zaista koristite i redovno brišite stare, jer svaka dodatna skripta troši vrijeme učitavanja i može pogoršati odziv stranice.

Kako spriječiti da urednici ponovo uspore stranicu?

Najbolje optimizovana stranica opet postane spora kad urednik postavi fotografiju od nekoliko megabajta. Zato dogovorite postupak za nove slike prije primopredaje:

• Koju veličinu i koji format dobija urednik za pripremu fotografije?
• Ko provjerava kvalitet prije objave, i tehnički i vizuelno?
• Pokažite cijeli postupak na stvarnom novom projektu: odabir, priprema, unos i provjera.
• Napišite uputu jezikom koji vaš tim razumije, ne žargonom.

Vizuelni pregled zadržite uz tehnički, da važni detalji ne nestanu zbog neprovjerene prečice. Za ovakve zadatke i sve što dolazi poslije objave, jasna uputa je jeftinija od naknadnog popravljanja. Dobar test je jednostavan: neka urednik koji nije učestvovao u izradi sam objavi jedan novi članak ili projekat, pa nakon toga ponovo izmjerite stranicu i uporedite s početnim stanjem.

Šta tražiti u ponudi za poboljšanje brzine?

Nemojte prihvatiti neodređeno obećanje da će „sve biti brzo”. U ponudi odvojite istraživanje, realizaciju i naknadni pregled, jer rad zavisi od platforme, vrste stranica, stanja materijala i integracija. Tražite listu prioriteta, uz navedeno koji zadatak klijenta svaka stavka poboljšava i kako ćete provjeriti ispravku.

• Popis stranica koje se mjere i izvor mjerenja.
• Početno stanje (LCP, INP, CLS) i ciljane vrijednosti.
• Prioritetna lista popravki s procjenom efekta.
• Evidencija promjena i mjerenja poslije popravki, uz preostala ograničenja i odgovorne osobe.

Kod nas je prosječan PageSpeed rezultat isporučenih stranica 98, ali vaš cilj je dobra stvarna upotreba, a ne jedan broj. Ako gradimo novu stranicu, brzina je dio projekta, a ne naknadna usluga; pogledajte izradu web stranica. Za vrijeme isporuke i faze rada pročitajte koliko traje izrada web stranice, a o vidljivosti lokalne firme na telefonu u članku lokalni SEO i Google poslovni profil.

Ko održava brzinu poslije primopredaje?

Brzina nije jednokratan posao. Svaka veća promjena može je pokvariti: novi galerijski raspored, rezervacijski dodatak, veći video ili promjena navigacije. Odredite koje promjene pokreću novu provjeru i sačuvajte početno stanje da poređenje ostane korisno. Programer i sadržajna ekipa imaju različite zadatke, pa jasno dodijelite tehničko istraživanje, pripremu slika i odobravanje novih integracija.

Rezultate pregledajte i s osobom koja odobrava sadržajne kompromise, ne samo s programerom. Nemojte unaprijed obećavati rast prodaje ili pozicija zbog promjene metrike: brzina je jedan od faktora korisničkog iskustva i vidljivosti, ali ne i jedini. Naš model održavanja uključuje keš, kompresiju slika i praćenje Core Web Vitals uz fiksnu mjesečnu naknadu i mjesečni izvještaj.