Performanse stranice pružaju trenutačni pregled performansi bilo koje web-stranice — vremenski pokazatelji učitavanja (FCP, DOMContentLoaded, potpuno učitavanje, TTI), DOM statistike (broj elemenata, dubina ugniježđivanja, slušatelji događaja) i prikaz resursa koji prikazuje broj i veličinu JavaScript, CSS, slika, fontova i ostalih sadržaja. Ocjena performansi označena bojama daje brzi zdravstveni pokazatelj.
Profiliranje performansi s Lighthouse ili WebPageTest pruža duboku analizu, ali traje i daje opsežne izvještaje. Ponekad samo trebate brz odgovor: "Je li ova stranica brza ili spora? Što je najveći problem?" Performanse stranice daju vam taj trenutačni pregled. Čita vremenskih podataka iz Performance API i Navigation Timing API preglednika (podaci koji su već prikupljeni — nije potrebno dodatno učitavanje stranice) i prikazuje ih na čistoj, vizualnoj nadzornoj ploči. Gornji odjeljak prikazuje ključne vremenske pokazatelje: First Contentful Paint (kada se pojavljuje prvi sadržaj), DOMContentLoaded (kada je HTML potpuno raščlanjen), Full Load (kada se završavaju svi resursi) i Time to Interactive (kada stranica postaje responzivna). Svaki pokazatelj je označen bojom — zelena za brzo, žuta za umjereno, crvena za sporo — na temelju Web Vitals pragova. Ispod toga, prikaz resursa pokazuje koliko se propusnosti troši na JavaScript, CSS, slike, fontove i ostale vrste resursa, s vizualnim stupčastim grafikonima za laku usporedbu. Odjeljak DOM statistika prikazuje ukupan broj elemenata, maksimalnu dubinu ugniježđivanja i broj slušatelja događaja — pokazatelji DOM složenosti koji utječu na performanse renderiranja.
Prikazuje First Contentful Paint (FCP), DOMContentLoaded, Full Page Load i Time to Interactive (TTI) — četiri najvažnija pokazatelja performansi. Svaki je označen bojom: zelena (brzo), žuta (umjereno), crvena (sporo) na temelju utvrđenih Web Vitals pragova.
Vizualni stupčasti grafikon koji prikazuje broj i ukupnu veličinu svake vrste resursa: JavaScript datoteke, CSS stilski listovi, slike, fontovi i ostali sadržaji. Odmah vidite koja vrsta resursa najviše doprinosi težini stranice.
Prikazuje ukupan broj DOM elemenata, maksimalnu dubinu ugniježđivanja i ukupan broj slušatelja događaja. Veliki DOM-ovi (2000+ elemenata) i duboko ugniježđivanje (15+ razina) označeni su kao potencijalna uska grla performansi.
Jedna ocjena od 0 do 100 sažima zdravlje performansi stranice, označena bojom zelena (85+), žuta (50-84) ili crvena (0-49). Temelji se na ponderiranoj kombinaciji vremenskih pokazatelja i učinkovitosti resursa.
Prikazuje kombiniranu veličinu svih preuzetih resursa u MB. Razlomljeno po kategorijama tako da možete vidjeti da je 842 KB JavaScript, 245 KB slike, a 128 KB CSS — identificirajući najveće doprinose.
Čita podatke o performansama iz Performance API preglednika — podaci koji su već prikupljeni tijekom normalnog učitavanja stranice. Bez sintetičkog ponovnog testiranja, bez dodatnih mrežnih zahtjeva i bez utjecaja na performanse pokretanjem alata.
Otvorite bilo koju stranicu i dobijte trenutačni pregled performansi. Je li brza (zelena ocjena), umjerena (žuta) ili spora (crvena)? Nadzorna ploča odgovara u manje od sekunde — bez čekanja da se pokrene Lighthouse.
Ako je stranica spora, prikaz resursa pokazuje zašto. 1,2 MB JavaScript-a? To je usko grlo. 800 KB neoptimiziranih slika? To je rješenje. Vizualni prikaz čini najveće doprinose očitima.
Pokrenite Performanse stranice prije optimizacija i zabilježite pokazatelje. Napravite izmjene, ponovo učitajte i pokrenite ponovo. Usporedite FCP, vrijeme učitavanja i ukupnu težinu stranice kako biste potvrdili da su vaše optimizacije imale očekivani učinak.
Pokrenite Performanse stranice na svom web-mjestnu i web-mjestima vaše konkurencije. Usporedite vremena učitavanja, težine stranica i raspodjelu resursa. Šalju li konkurenti manje JavaScript-a? Jesu li njihove slike bolje optimizirane?
Redovito pokrenite alat na ključnim stranicama tijekom razvoja. Ako ocjena performansi padne ili se težina stranice iznenada poveća, uveli ste regresiju — uhvatite je prije nego što dođe u produkciju.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Performansi stranice. Nadzorna ploča se odmah pojavljuje s podacima o performansama za trenutno učitavanje stranice.
Provjerite četiri ključna vremenska pokazatelja na vrhu: FCP, DOMContentLoaded, Full Load i TTI. Zelene vrijednosti su brze, žuta je umjerena, crvena zahtijeva poboljšanje.
Pogledajte stupčasti grafikon resursa da biste vidjeli koja vrsta sadržaja je najteža. JavaScript je često najveći doprinositelj — ako je JS veći od 500 KB, može biti vrijedno razmotriti code-splitting ili lazy-loading.
Pregledajte DOM statistike. Ako broj elemenata prelazi 1500 ili dubina ugniježđivanja prelazi 15, razmislite o pojednostavljivanju oznaka radi poboljšanja performansi renderiranja.
Ukupna ocjena daje brzu referentnu vrijednost. Pokrenite alat prije i nakon optimizacija kako biste izmjerili poboljšanje.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
