Page Performance biedt een instant prestatie-overzicht van elke webpagina — laadtimingmetrieken (FCP, DOMContentLoaded, volledige belasting, TTI), DOM-statistieken (elementaantal, nestingdiepte, eventlisteners), en een bronuitsplitsing met het aantal en de grootte van JavaScript, CSS, afbeeldingen, lettertypen, en andere middelen. Een kleurgecodeerde prestatiescores geeft een snelle gezondheidsindicator.
Prestatieprofilering met Lighthouse of WebPageTest biedt diepe analyse maar kost tijd om uit te voeren en produceert overweldigende rapporten. Soms heb je gewoon een snel antwoord nodig: "Is deze pagina snel of traag? Wat is het grootste probleem?" Page Performance geeft u dat instant overzicht. Het leest timinggegevens uit de Performance API en Navigation Timing API van de browser (gegevens die al zijn verzameld — geen extra pagina-lading nodig) en presenteert dit in een schoon, visueel dashboard. De bovenste sectie toont sleuteltimingmetrieken: First Contentful Paint (wanneer de eerste inhoud verschijnt), DOMContentLoaded (wanneer de HTML volledig is geparseerd), Full Load (wanneer alle bronnen klaar zijn), en Time to Interactive (wanneer de pagina responsief wordt). Elke metriek is kleurgecodeerd — groen voor snel, geel voor matig, rood voor traag — gebaseerd op Web Vitals-drempels. Daaronder toont een bronnenuitsplitsing hoeveel bandbreedte wordt besteed aan JavaScript, CSS, afbeeldingen, lettertypen, en andere bronnentypes, met visuele staafdiagrammen voor gemakkelijke vergelijking. De DOM-statistiekensectie toont totaal elementaantal, maximale nestingdiepte, en totaal aantal eventlisteners — indicatoren van DOM-complexiteit die renderprestaties beïnvloeden.
Toont First Contentful Paint (FCP), DOMContentLoaded, Full Page Load, en Time to Interactive (TTI) — de vier belangrijkste prestatiematen. Elk is kleurgecodeerd: groen (snel), geel (matig), rood (traag) gebaseerd op vastgestelde Web Vitals-drempels.
Visueel staafdiagram met het aantal en de totale grootte van elk bronnetype: JavaScript-bestanden, CSS-stylesheets, afbeeldingen, lettertypen, en andere middelen. Zie onmiddellijk welk bronnetype het meest bijdraagt aan paginagewicht.
Toont totaal DOM-elementaantal, maximale nestingdiepte, en totaal aantal eventlisteners. Grote DOM-grootten (2000+ elementen) en diepe nesting (15+ niveaus) worden gemarkeerd als potentiële prestatieknelpunten.
Een enkele 0-100 score vat de prestatiegezondheidsstatus van de pagina samen, kleurgecodeerd groen (85+), geel (50-84), of rood (0-49). Gebaseerd op een gewogen combinatie van timingmetrieken en bronnefficiëntie.
Toont de gecombineerde grootte van alle gedownloade bronnen in MB. Uitgesplitst naar categorie zodat u kunt zien dat 842 KB JavaScript is, 245 KB afbeeldingen, en 128 KB CSS — wat de zwaarste contributors identificeert.
Leest prestatiegegevens uit de Performance API van de browser — gegevens die al zijn verzameld tijdens de normale pagina-lading. Geen synthetische hertestingsbedrijf, geen extra netwerkaanvragen, en geen prestatieimpact van het uitvoeren van het gereedschap.
Open een pagina en krijg instant prestatie-overzicht. Is het snel (groene score), matig (geel), of traag (rood)? Het dashboard beantwoordt dit in minder dan een seconde — geen wachten op Lighthouse.
Als de pagina traag is, toont de bronnenuitsplitsing waarom. 1,2 MB JavaScript? Dat is het knelpunt. 800 KB niet-geoptimaliseerde afbeeldingen? Dat is de oplossing. De visuele uitsplitsing maakt de zwaarste contributors duidelijk.
Voer Paginaprestatie uit voor optimalisaties, noteer de metrieken. Maak uw wijzigingen, herlaad, en voer het opnieuw uit. Vergelijk FCP, laadtijd, en totaal paginagewicht om te verifiëren dat uw optimalisaties het verwachte effect hadden.
Voer Paginaprestatie uit op uw site en de sites van concurrenten. Vergelijk laadtijden, paginagewichten, en bronnenverdeling. Verzenden concurrenten minder JavaScript? Zijn hun afbeeldingen beter geoptimaliseerd?
Voer het gereedschap regelmatig op sleutelpagina's uit tijdens de ontwikkeling. Als de prestatiescores daalt of paginagewicht plotseling toeneemt, hebt u een regressie geïntroduceerd — vang dit op voordat het productie bereikt.
Open het zwevende dock van DevSuite Pro en klik op het pictogram Paginaprestatie. Het dashboard verschijnt onmiddellijk met prestatiegegevens voor de huige pagina-lading.
Controleer de vier sleuteltimingmetrieken aan de bovenkant: FCP, DOMContentLoaded, Full Load, en TTI. Groene waarden zijn snel, geel is matig, rood heeft verbetering nodig.
Kijk naar het bronnenbalk-diagram om te zien welk assettype het zwaarste is. JavaScript is vaak de grootste contributor — als JS meer dan 500 KB is, is code-splitting of lazy-loading misschien zinvol.
Bekijk de DOM-statistieken. Als elementaantal 1500 overschrijdt of nestingdiepte 15 overschrijdt, overweeg de markup te vereenvoudigen om renderprestaties te verbeteren.
De algehele score geeft een snelle benchmark. Voer het gereedschap voor en na optimalisaties uit om verbetering te meten.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
