Calculate a Page's First Paint Time with Puppeteer
In this lesson we are going to use the firstPaintTime metric from chrome's load times, as well as the navigation start from the W3C window metrics, to calculate how long it takes a page to paint. We will set up a quick function and test it out on google.com
Instructor: [00:00] First off, we need to install Puppeteer, and then require it on the page. Next, let's make a function called getPageMetrics. It'll be async. We'll do a const browser equals await puppeteer.launch, and headless mode of false. const page equals await browser.newPage, await page, go to google.com, await browser.close, and then let's call the function. Perfect.
[00:29] After we've opened up a Chromium browser in headless mode, which that we'll be able to see it open, we create a new page. Next, we navigate to google.com, and then close the browser. We can now do const perf equals await page evaluate, with a function that returns an object.
[00:46] Do property first paint, Chrome load times, first paint time times 1,000 minus performance timing, navigation start. We'll do console.log, first paint in per first paint ms. We'll using this page.eval method that executes the function it's provided in its provided page context.
[01:12] In order to calculate how long it takes the page to do its first paint, we'll need two things, the Chrome loaded metrics and the window performance metrics. The Chrome metrics are obviously owned by Chrome, while the window metrics are browser agnostic, and maintained by W3C.
[01:29] Their values are not really helpful independent of each other, as they are represented in some arbitrary point of time, which is why we need to subtract from both. If we grab our terminal and run this file, we'll see a Chromium browser open up.
[01:44] We'll see that our first paint happened in 725 milliseconds. If we wanted to see what other metrics we can get from the window and Chrome browser, and we need to do is add a load times property, json.stringify our chrome.loadTimes, and null and for, then a performance property, json.stringify, performance.timing, null and for.
[02:06] Then we'll console.log perf.loadTimes and perf.performance. Finally. If we run this in our terminal, we'll see that now, we're going to get a bunch of objects with metrics in there that we can use to find out other things about the web page.