I am trying to use puppeteer to measure how fast a set of web sites loads in my environment. My focus is on the quality of network connection and network speed, so I am happy to know the the time taken for a page to load, for a layman's definition of load, when all images and html is downloaded by browser.

By using puppeteer I can run the test repeatedly and measure the difference in load times precisely.

I can see that in 64.0.3240.0 (r508693) page.getMetrics and event: 'metrics' have landed, which should help me in getting what I am looking for.

But being a newbie in node and js I am not sure how to read the page.getMetrics and which of the different key/value pairs give a useful information in my context.

My current pathetic attempt at reading metrics is as follows:

const puppeteer = require('puppeteer');
async function run() {
    const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
    const page = await browser.newPage();
    page.on('load', () => console.log("Loaded: " + page.url()));
    await page.goto('');
    const metrics = page.getMetrics();
    console.log(metrics.Documents, metrics.Frames, metrics.JSEventListeners);
    await page.goto('');
    await page.goto('');
    await page.goto('');
    browser.close();
}
run();

Any help in getting this code to some thing more respectable is much appreciated :)

I am trying to use puppeteer to measure how fast a set of web sites loads in my environment. My focus is on the quality of network connection and network speed, so I am happy to know the the time taken for a page to load, for a layman's definition of load, when all images and html is downloaded by browser.

By using puppeteer I can run the test repeatedly and measure the difference in load times precisely.

I can see that in 64.0.3240.0 (r508693) page.getMetrics and event: 'metrics' have landed, which should help me in getting what I am looking for.

But being a newbie in node and js I am not sure how to read the page.getMetrics and which of the different key/value pairs give a useful information in my context.

My current pathetic attempt at reading metrics is as follows:

const puppeteer = require('puppeteer');
async function run() {
    const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
    const page = await browser.newPage();
    page.on('load', () => console.log("Loaded: " + page.url()));
    await page.goto('https://google.');
    const metrics = page.getMetrics();
    console.log(metrics.Documents, metrics.Frames, metrics.JSEventListeners);
    await page.goto('https://yahoo.');
    await page.goto('https://bing.');
    await page.goto('https://github./login');
    browser.close();
}
run();

Any help in getting this code to some thing more respectable is much appreciated :)

• javascript
• node.js
• google-chrome-headless
• puppeteer

• See also How I can calculate page fully load with Pupppeteer? – ggorlen Commented Dec 19, 2022 at 1:33

1 Answer 1

in recent versions you have page.metrics() available:

It will return an object with a bunch of numbers including:

• The timestamp when the metrics sample was taken
• Combined durations of all page layouts
• Combined duration of all tasks performed by the browser.

Check out the docs for the full list

You can use it like this:

await page.goto('https://github./login');
const gitMetrics = await page.metrics();
console.log(gitMetrics.Timestamp) 
console.log(gitMetrics.TaskDuration)