Výkon stránky poskytuje okamžitý přehled výkonu libovolné webové stránky — metriky časování načítání (FCP, DOMContentLoaded, plné načtení, TTI), statistiky DOM (počet prvků, hloubka vnoření, posluchače událostí) a přehled zdrojů zobrazující počet a velikost JavaScriptu, CSS, obrázků, fontů a dalších assetů. Barevně kódované skóre výkonu poskytuje rychlý indikátor stavu.
Profilování výkonu pomocí Lighthouse nebo WebPageTest poskytuje hloubkovou analýzu, ale zabírá čas a produkuje zdrcující zprávy. Někdy potřebujete jen rychlou odpověď: „Je tato stránka rychlá nebo pomalá? Co je největší problém?“ Výkon stránky vám dá tento okamžitý přehled. Čte data časování z Performance API prohlížeče a Navigation Timing API (data, která jsou již shromážděna — není potřeba žádné další načítání stránky) a prezentuje je v přehledném vizuálním řídicím panelu. Horní sekce zobrazuje klíčové metriky časování: First Contentful Paint (kdy se zobrazí první obsah), DOMContentLoaded (kdy je HTML plně zpracováno), plné načtení (kdy jsou dokončeny všechny zdroje) a Time to Interactive (kdy stránka začne reagovat). Každá metrika je barevně kódována — zelená pro rychlé, žlutá pro střední, červená pro pomalé — na základě prahových hodnot Web Vitals. Níže přehled zdrojů zobrazuje, kolik šířky pásma je spotřebováno na JavaScript, CSS, obrázky, fonty a další typy zdrojů, s vizuálními sloupcovými grafy pro snadné porovnání. Sekce statistik DOM zobrazuje celkový počet prvků, maximální hloubku vnoření a počet posluchačů událostí — indikátory složitosti DOM, které ovlivňují výkon vykreslování.
Zobrazuje First Contentful Paint (FCP), DOMContentLoaded, plné načtení stránky a Time to Interactive (TTI) — čtyři nejdůležitější metriky výkonu. Každá je barevně kódována: zelená (rychlé), žlutá (střední), červená (pomalé) na základě zavedených prahových hodnot Web Vitals.
Vizuální sloupcový graf zobrazující počet a celkovou velikost každého typu zdroje: soubory JavaScript, styly CSS, obrázky, fonty a ostatní assety. Okamžitě zjistíte, který typ zdroje nejvíce přispívá k hmotnosti stránky.
Zobrazuje celkový počet prvků DOM, maximální hloubku vnoření a celkový počet posluchačů událostí. Velké velikosti DOM (2000+ prvků) a hluboké vnoření (15+ úrovní) jsou označeny jako potenciální výkonnostní úzká místa.
Jediné skóre 0–100 shrnuje stav výkonu stránky, barevně kódované zeleně (85+), žlutě (50–84) nebo červeně (0–49). Vychází z váženého kombinace metrik časování a efektivity zdrojů.
Zobrazuje kombinovanou velikost všech stažených zdrojů v MB. Rozčleněno podle kategorie, takže vidíte, že 842 KB je JavaScript, 245 KB jsou obrázky a 128 KB je CSS — identifikuje nejhmotnější přispěvatele.
Čte data výkonu z Performance API prohlížeče — data, která jsou již shromážděna během normálního načítání stránky. Žádné syntetické opakované testování, žádné další síťové požadavky a žádný dopad na výkon při spuštění nástroje.
Otevřete libovolnou stránku a získejte okamžitý přehled výkonu. Je rychlá (zelené skóre), střední (žlutá) nebo pomalá (červená)? Řídicí panel odpoví za méně než vteřinu — žádné čekání na spuštění Lighthouse.
Pokud je stránka pomalá, přehled zdrojů ukáže proč. 1,2 MB JavaScriptu? To je úzké místo. 800 KB neoptimalizovaných obrázků? To je oprava. Vizuální přehled zřetelně ukáže nejhmotnější přispěvatele.
Spusťte Výkon stránky před optimalizacemi a zaznamenejte metriky. Proveďte změny, znovu načtěte a spusťte ho znovu. Porovnejte FCP, čas načítání a celkovou hmotnost stránky pro ověření, že optimalizace měly očekávaný dopad.
Spusťte Výkon stránky na svém webu a webech konkurentů. Porovnejte časy načítání, hmotnosti stránek a rozložení zdrojů. Odesílají konkurenti méně JavaScriptu? Jsou jejich obrázky lépe optimalizovány?
Spouštějte nástroj na klíčových stránkách pravidelně během vývoje. Pokud skóre výkonu klesne nebo hmotnost stránky náhle vzroste, zavedli jste regresi — zachyťte ji dříve, než se dostane do produkce.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Výkonu stránky. Řídicí panel se okamžitě zobrazí s daty výkonu pro aktuální načtení stránky.
Zkontrolujte čtyři klíčové metriky časování nahoře: FCP, DOMContentLoaded, plné načtení a TTI. Zelené hodnoty jsou rychlé, žlutá je střední, červená potřebuje zlepšení.
Podívejte se na sloupcový graf zdrojů a zjistěte, který typ assetu je nejhmotnější. JavaScript je často největším přispěvatelem — pokud je JS přes 500 KB, může být vhodné rozdělit kód nebo použít líné načítání.
Zkontrolujte statistiky DOM. Pokud počet prvků přesáhne 1500 nebo hloubka vnoření přesáhne 15, zvažte zjednodušení kódu pro zlepšení výkonu vykreslování.
Celkové skóre poskytuje rychlý benchmark. Spusťte nástroj před a po optimalizacích pro měření zlepšení.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
