Playwright Performance Monitoring

Introduction

In the digital age, performance is a critical factor for the success of any web application. A slow-loading website not only frustrates users but also negatively impacts SEO and conversion rates. While traditional performance testing tools like Lighthouse are excellent for one-off audits, integrating performance monitoring into your regular automation suite provides continuous insight into how your application is performing over time.

Playwright offers several built-in features and API access to help you monitor and analyze the performance of your web applications. In this guide, we'll explore how to leverage Playwright for performance monitoring, from tracking Core Web Vitals to custom metrics and API timing.

---

Tracking Core Web Vitals

Core Web Vitals are a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability. Playwright can be used to capture these metrics directly from the browser.

1. Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest content element on the page to become visible.

test('Should measure Largest Contentful Paint (LCP)', async ({ page }) => {
  await page.goto('https://myapp.com');
  const lcp = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        resolve(lastEntry.startTime);
      }).observe({ type: 'largest-contentful-paint', buffered: true });
    });
  });
  console.log(`LCP: ${lcp}ms`);
});

2. Cumulative Layout Shift (CLS)

CLS measures the visual stability of a page by tracking unexpected layout shifts.

test('Should measure Cumulative Layout Shift (CLS)', async ({ page }) => {
  await page.goto('https://myapp.com');
  const cls = await page.evaluate(() => {
    let clsValue = 0;
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      }
    }).observe({ type: 'layout-shift', buffered: true });
    return clsValue;
  });
  console.log(`CLS: ${cls}`);
});

---

API Timing and Network Performance

Monitoring API response times is crucial for identifying backend bottlenecks. Playwright's request method provides data on how long each API call takes.

test('Should monitor API timing', async ({ page }) => {
  const startTime = Date.now();
  const response = await page.request.get('https://api.myapp.com/data');
  const endTime = Date.now();
  const duration = endTime - startTime;
  console.log(`API Call took: ${duration}ms`);
  expect(response.ok()).toBeTruthy();
});

Monitoring Network Requests

You can also monitor all network requests made by the page to find slow-loading assets.

page.on('requestfinished', (request) => {
  const timing = request.timing();
  console.log(`Request to ${request.url()} took ${timing.responseEnd - timing.requestStart}ms`);
});

---

Custom Metrics and Tracing

Sometimes you need to track metrics that are specific to your business logic, such as the time it takes for a user to complete a multi-step checkout process.

Custom Performance Marks

You can use the performance.mark() and performance.measure() APIs inside the browser.

await page.evaluate(() => {
  performance.mark('start-process');
  // ... perform actions ...
  performance.mark('end-process');
  performance.measure('Process Duration', 'start-process', 'end-process');
});

Playwright Tracing for Performance

The Playwright Trace Viewer can also be used to visualize performance. It shows the network activity, script execution, and layout shifts alongside the test actions.

export default defineConfig({
  use: {
    trace: 'on',
  },
});

---

Best Practices for Performance Monitoring

1. Baseline and Thresholds: Establish a performance baseline for your application and set thresholds in your tests. If a metric exceeds the threshold, fail the test.
2. Consistent Environment: Run performance tests in a stable environment that mimics production to ensure results are comparable.
3. Continuous Monitoring: Integrate these tests into your CI/CD pipeline to catch performance regressions early.
4. Visualize Results: Use tools like Grafana or Datadog to visualize your performance metrics over time and identify trends.

---

Conclusion

Performance monitoring is an essential part of modern web development and quality assurance. By integrating performance tests into your Playwright suite, you can move from reactive troubleshooting to proactive optimization. In 2026, where a one-second delay can mean lost revenue, continuous performance insights are a competitive advantage.

---