Kako čitati Lighthouse izvješće bez panike

Prvo pravilo: vaš rezultat nije vaše web-mjesto

Otvorite Lighthouse izvješće prvi put i dočeka vas zid brojeva, okviri označeni bojama i upozorenja o stvarima za koje nikada niste čuli. Prirodna reakcija je panika. Rezultat je crven. Sedamnaest revizija nije prošlo. Web-mjesto je sigurno pokvareno?

Vjerojatno nije. Lighthouse je dijagnostički alat, a ne školsko izvješće. Rezultat je sintetički benchmark pokrenut u laboratorijskim uvjetima — često na prigušenoj vezi, uz simulaciju telefona srednje klase iz 2017. Govori vam kako se vaše web-mjesto ponaša u tom konkretnom scenariju, a ne kako ga stvarni korisnici doživljavaju u praksi.

To je važno jer se većina timova fiksira na rezultat i propušta kontekst. Rezultat 65 može biti sasvim u redu za složenu web-aplikaciju s podacima u stvarnom vremenu. Rezultat 95 i dalje može pružati loše iskustvo ako su optimizirane pogrešne stvari. Rezultat je polazište za istraživanje, a ne metrika uspjeha.

Što prvo pročitati: Core Web Vitals

Preskočite ukupni rezultat performansi. Pomaknite se do odjeljka 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 jedine su metrike performansi koje Google koristi kao signal za rangiranje.

• LCP mjeri koliko je vremena potrebno da se prikaže najveći vidljivi element. Cilj: manje od 2,5 sekunde. Ako ste iznad 4 sekunde, korisnici predugo čekaju da vide smislen sadržaj.
• CLS mjeri vizualnu stabilnost — koliko stranica poskakuje dok se učitava. Cilj: manje od 0,1. Ako ste iznad 0,25, korisnici slučajno klikaju pogrešnu stvar jer su se gumbi pomaknuli.
• INP mjeri odzivnost — koliko brzo stranica reagira na klikove, dodire i pritiske tipki. Cilj: manje od 200 ms. Ako ste iznad 500 ms, web-mjesto djeluje tromo.

Te tri metrike koreliraju sa stvarnom frustracijom korisnika. Popravite njih prije nego što se počnete brinuti o bilo čemu drugom.

Prilike naspram dijagnostike: znajte razliku

Lighthouse dijeli nalaze u dvije kategorije: Opportunities i Diagnostics. Prilike su poredane prema procijenjenoj uštedi vremena. Dijagnostika je dodatni kontekst — stvari koje mogu biti problemi, ali i ne moraju.

Počnite s prilikama. Ako Lighthouse kaže da bi "Eliminate render-blocking resources" moglo uštedjeti 1,2 sekunde, to je konkretan dobitak. Ako kaže da bi "Reduce unused JavaScript" moglo uštedjeti 0,1 sekundu, refaktoriranje se vjerojatno ne isplati.

Dijagnostika je nezgodnija. "Avoid an excessive DOM size" zvuči loše, ali ako je vaš CLS dobar, a INP brz, velik DOM možda nikome ne šteti. Dijagnostika su tragovi, a ne nalozi. Istražite one koji se poklapaju s vašim stvarnim metrikama.

Revizije koje obično možete zanemariti

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

• "Does not use passive listeners to improve scrolling performance" — Ovo je mikrooptimizacija koja rijetko bitno mijenja rezultat. Ako nemate dokaze o trzavom pomicanju, preskočite je.
• "Image elements do not have explicit width and height" — Ovo je važno za CLS, ali samo ako slike uzrokuju pomake rasporeda. Ako je vaš CLS već dobar, nemojte refaktorirati samo radi revizije.
• "Serve images in next-gen formats" — Da, WebP i AVIF su manji. Ali ako su vaše slike već optimizirane i LCP je brz, ovo je lijepo imati, a ne kriza.
• "Avoid enormous network payloads" — Lighthouse označava sve iznad 1,6 MB. Ali stranica od 2 MB koja se brzo učitava bolja je od stranice od 500 KB koja blokira prikazivanje. Usredotočite se na to kako se bajtovi isporučuju, a ne samo na ukupnu veličinu.

Što učiniti kada je sve crveno

Ako je vaš Lighthouse rezultat ispod 50 i većina revizija ne prolazi, vjerojatno imate jedan od tri temeljna uzroka:

1. Neoptimizirani fontovi. Web fontovi i dalje su najlakši dobitak za performanse na većini web-mjesta. Provjerite učitavate li šest debljina fonta kada koristite samo dvije ili isporučujete WOFF datoteke umjesto WOFF2.
2. CSS i JavaScript koji blokiraju prikazivanje. Ako je vaš First Contentful Paint (FCP) iznad 3 sekunde, nešto sprječava preglednik da počne prikazivati. Potražite velike CSS datoteke ili sinkrone skripte u <head>.
3. Prevelike slike. Ako je vaš LCP element slika i ima 4 MB, to je vaš problem. Komprimirajte je, odgodite učitavanje slika ispod prvog zaslona i koristite sintaksu za responzivne slike.

Popravite jedno od toga i ponovno pokrenite Lighthouse. Često ćete vidjeti skok od 20 do 30 bodova. Zatim prijeđite na sljedeće.

Laboratorijski podaci naspram terenskih podataka: provjera stvarnosti

Lighthouse radi u laboratoriju. Simulira sporu vezu i spor uređaj, ali ne može simulirati stvarno ponašanje korisnika — kako ljudi pomiču stranicu, na što klikaju, jesu li na nestabilnom Wi-Fiju.

