Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using page.getMetrics() to get page load time in puppeteer

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.com');
    const metrics = page.getMetrics();
    console.log(metrics.Documents, metrics.Frames, metrics.JSEventListeners);
    await page.goto('https://yahoo.com');
    await page.goto('https://bing.com');
    await page.goto('https://github.com/login');
    browser.close();
}
run();

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

like image 213
Raj Avatar asked Nov 02 '17 14:11

Raj


1 Answers

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.com/login');
const gitMetrics = await page.metrics();
console.log(gitMetrics.Timestamp) 
console.log(gitMetrics.TaskDuration)
like image 77
EcoVirtual Avatar answered Nov 14 '22 23:11

EcoVirtual