loading...

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

benjaminmock profile image Benjamin Mock ・1 min read

Super useful puppeteer snippets 💭💭💭 (8 Part Series)

1) 📷 How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) 📷 More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) 📷 More on Screenshots with JavaScript in Node.js (creating PDFs) 4) 🗄️ The easiest way to scrape a website with Javascript (in Node.js) 5) 🍪 Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) 👟 Executing JavaScript in the page context of puppeteer 8) 🚀 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!

Super useful puppeteer snippets 💭💭💭 (8 Part Series)

1) 📷 How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) 📷 More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) 📷 More on Screenshots with JavaScript in Node.js (creating PDFs) 4) 🗄️ The easiest way to scrape a website with Javascript (in Node.js) 5) 🍪 Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) 👟 Executing JavaScript in the page context of puppeteer 8) 🚀 Performance measuring of a webpage with JavaScript in Node.js using puppeteer

Posted on by:

benjaminmock profile

Benjamin Mock

@benjaminmock

I'm Ben, a Frontend Developer from Germany working at ebay

Discussion

markdown guide