Lehe Jõudlus pakub kohest jõudluse ülevaadet igast veebilehest — laadimisajastuse mõõdikud (FCP, DOMContentLoaded, täislaad, TTI), DOM statistika (elementide arv, pesastamise sügavus, sündmuste kuulajad) ja ressursside jaotus, mis näitab JavaScript, CSS, piltide, fontide ja muude varade arvu ja suurust. Värvikoodiga jõudluse skoor annab kiire tervisehinnangu.
Jõudluse profileerimine Lighthouse'i või WebPageTestiga pakub põhjalikku analüüsi, kuid nõuab aega ja toodab ülekoormavaid aruandeid. Mõnikord vajad lihtsalt kiiret vastust: "Kas see leht on kiire või aeglane? Mis on suurim probleem?" Lehe Jõudlus annab sulle selle kohese ülevaate. See loeb ajastuse andmeid brauseri Performance API-st ja Navigation Timing API-st (andmed, mis on juba kogutud — lisalaadimist pole vaja) ja esitab neid puhtas visuaalses armatuurlauas. Ülemine jaotis näitab peamisi ajastuse mõõdikuid: First Contentful Paint (millal ilmub esimene sisu), DOMContentLoaded (millal HTML on täielikult sõelutud), täislaad (millal kõik ressursid lõpetavad) ja Time to Interactive (millal leht muutub reageerivaks). Iga mõõdik on värvikoodiga — roheline kiire, kollane mõõdukas, punane aeglane — Web Vitals lävendite põhjal. Allpool näitab ressursside jaotus, kui palju ribalaiust kulutatakse JavaScript, CSS, piltidele, fontidele ja muudele ressursitüüpidele, koos visuaalsete tulpdiagrammidega lihtsa võrdluse jaoks. DOM statistika jaotis näitab elementide koguarvu, maksimaalset pesastamise sügavust ja sündmuste kuulajate arvu — DOM keerukuse näitajad, mis mõjutavad renderdamise jõudlust.
Näitab First Contentful Paint (FCP), DOMContentLoaded, lehe täislaadi ja Time to Interactive (TTI) — neli kõige olulisemat jõudluse mõõdikut. Iga on värvikoodiga: roheline (kiire), kollane (mõõdukas), punane (aeglane) vastavalt Web Vitals lävenditele.
Visuaalne tulpdiagramm, mis näitab iga ressursitüübi arvu ja kogu suurust: JavaScript failid, CSS laadistikud, pildid, fondid ja muud varad. Koheselt näe, milline ressursitüüp panustab kõige rohkem lehe kaalule.
Näitab DOM elementide koguarvu, maksimaalset pesastamise sügavust ja sündmuste kuulajate koguarvu. Suured DOM suurused (2000+ elementi) ja sügav pesastamine (15+ tasandit) märgitakse potentsiaalsete jõudluse kitsaskohtadena.
Üks 0-100 skoor võtab kokku lehe jõudluse tervise, värvikoodiga roheline (85+), kollane (50-84) või punane (0-49). Põhineb ajastuse mõõdikute ja ressursside tõhususe kaalutud kombinatsioonil.
Näitab kõigi allalaaditud ressursside kombineeritud suurust MB-des. Kategooriate kaupa jaotatud, nii et näed, et 842 KB on JavaScript, 245 KB on pildid ja 128 KB on CSS — tuvastad raskemad panustajad.
Loeb jõudluse andmeid brauseri Performance API-st — andmed, mis on juba kogutud tavapärase lehe laadimise ajal. Sünteetilisi uuesti testimisi pole, lisavõrgupäringuid pole ja tööriista käitamisel pole jõudluse mõju.
Ava mis tahes leht ja saa kohene jõudluse ülevaade. Kas see on kiire (roheline skoor), mõõdukas (kollane) või aeglane (punane)? Armatuurlaud vastab sellele alla sekundi — pole Lighthouse'i käivitamist oodata.
Kui leht on aeglane, näitab ressursside jaotus põhjust. 1,2 MB JavaScript? See on kitsaskoht. 800 KB optimeerimata pilte? See on parandus. Visuaalne jaotus muudab raskemad panustajad ilmselgeks.
Käivita Lehe Jõudlus enne optimeerimiste tegemist, märgi mõõdikud. Tee muudatused, laadi uuesti ja käivita uuesti. Võrdle FCP-d, laadimisaega ja lehe kogukalu, et kinnitada, et sinu optimeerimistel oli oodatud mõju.
Käivita Lehe Jõudlus oma saidil ja konkurentide saitidel. Võrdle laadimisaegu, lehe kaale ja ressursside jaotusi. Kas konkurendid saadavad vähem JavaScript? Kas nende pildid on paremini optimeeritud?
Käivita tööriist arendamise ajal regulaarselt võtmelehtedel. Kui jõudluse skoor langeb või lehe kaal äkki suureneb, oled sisse toonud regressiooni — püüa see kinni enne tootmiskeskkonda jõudmist.
Ava DevSuite Pro ujuv dokk ja klõpsa Lehe Jõudluse ikoonil. Armatuurlaud ilmub koheselt praeguse lehe laadimise jõudluse andmetega.
Kontrolli nelja peamist ajastuse mõõdikut üleval: FCP, DOMContentLoaded, täislaad ja TTI. Rohelised väärtused on kiired, kollane on mõõdukas, punane vajab parandamist.
Vaata ressursside tulpdiagrammi, et näha, milline varatüüp on raskeim. JavaScript on sageli suurim panustaja — kui JS on üle 500 KB, võib tasuda kood-jagamist või laiska laadimist kaaluda.
Vaata üle DOM statistika. Kui elementide arv ületab 1500 või pesastamise sügavus ületab 15, kaalu märgistuse lihtsustamist renderdamise jõudluse parandamiseks.
Üldine skoor annab kiire etaloni. Käivita tööriist enne ja pärast optimeerimisi paranemise mõõtmiseks.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
