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!
Top comments (0)