Use tools to measure performance

Choosing the right audit tool for the job

Building a performant, resilient site with low data cost means auditing against each of your core objectives. The available tooling spans system utilities, built-in browser tools, browser extensions, online test applications, emulation tools, analytics, server-side metrics, screen and video recording, and manual tests. Different audits call for different approaches.

Auditing network activity and resource delivery

Start with your browser’s network tools to inspect the number, size, type and timing of resource requests. Chrome DevTools offers a network panel with a get-started guide; equivalents exist for Firefox, Safari, and Microsoft browsers.

Before measuring, disable the browser cache to get accurate first-load statistics. If you serve a service worker, clear Cache API storage as well. An Incognito or Private window sidesteps both concerns without manual resets. Record baseline results before any changes—a screenshot may suffice, or you can save network profile data as JSON for later comparison.

While inspecting the network, check for:

• Load performance: Lighthouse summarizes load metrics; refer to key user moments guides for context.
• Timeline events for loading, parsing and memory usage via the performance panel, with deeper JavaScript and memory profiling as needed.
• Total page weight and file count.
• JavaScript: number, weight, and any individual file over roughly 100KB. Use the Chrome coverage tool to spot unused code.
• Images: total count and weight; flag very large files; verify that PNGs aren’t better served as JPEGs or SVGs; confirm WebP usage includes fallbacks; check whether srcset and responsive techniques are in place.
• HTML: raw file size.
• CSS: total weight and unused rules—use the Chrome coverage panel.
• Other assets: web fonts and icon fonts for problematic usage.
• Blockers: anything that holds up page load in the DevTools timeline.

If you normally develop on fast connections, re-run tests with low bandwidth and high latency emulation. Also remember that some sites serve different assets via UA sniffing, so verify on real mobile hardware using remote debugging rather than relying only on device simulation.

Assessing memory and CPU usage

Chrome’s Task Manager (Window menu) gives a quick look at what a page consumes in memory and CPU. Capture this baseline before you start optimizing.

Measuring first and repeat loads

Lighthouse, WebPagetest and PageSpeed Insights take different angles on speed, data cost and resource usage. WebPagetest additionally checks static-content caching, time to first byte, and whether you’re effectively using CDNs.

Storing and sharing test results

• WebPagetest: each run gets a dedicated results URL.
• PageSpeed Insights: the online tool now folds in Chrome User Experience report data for real-world performance stats.
• Lighthouse: export reports from DevTools via the download button.

Validating Progressive Web App requirements

Lighthouse also checks security, functionality, accessibility and SEO. For PWAs specifically, it verifies service worker registration, Web App manifest presence, and whether your site provides an acceptable offline experience.

Download the report as JSON, or if you use the Lighthouse Chrome Extension, share it as a GitHub Gist: click share, choose Open in Viewer, then share again in the new window and save as Gist.

Tying performance to real-world business metrics

If you can, capture analytics before making changes: bounce rates, time on page, exit pages—whatever matters for your business. Record any technical or business metrics that might be affected, such as orders per minute, back-end storage costs, CPU requirements or serving costs, since lighter pages should improve several of these.

If analytics aren’t implemented yet, put them in place now; business metrics ultimately decide whether your site works. Add event tracking for user actions and consider goal flow analysis to trace paths toward conversions. Google Analytics’ Site Speed reports help correlate technical performance with business outcomes, like whether a fast homepage leads to a sale.

Google Analytics pulls from the Navigation Timing API. For custom metrics, you can use the JavaScript performance APIs:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

The ReportingObserver API surfaces browser deprecation and intervention warnings; see the list of related live measurement APIs for more options.

Documenting experiences: screen and video recordings

A high-frame-rate video of page load on mobile and desktop, ideally with a visible timer, gives you an immediate feel for what’s quick and what lags. This mirrors the filmstrip view in WebPagetest or Capture Screenshots in DevTools, but in a real browser context.

Screencast tools exist for Android, iOS and desktop platforms. Keep both recordings and screencasts for before-and-after comparisons—a side-by-side result is often the most compelling demonstration of improvement.

Supplemental checks

Two lightweight tools add perspective: the Web Bloat Score measures page weight versus useful text content, and What Does My Site Cost? estimates the monetary cost of loading your site across regions.

For a broader set of options, browse the tools directory at perf.rocks/tools.