Measuring Page Load Time with Playwright

One of its many capabilities PlayWright is measuring page performance metrics, such as load times. In this tutorial, we'll walk through how to use Playwright to record the time it takes for a page to fully load.

Writing the Script

Create a file named measure-load-time.js and add the following code to measure the page load time for a website (e.g., example.com):

const { chromium } = require('playwright');
(async () => {
    // Launch browser
    const browser = await chromium.launch();
    const page = await browser.newPage();
    // Record start time
    const startTime = performance.now();
    // Navigate to the page
    await page.goto('https://example.com');
    // Wait for the page to fully load
    await page.waitForLoadState('load');
    // Record end time
    const endTime = performance.now();
    // Calculate load time
    const loadTime = endTime - startTime;
    console.log(`Page load time: ${loadTime.toFixed(2)} ms`);
    // Close browser
    await browser.close();
})();
            

This script:

• Launches a Chromium browser using Playwright.
• Records the start time using performance.now().
• Navigates to the specified URL.
• Waits for the load event, indicating the page is fully loaded.
• Calculates the load time by subtracting the start time from the end time.
• Outputs the result in milliseconds.

Running the Script

Run the script using Node.js:

node measure-load-time.js
            

You should see output similar to:

Page load time: 1234.56 ms
            

The actual time will vary depending on the website, network conditions, and system performance.