Using Puppeteer/Headless Chrome to report performance metrics

Question

I'm experimenting with Puppeteer to use headless Chrome and trying to find how to report the time for first-paint. I've been looking through the Chrome DevTools Performance API and noticed there is an Performance.metrics but when I subscribe to the event its never triggered.

const client = page._client
await client.send('Page.enable')
await client.send('DOM.enable')
await client.send('Performance.enable')
client.on('Performance.metrics', (obj) => {
   console.log({obj})
})
await page.goto('http://example.com', {waitUntil: 'networkidle2'})

But the event observer is never fired. Any suggestions on how I can observe the metrics data from Performance?

Answer 1

If you are asking about First Meaningful Paint you can get it by using:

await page.goto('http://example');

await page.waitFor(1000);
const performanceMetrics = await page._client.send('Performance.getMetrics'); 
console.log(performanceMetrics);

I wrote an article "Test website performance with Puppeteer" with a chapter dedicated to measuring FirstMeaningfulPaint.