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 will create a new page of our browser. We will navigate to google.com, and then close the browser.
[00:30] The first thing we need to do is do const response equals await, client send, performance.getMetrics. Then let's just console.log this response, so we can see what it looks like. If we run this file in our terminal, we'll see a browser open in the background, and we'll console.log an array full of objects.
[01:06] To calculate that, we'll do const jsUseSize equals response, metrics.find. Then we're going to look on the name property, JS heap use size, grab the value of it. Then const jsTotalSize equals response, metrics.find. We'll look for the name, JS heap total size, and grab that value.
[01:31] Next, we'll do const usedJS equals math.round, JS use size over JS total size, times 100. Now that we've plucked out the used JS and the total amount of JS used on the page, we can divide the used over the total, times it by 100, and round it out.
[01:52] Now, we can finish by console.logging 100 minus usedJS, percent of JS is unused. We could run this file in our terminal, and see that 36 percent of the JS is unused on the page.
Hi Tyler. Thanks a bunch for this video. I am not sure I am able to interpret the data in a meaningful way. For example I have a simple static site as my personal page right now http://yvkschaefer.github.io/ (https://github.com/yvkschaefer/yvkschaefer.github.io), and I don't even have any .js files, yet it still tells me that 45% of the JS is unused. Can you help me understand?