Sivun suorituskyky tarjoaa välittömän suorituskyvyn yleiskatsauksen mille tahansa verkkosivulle — latauksen ajoitusmittarit (FCP, DOMContentLoaded, täysi lataus, TTI), DOM-tilastot (elementtien määrä, sisäkkäisyyden syvyys, tapahtumakuuntelijat) sekä resurssierittely, joka näyttää JavaScript-, CSS-, kuva-, fontti- ja muiden resurssien määrän ja koon. Värikoodattu suorituskykypistemäärä antaa nopean terveysindikaattorin.
Suorituskykyprofilointi Lighthousella tai WebPageTestillä tarjoaa syvällisen analyysin, mutta se vie aikaa ja tuottaa ylivoimaisia raportteja. Joskus tarvitset vain nopean vastauksen: "Onko tämä sivu nopea vai hidas? Mikä on suurin ongelma?" Sivun suorituskyky antaa sinulle sen välittömän yleiskatsauksen. Se lukee ajoitustiedot selaimen Performance API:sta ja Navigation Timing API:sta (tiedot, jotka on jo kerätty — ei tarvita lisälatausta) ja esittää ne selkeässä, visuaalisessa kojelaudassa. Yläosassa näkyvät tärkeimmät ajoitusmittarit: First Contentful Paint (kun ensimmäinen sisältö ilmestyy), DOMContentLoaded (kun HTML on täysin jäsennetty), täysi lataus (kun kaikki resurssit ovat valmiita) ja Time to Interactive (kun sivu on reagoiva). Jokainen mittari on värikoodattu — vihreä nopealle, keltainen kohtalaiselle, punainen hitaalle — Web Vitals -kynnysarvojen perusteella. Sen alla resurssierittely näyttää, kuinka paljon kaistanleveyttä käytetään JavaScript-, CSS-, kuva-, fontti- ja muihin resurssityyppeihin visuaalisilla pylväskaavioilla helppoa vertailua varten. DOM-tilastot-osio näyttää elementtien kokonaismäärän, maksimaalisen sisäkkäisyyden syvyyden ja tapahtumakuuntelijoiden määrän — DOM-monimutkaisuuden indikaattorit, jotka vaikuttavat renderöintisuorituskykyyn.
Näyttää First Contentful Paint (FCP), DOMContentLoaded, koko sivun latauksen ja Time to Interactive (TTI) — neljä tärkeintä suorituskykymittaria. Jokainen on värikoodattu: vihreä (nopea), keltainen (kohtalainen), punainen (hidas) vakiintuneiden Web Vitals -kynnysarvojen perusteella.
Visuaalinen pylväskaavio, joka näyttää jokaisen resurssityypin määrän ja kokonaiskoon: JavaScript-tiedostot, CSS-tyylitaulukot, kuvat, fontit ja muut resurssit. Näet välittömästi, mikä resurssityyppi vaikuttaa eniten sivun painoon.
Näyttää DOM-elementtien kokonaismäärän, maksimaalisen sisäkkäisyyden syvyyden ja tapahtumakuuntelijoiden kokonaismäärän. Suuret DOM-koot (2000+ elementtiä) ja syvä sisäkkäisyys (15+ tasoa) merkitään mahdollisiksi suorituskyvyn pullonkauloiksi.
Yksittäinen 0–100-pistemäärä tiivistää sivun suorituskyvyn tilan, värikoodattuna vihreäksi (85+), keltaiseksi (50–84) tai punaiseksi (0–49). Perustuu ajoitusmittareiden ja resurssitehokkuuden painotettuun yhdistelmään.
Näyttää kaikkien ladattujen resurssien yhteiskoon megatavuina. Eritelty kategorioittain, joten näet, että 842 kt on JavaScript, 245 kt on kuvia ja 128 kt on CSS — raskaimpien tekijöiden tunnistamiseksi.
Lukee suorituskykytiedot selaimen Performance API:sta — tiedot, jotka on jo kerätty normaalin sivulatauksen aikana. Ei synteettistä uudelleentestausta, ei ylimääräisiä verkkopyyntöjä eikä suorituskykyvaikutusta työkalun käytöstä.
Avaa mikä tahansa sivu ja saat välittömän suorituskyvyn yleiskatsauksen. Onko se nopea (vihreä pistemäärä), kohtalainen (keltainen) vai hidas (punainen)? Kojelauta vastaa tähän alle sekunnissa — ei tarvitse odottaa Lighthousea.
Jos sivu on hidas, resurssierittely näyttää miksi. 1,2 Mt JavaScriptia? Se on pullonkaula. 800 kt optimoimattomia kuvia? Se on korjattava. Visuaalinen erittely tekee raskaimmista tekijöistä ilmeisiä.
Suorita Sivun suorituskyky ennen optimointeja ja kirjaa mittarit. Tee muutokset, lataa uudelleen ja suorita se uudelleen. Vertaa FCP:tä, latausaikaa ja sivun kokonaispainoa varmistaaksesi, että optimoinneilla oli odotettu vaikutus.
Suorita Sivun suorituskyky omalla sivustollasi ja kilpailijoiden sivustoilla. Vertaile latausaikoja, sivujen painoja ja resurssien jakaumia. Toimittavatko kilpailijat vähemmän JavaScriptia? Ovatko heidän kuvansa paremmin optimoituja?
Suorita työkalu avainsuilla säännöllisesti kehityksen aikana. Jos suorituskykypistemäärä laskee tai sivun paino kasvaa äkillisesti, olet tuonut regressio — havaitse se ennen kuin se pääsee tuotantoon.
Avaa DevSuite Pro -kelluva telakka ja napsauta Sivun suorituskyky -kuvaketta. Kojelauta ilmestyy välittömästi nykyisen sivulatauksen suorituskykytiedoilla.
Tarkista neljä tärkeintä ajoitusmittaria ylhäältä: FCP, DOMContentLoaded, täysi lataus ja TTI. Vihreät arvot ovat nopeita, keltainen on kohtalainen, punainen tarvitsee parannusta.
Katso resurssipylväskaaviota nähdäksesi, mikä resurssityyppi on raskain. JavaScript on usein suurin tekijä — jos JS ylittää 500 kt, koodin jakaminen tai lazy-loading saattaa olla kannattavaa.
Tarkastele DOM-tilastoja. Jos elementtien määrä ylittää 1500 tai sisäkkäisyyden syvyys ylittää 15, harkitse merkintäkielen yksinkertaistamista renderöintisuorituskyvyn parantamiseksi.
Kokonaispistemäärä antaa nopean vertailukohdan. Suorita työkalu ennen optimointeja ja niiden jälkeen parannuksen mittaamiseksi.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
