This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Get a Page's Load Time with Puppeteer

    Tyler ClarkTyler Clark

    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.

    puppeteerPuppeteer
    javascriptJavaScript
    chromeChrome
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss