Kako auditirati performanse s Lighthouseom, WebPageTestom i Chrome DevToolsom

Performance audit je bolji kada svaki alat koristite za specifičan sloj problema.

Lighthouse daje brzu osnovnu procjenu. WebPageTest pokazuje kako se stranica ponaša u stvarnom svijetu. Chrome DevTools pomaže pratiti što preglednik stvarno radi dok se stranica učitava.

Koristite pravi pogled na problem

Jedan score nije dovoljan. Stranica može izgledati dobro u jednom testu, a i dalje djelovati sporo zbog izvršavanja skripti, layout shiftova ili teške slike.

Zato ove alate koristim zajedno. Odgovaraju na različita pitanja i pomažu odvojiti vidljive simptome od stvarnog uzroka.

Lighthouse je najbrži prvi prolaz jer daje audite za performance, accessibility, SEO i best practices na jednom mjestu. WebPageTest ide dublje jer omogućuje testiranje kroz preglednike, uređaje i profile veze. Chrome DevTools je živa debugging razina, gdje možete pregledati network waterfall, izprofiliti performanse i izravno vidjeti stanje preglednika.

Ta kombinacija prati način na koji moderne stranice stvarno padaju. Problem rijetko bude jedna stvar. Obično je to miks troška skripti, težine slika, layout rada ili sporog backend odgovora koji postane vidljiv tek kada pogledate cijeli lanac.

Držite listu popravaka poštenom

Ako izvještaj pokazuje render-blocking kod, težinu slika ili trošak skripti, popravak treba pratiti dokaze. Lako je učiniti da stranica izgleda bolje na papiru bez stvarnog poboljšanja iskustva.

Najbolji workflow obično je:

1. Pokrenuti Lighthouse za brzu osnovnu procjenu.
2. Potvrditi problem u WebPageTestu.
3. Koristiti DevTools za pregled zahtjeva, layouta ili puta skripte.
4. Raditi jednu po jednu promjenu i ponovno testirati.

Chrome DevTools je također postao više AI-svjestan, što olakšava brzo pregledavanje problema kada timu treba pomoć s console errorima, stilovima i network ponašanjem. To je korisno, ali ne zamjenjuje disciplinu uspoređivanja rezultata prije i poslije.

Na što gledati najviše

• Core Web Vitals, posebno LCP, CLS i INP.
• Dostavu slika i responzivne formate.
• Izvršavanje skripti i trošak third-party alata.
• Cache, kompresiju i put backend odgovora.

Praktično pravilo

Auditirajte performanse s jednom jednostavnom idejom: ne zaustavljajte se na broju. Stanite tek kada razumijete zašto se stranica osjeća onako kako se osjeća.

Official resources: Lighthouse, Chrome DevTools, i WebPageTest.