Measuring Performance Timings in Playwright

In modern web development, ensuring a website’s speed and responsiveness is just as important as its functionality. Playwright, a powerful end-to-end testing framework developed by Microsoft, is widely used for testing web applications across multiple browsers. One of Playwright’s lesser-known but highly valuable capabilities is measuring performance timings — a critical aspect when you want to validate page load speeds and diagnose slow interactions.

This blog will walk you through how to measure performance timings in Playwright and use that data to improve your application’s performance.

Why Measure Performance?

Performance measurements help identify bottlenecks such as:

• Slow page loads
• Inefficient network requests
• Unoptimized scripts or images
• Delays in interactive readiness

Testing performance as part of your CI/CD pipeline ensures that your application stays fast and responsive, especially after new code deployments.

Key Browser Performance Timings

Browsers provide a performance.timing API and PerformanceNavigationTiming object via the window.performance interface. Key metrics include:

• navigationStart: When navigation begins
• responseStart: When the first byte of the response is received
• domContentLoadedEventEnd: When the DOM is fully loaded
• loadEventEnd: When the page has fully loaded

These values can be accessed directly through Playwright scripts.

Measuring Timings with Playwright

Playwright allows you to evaluate JavaScript in the browser context, which is useful for fetching performance metrics.

Example:

javascript

const { chromium } = require('playwright');

(async () => {

  const browser = await chromium.launch();

  const context = await browser.newContext();

  const page = await context.newPage();

  await page.goto('https://example.com');

  const perfTiming = await page.evaluate(() => {

    const timing = performance.getEntriesByType('navigation')[0];

    return {

      startToDomContentLoaded: timing.domContentLoadedEventEnd - timing.startTime,

      startToLoad: timing.loadEventEnd - timing.startTime,

      firstByte: timing.responseStart - timing.startTime

    };

  });

  console.log('Performance Timings:', perfTiming);

  await browser.close();

})();

Explanation of Key Metrics

• startToDomContentLoaded: Time taken to load and parse the DOM.
• startToLoad: Full page load time including images, scripts, etc.
• firstByte: Time to first byte — indicates server response time.

These metrics help determine whether slow performance is due to backend delays, heavy frontend scripts, or third-party content.

Tips for Accurate Measurements

Disable cache during testing to simulate real-world user experience:

javascript

const context = await browser.newContext({ bypassCSP: true });

Run multiple times and take averages to reduce variance from network or rendering conditions.

Use tracing and screenshots for visual analysis:

javascript

await context.tracing.start({ screenshots: true, snapshots: true });

await context.tracing.stop({ path: 'trace.zip' });

Advanced Use: Custom Timers

If you want to measure specific interaction performance (e.g., time between clicking a button and the result appearing), use Playwright’s performance.now():

javascript

await page.evaluate(() => performance.mark('start'));

// perform actions here

await page.evaluate(() => performance.mark('end'));

await page.evaluate(() => performance.measure('interaction', 'start', 'end'));

Conclusion

Playwright makes it easy not just to test the functionality of web applications, but also to measure and monitor performance over time. By leveraging browser-provided APIs and Playwright’s evaluation capabilities, developers can identify slow points in the application and make data-driven optimizations. Integrating these measurements into your automation suite helps ensure a high-performance user experience in every release.

Learn Playwright Testing Training
Read More: Setting Up Test Tags and Filters in Playwright

Visit IHUB Talent Institute Hyderabad
Get Direction