Kako auditirati performanse s Lighthouseom, WebPageTestom i Chrome DevToolsom

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

Lighthouse daje brz baseline. 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 izvrsavanja skripti, layout shiftova ili teške slike.

Zato ove alate koristim zajedno. Odgovaraju na razlicita 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, uredeaje i profile veze. Chrome DevTools je ziva debugging razina, gdje možete pregledati network waterfall, traceati performanse i direktno vidjeti browser state.

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 postenom

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 brz baseline.
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-aware, š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 usporedivanja prije i poslije rezultata.

Na što gledati najviše

• Core Web Vitals, posebno LCP, CLS i INP.
• Dostavu slika i responsive formate.
• Izvrsavanje 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 osjeca onako kako se osjeca.

Official resources: Lighthouse, Chrome DevTools, i WebPageTest.