Performance profiling with Lighthouse or WebPageTest provides deep analysis but takes time to run and produces overwhelming reports. Sometimes you just need a quick answer: "Is this page fast or slow? What's the biggest problem?" Page Performance gives you that instant overview. It reads timing data from the browser's Performance API and Navigation Timing API (data that's already collected — no additional page load needed) and presents it in a clean, visual dashboard. The top section shows key timing metrics: First Contentful Paint (when the first content appears), DOMContentLoaded (when the HTML is fully parsed), Full Load (when all resources finish), and Time to Interactive (when the page becomes responsive). Each metric is color-coded — green for fast, yellow for moderate, red for slow — based on Web Vitals thresholds. Below that, a resource breakdown shows how much bandwidth is spent on JavaScript, CSS, images, fonts, and other resource types, with visual bar charts for easy comparison. The DOM statistics section shows total element count, maximum nesting depth, and event listener count — indicators of DOM complexity that affect rendering performance.
Shows First Contentful Paint (FCP), DOMContentLoaded, Full Page Load, and Time to Interactive (TTI) — the four most important performance metrics. Each is color-coded: green (fast), yellow (moderate), red (slow) based on established Web Vitals thresholds.
Visual bar chart showing the count and total size of each resource type: JavaScript files, CSS stylesheets, images, fonts, and other assets. Instantly see which resource type contributes the most to page weight.
Shows total DOM element count, maximum nesting depth, and total event listener count. Large DOM sizes (2000+ elements) and deep nesting (15+ levels) are flagged as potential performance bottlenecks.
A single 0-100 score summarizes the page's performance health, color-coded green (85+), yellow (50-84), or red (0-49). Based on a weighted combination of timing metrics and resource efficiency.
Shows the combined size of all downloaded resources in MB. Broken down by category so you can see that 842 KB is JavaScript, 245 KB is images, and 128 KB is CSS — identifying the heaviest contributors.
Reads performance data from the browser's Performance API — data that's already collected during the normal page load. No synthetic re-testing, no additional network requests, and no performance impact from running the tool.
Open any page and get an instant performance overview. Is it fast (green score), moderate (yellow), or slow (red)? The dashboard answers this in under a second — no waiting for Lighthouse to run.
If the page is slow, the resource breakdown shows why. 1.2 MB of JavaScript? That's the bottleneck. 800 KB of unoptimized images? That's the fix. The visual breakdown makes the heaviest contributors obvious.
Run Page Performance before making optimizations, note the metrics. Make your changes, reload, and run it again. Compare FCP, load time, and total page weight to verify your optimizations had the expected impact.
Run Page Performance on your site and your competitors' sites. Compare load times, page weights, and resource distributions. Are competitors shipping less JavaScript? Are their images better optimized?
Run the tool on key pages regularly during development. If the performance score drops or page weight suddenly increases, you've introduced a regression — catch it before it reaches production.
Open the DevSuite Pro floating dock and click the Page Performance icon. The dashboard appears instantly with performance data for the current page load.
Check the four key timing metrics at the top: FCP, DOMContentLoaded, Full Load, and TTI. Green values are fast, yellow is moderate, red needs improvement.
Look at the resource bar chart to see which asset type is heaviest. JavaScript is often the biggest contributor — if JS is over 500 KB, it may be worth code-splitting or lazy-loading.
Review the DOM statistics. If element count exceeds 1500 or nesting depth exceeds 15, consider simplifying the markup to improve rendering performance.
The overall score gives a quick benchmark. Run the tool before and after optimizations to measure improvement.
