Kako čitati Lighthouse izveštaj bez panike

Prvo pravilo: vaša ocena nije vaš sajt

Kada prvi put otvorite Lighthouse izveštaj, dočeka vas zid brojeva, obojenih polja i upozorenja o stvarima za koje nikada niste čuli. Prirodna reakcija je panika. Ocena je crvena. Sedamnaest provera nije prošlo. Sajt je sigurno pokvaren?

Verovatno nije. Lighthouse je dijagnostički alat, ne đačka knjižica. Ocena je sintetički benchmark pokrenut u laboratorijskim uslovima — često na usporenoj vezi, uz simulaciju telefona srednje klase iz 2017. godine. Ona vam govori kako se sajt ponaša u tom konkretnom scenariju, a ne kako ga stvarni korisnici doživljavaju u praksi.

To je važno zato što se većina timova fiksira na ocenu i promaši kontekst. Ocena 65 može biti sasvim u redu za složenu web aplikaciju sa podacima u realnom vremenu. Ocena 95 i dalje može da pruži loše iskustvo ako su optimizovane pogrešne stvari. Ocena je polazna tačka za istraživanje, ne metrika uspeha.

Šta prvo čitati: Core Web Vitals

Preskočite ukupnu ocenu performansi. Skrolujte do odeljka Metrics i pogledajte tri broja: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) i Interaction to Next Paint (INP). To su Core Web Vitals, i to su jedine metrike performansi koje Google koristi kao signal za rangiranje.

• LCP meri koliko je vremena potrebno da se prikaže najveći vidljivi element. Cilj: manje od 2,5 sekunde. Ako ste preko 4 sekunde, korisnici predugo čekaju da vide smislen sadržaj.
• CLS meri vizuelnu stabilnost — koliko stranica „skače” dok se učitava. Cilj: manje od 0,1. Ako ste preko 0,25, korisnici slučajno klikću pogrešnu stvar jer su se dugmad pomerila.
• INP meri odzivnost — koliko brzo stranica reaguje na klikove, dodire i pritiske tastera. Cilj: manje od 200 ms. Ako ste preko 500 ms, sajt deluje tromo.

Ove tri metrike koreliraju sa stvarnom frustracijom korisnika. Popravite njih pre nego što brinete o bilo čemu drugom.

Opportunities naspram Diagnostics: znajte razliku

Lighthouse deli nalaze u dve kategorije: Opportunities i Diagnostics. Opportunities su rangirane prema procenjenoj uštedi vremena. Diagnostics pružaju dodatni kontekst — stvari koje mogu biti problemi, ali i ne moraju.

Počnite od Opportunities. Ako Lighthouse kaže da „Uklonite resurse koji blokiraju renderovanje” može da uštedi 1,2 sekunde, to je konkretan dobitak. Ako kaže da „Smanjite neiskorišćeni JavaScript” može da uštedi 0,1 sekundu, verovatno nije vredno refaktorisanja.

Diagnostics su nezgodnije. „Izbegavajte preveliku veličinu DOM-a” zvuči loše, ali ako vam je CLS dobar i INP brz, veliki DOM možda nikome ne šteti. Diagnostics su tragovi, ne naređenja. Istražite one koji se poklapaju sa vašim stvarnim metrikama.

Provere koje obično možete da ignorišete

Neka Lighthouse upozorenja su zaostala iz ranijih vremena ili previše agresivna. Ovo su ona koja najčešće izazivaju nepotrebnu paniku:

• „Ne koristi pasivne listenere za poboljšanje performansi skrolovanja” — Ovo je mikrooptimizacija koja retko pravi značajnu razliku. Ako nemate dokaz da je skrolovanje trzavo, preskočite je.
• „Elementi slika nemaju eksplicitno zadate width i height” — Ovo je važno za CLS, ali samo ako slike izazivaju pomeranja rasporeda. Ako vam je CLS već dobar, nemojte refaktorisati samo zbog provere.
• „Isporučujte slike u formatima sledeće generacije” — Da, WebP i AVIF su manji. Ali ako su vaše slike već optimizovane i LCP je brz, ovo je poželjno poboljšanje, ne kriza.
• „Izbegavajte ogromne mrežne payload-e” — Lighthouse označava sve preko 1,6 MB. Ali stranica od 2 MB koja se brzo učitava bolja je od stranice od 500 KB koja blokira renderovanje. Fokusirajte se na to kako se bajtovi isporučuju, ne samo na ukupnu količinu.

Šta uraditi kada je sve crveno

Ako vam je Lighthouse ocena ispod 50 i većina provera pada, verovatno imate jedan od tri osnovna uzroka:

1. Neoptimizovani fontovi. Web fontovi su i dalje najlakši dobitak za performanse na većini sajtova. Proverite da li učitavate šest težina fonta kada koristite samo dve, ili šaljete WOFF datoteke umesto WOFF2.
2. CSS i JavaScript koji blokiraju renderovanje. Ako vam je First Contentful Paint (FCP) preko 3 sekunde, nešto sprečava browser da iscrta stranicu. Potražite velike CSS datoteke ili sinhrone skripte u <head>.
3. Prevelike slike. Ako je vaš LCP element slika i ima 4 MB, to je problem. Kompresujte je, lazy-load-ujte slike van prvog ekrana i koristite sintaksu za responzivne slike.

Popravite jednu od ovih stvari i ponovo pokrenite Lighthouse. Često ćete videti skok od 20–30 poena. Zatim pređite na sledeću.

Laboratorijski podaci naspram terenskih podataka: provera realnosti

Lighthouse radi u laboratoriji. Simulira sporu vezu i spor uređaj, ali ne može da simulira stvarno ponašanje korisnika — kako ljudi skroluju, na šta klikću, da li su na nestabilnom Wi-Fi-ju.

Za proveru realnosti, uporedite Lighthouse rezultate sa terenskim podacima iz Chrome User Experience Report (CrUX). CrUX pokazuje kako stvarni Chrome korisnici doživljavaju vaš sajt tokom poslednjih 28 dana. Ako Lighthouse kaže da vam je LCP 4 sekunde, ali CrUX pokazuje 2 sekunde, verujte CrUX-u. Ako su oba loša, imate stvaran problem.

CrUX podatke možete naći u PageSpeed Insights (web verziji Lighthouse-a) ili u Google Search Console pod „Core Web Vitals”. Ako postoji neslaganje, istražite zašto. Možda su vaši stvarni korisnici na bržim mrežama. Možda Lighthouse testira neoptimizovani dev build.

Kada ponovo pokrenuti Lighthouse

Lighthouse je šumovit. Pokrenite ga tri puta zaredom i dobićete tri različite ocene, čak i na istoj stranici. Razlog je to što su performanse promenljive — pozadinski procesi, mrežni jitter i heuristike browsera utiču na rezultat.

Da biste dobili stabilnu osnovu, pokrenite Lighthouse u incognito režimu sa svim ekstenzijama isključenim, ili koristite CLI sa --preset=desktop flag-om za doslednije rezultate. Pokrenite ga tri puta i izračunajte prosek ocena. Ako vidite velike oscilacije (više od 10 poena), nešto drugo nije u redu — možda je server spor, ili stranica svaki put učitava različite resurse.

Ponovo pokrenite Lighthouse posle svake značajne promene. Uveli ste novu strategiju za fontove? Proverite LCP. Lazy-load-ovali ste slike? Proverite CLS. Dodali ste third-party skriptu? Proverite INP. Performanse nisu jednokratna popravka; to je budžet koji branite.

Alati koji pomažu da postupite po Lighthouse nalazima

Lighthouse vam kaže šta je sporo. Ne kaže uvek kako da to popravite. Za to su vam potrebni dodatni alati:

• WebPageTest daje filmstrip prikaz učitavanja stranice, kadar po kadar. Neophodan je za dijagnostikovanje LCP i CLS problema.
• Chrome DevTools Performance panel pokazuje tačno koji JavaScript blokira glavnu nit. Koristite ga da pronađete izvor loše INP ocene.
• Alati za kompresiju slika omogućavaju da optimizujete slike direktno u browseru, što je brže i privatnije nego otpremanje na third-party servis. Obrada slika na strani klijenta je dobitak za privatnost jer vaše slike nikada ne napuštaju vaš računar.

Lighthouse je polazna tačka. Ovi alati pomažu da završite posao.

Ključni zaključci

• Vaša Lighthouse ocena je laboratorijski benchmark, ne mera stvarnog korisničkog iskustva. Uporedite je sa terenskim podacima iz CrUX-a pre nego što počnete da paničite.
• Prvo se fokusirajte na Core Web Vitals (LCP, CLS, INP). To su metrike koje koreliraju sa frustracijom korisnika i SEO uticajem.
• Dajte prioritet Opportunities prema procenjenoj uštedi vremena. Ignorišite Diagnostics koje se ne poklapaju sa vašim stvarnim problemima performansi.
• Neke provere — poput pasivnih listenera ili formata slika sledeće generacije — jesu mikrooptimizacije. Prvo popravite velike stvari.
• Pokrenite Lighthouse tri puta i izračunajte prosek rezultata. Performanse su promenljive, a jedno pokretanje može da zavara.

FAQ

Q: Zašto se moja Lighthouse ocena menja svaki put kada ga pokrenem?
A: Lighthouse meri performanse u promenljivim uslovima — brzina mreže, opterećenje CPU-a i heuristike browsera utiču na rezultat. Pokrenite ga tri puta u incognito režimu i izračunajte prosek ocena za stabilniju osnovu.

Q: Da li prvo treba da optimizujem za mobile ili desktop?
A: Mobile. Lighthouse podrazumevano koristi mobilnu simulaciju zato što je većina web saobraćaja mobilna, a mobilni uređaji su sporiji. Ako vam je mobile ocena dobra, desktop ocena će obično biti u redu.

Q: Moja Lighthouse ocena je 95, ali sajt i dalje deluje sporo. Šta nije u redu?
A: Lighthouse meri učitavanje stranice, ne interaktivnost posle učitavanja. Proverite INP ocenu i koristite Chrome DevTools Performance panel da profilirate šta se dešava kada korisnici klikću ili skroluju. Možda imate JavaScript problem koji Lighthouse ne hvata.

Q: Da li mi je potrebna savršena ocena 100?
A: Ne. Ocena 90+ je odlična. Jurnjava za 100 često znači optimizovanje stvari koje korisnicima nisu važne. Fokusirajte se na stvarne metrike — LCP, CLS, INP — i ignorišite ocenu.

Q: Mogu li da verujem Lighthouse-u ako koristim mnogo third-party skripti?
A: Lighthouse će označiti third-party skripte kao problem, ali ne može uvek da razlikuje neophodne od nepotrebnih. Koristite provere „Izbegavajte ogromne mrežne payload-e” i „Smanjite vreme izvršavanja JavaScript-a” da identifikujete najgore prekršioce, pa odlučite da li ih vredi zadržati.

Izvori

• „Lighthouse performance scoring” — Google Developers
• „Core Web Vitals” — web.dev
• „Chrome User Experience Report” — Google Developers
• „WebPageTest Documentation” — WebPageTest.org