Get a Page's Load Time with Puppeteer
In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time.
Instructor: [00:00] The first thing we need to do is install Puppeteer. Then inside of our file where we're using Puppeteer, we need to require it. I've made this function, getPageMetrics, which is async. The first thing we do is create a browser instance.
[00:14] With headless as false, it means that we're going to be able to see our Chromium browser open, and walk through the steps that we tell it to. Next, we'll create a new page off of our browser. We'll navigate to google.com, and then close the browser.
[00:30] The quickest way to get our page load time would be const tick equals date.now, then const log, "page load took," date.now minus tick, "ms." We're simply waiting for page.goTo to resolve, and then comparing the two dates together.
[00:50] When we run this in our terminal, we can see our browser open, and see that it takes 1,125 milliseconds to load the page. Now, if we wanted to get an even more exact time than this, we can do const perf equals await, page.evaluate. Then we'll destructure, load event in, and navigate start from performance timing.
[01:14] We'll return an object with a load time property, where we'll minus load event in and navigation start. We'll console.log, "page load took," perf.loadTime, "ms." This page.evaluate is how we can run a given function inside a page's context.
[01:37] We grab the load event in and navigation start metrics from the windows performance timing results, and subtract them together. Now, if we rerun this file, we'll see that we have two console.logs, and the second one is a little bit more accurate.
[01:55] Now, something else we can do is replicate slower network conditions, and see how that affects our page load. We'll do await, page.wait for 1,000, and await page client send, network emulate network conditions.
[02:10] Then we'll send an object, offline false, latency 200, downloading throughput 780 times 1024 divided by 8, upload 330 times 1024 divided by 8. Perfect. We're sending this dev tool protocol command, emulate network conditions, as well as an object that replicates the configuration of a 3G connection.
[02:35] Then this page.wait for 1,000 is to make sure that our page's context has resolved completely before sending our network condition. Now, when we rerun our file, we'll notice that it takes much longer than before, and our load times are now in the 5,000 millisecond range.