Za provjeru stvarnosti usporedite svoje Lighthouse rezultate s terenskim podacima iz Chrome User Experience Report (CrUX). CrUX pokazuje kako stvarni Chrome korisnici doživljavaju vaše web-mjesto tijekom posljednjih 28 dana. Ako Lighthouse kaže da je vaš LCP 4 sekunde, ali CrUX pokazuje 2 sekunde, vjerujte CrUX-u. Ako su oba loša, imate stvaran problem.

CrUX podatke možete pronaći u PageSpeed Insights (web-verziji Lighthousea) ili u Google Search Console pod "Core Web Vitals." Ako postoji nepodudaranje, istražite zašto. Možda su vaši stvarni korisnici na bržim mrežama. Možda Lighthouse testira neoptimizirani razvojni build.

Kada ponovno pokrenuti Lighthouse

Lighthouse je šumovit. Pokrenite ga tri puta zaredom i dobit ćete tri različita rezultata, čak i na istoj stranici. Razlog je to što su performanse promjenjive — pozadinski procesi, mrežna kolebanja i heuristike preglednika utječu na rezultat.

Da biste dobili stabilnu početnu vrijednost, pokrenite Lighthouse u anonimnom načinu rada sa svim proširenjima onemogućenima ili upotrijebite CLI sa zastavicom --preset=desktop za dosljednije rezultate. Pokrenite ga tri puta i izračunajte prosjek rezultata. Ako vidite velike oscilacije (više od 10 bodova), nešto drugo nije u redu — možda je poslužitelj spor ili stranica svaki put učitava različite resurse.

Ponovno pokrenite Lighthouse nakon svake značajne promjene. Uveli ste novu strategiju fontova? Provjerite LCP. Odgodili ste učitavanje slika? Provjerite CLS. Dodali ste skriptu treće strane? Provjerite INP. Performanse nisu jednokratan popravak; one su budžet koji branite.

Alati koji vam pomažu djelovati na temelju Lighthouse nalaza

Lighthouse vam govori što je sporo. Ne govori vam uvijek kako to popraviti. Za to su vam potrebni dodatni alati:

• WebPageTest daje vam filmsku traku učitavanja stranice, kadar po kadar. Neophodno za dijagnosticiranje problema s LCP-om i CLS-om.
• Chrome DevTools Performance panel pokazuje vam točno koji JavaScript blokira glavnu nit. Upotrijebite ga da pronađete izvor lošeg INP rezultata.
• Alati za kompresiju slika omogućuju optimizaciju slika izravno u pregledniku, što je brže i privatnije od prijenosa na uslugu treće strane. Obrada slika na strani klijenta dobitak je za privatnost jer vaše slike nikada ne napuštaju vaše računalo.

Lighthouse je polazište. Ovi alati pomažu vam dovršiti posao.

Ključne pouke

• Vaš Lighthouse rezultat laboratorijski je benchmark, a ne mjera stvarnog korisničkog iskustva. Usporedite ga s terenskim podacima iz CrUX-a prije nego što počnete paničariti.
• Najprije se usredotočite na Core Web Vitals (LCP, CLS, INP). To su metrike koje koreliraju s frustracijom korisnika i SEO utjecajem.
• Odredite prioritete za Opportunities prema procijenjenoj uštedi vremena. Zanemarite Diagnostics koji se ne poklapaju s vašim stvarnim problemima performansi.
• Neke revizije — poput pasivnih slušatelja ili slikovnih formata nove generacije — mikrooptimizacije su. Prvo popravite velike stvari.
• Pokrenite Lighthouse tri puta i izračunajte prosjek rezultata. Performanse su promjenjive, a jedno pokretanje može zavarati.

FAQ

Q: Zašto se moj Lighthouse rezultat mijenja svaki put kad ga pokrenem?
A: Lighthouse mjeri performanse u promjenjivim uvjetima — brzina mreže, opterećenje CPU-a i heuristike preglednika utječu na rezultat. Pokrenite ga tri puta u anonimnom načinu rada i izračunajte prosjek rezultata za stabilniju početnu vrijednost.

Q: Trebam li prvo optimizirati za mobilne uređaje ili za desktop?
A: Za mobilne uređaje. Lighthouse zadano koristi mobilnu simulaciju jer je većina web-prometa mobilna, a mobilni uređaji su sporiji. Ako je vaš mobilni rezultat dobar, desktop rezultat obično će također biti u redu.

Q: Moj Lighthouse rezultat je 95, ali moje web-mjesto i dalje djeluje sporo. Što nije u redu?
A: Lighthouse mjeri učitavanje stranice, ne interaktivnost nakon učitavanja. Provjerite svoj INP rezultat i upotrijebite Chrome DevTools Performance panel za profiliranje onoga što se događa kada korisnici klikaju ili pomiču stranicu. Možda imate JavaScript problem koji Lighthouse ne hvata.

Q: Trebam li savršen rezultat 100?
A: Ne. Rezultat 90+ je izvrstan. Jurnjava za 100 često znači optimiziranje stvari koje korisnicima nisu važne. Usredotočite se na stvarne metrike — LCP, CLS, INP — i zanemarite rezultat.

Q: Mogu li vjerovati Lighthouseu ako koristim mnogo skripti trećih strana?
A: Lighthouse će označiti skripte trećih strana kao problem, ali ne može uvijek razlikovati nužne od nepotrebnih. Upotrijebite revizije "Avoid enormous network payloads" i "Reduce JavaScript execution time" da identificirate najgore krivce, a zatim odlučite vrijedi li ih zadržati.

Izvori

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