🚀 Performance measuring of a webpage with JavaScript in Node.js using puppeteer

In the last part of my puppeteer series, we learned how to execute JavaScript in a page context. We'll now use this knowledge to actually do something useful: we'll measure the load time of the loaded webpage. In our case, that's the load time of dev.to.

We'll focus on just the load time. But performance.timing has many more properties. Just try to log them on your console to learn more.

Here's the complete code to measure the load time of a webpage using puppeteer. This could, for example, be used for continuous measuring of load times, or be added as a pre-push hook.

// npm i puppeteer
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // let's navigate to the dev.to homepage
  await page.goto('https://dev.to');

  // evaluate will run the function in the page context
  const perf = await page.evaluate(_ => {
    // let's get the latency-related performance information
    const { loadEventEnd, navigationStart } = performance.timing;

    // calculate the load time in milliseconds
    return { loadTime: loadEventEnd - navigationStart };
  });

  // and log the load time of the webpage
  console.log(perf.loadTime);

  // we're done; close the browser
  await browser.close();
})();

Please consider following me, if you're interested in measuring the performance of webpages. I'll post more about that topic in this and other series.

Thanks for reading!