Check out a free preview of the full Mastering Chrome Developer Tools v2 course:
The "Auditing Tools" Lesson is part of the full, Mastering Chrome Developer Tools v2 course featured in this preview video. Here's what you'd learn in this lesson:

After discussing that the performance of a webpage can translate to a loss in traffic or even a decline in sales, Jon demonstrates auditing tools that look at a site's performance and interactivity. - - https://www.webpagetest.org/ - https://developers.google.com/web/tools/lighthouse/ - https://developers.google.com/web/progressive-web-apps/checklist - https://sonarwhal.com/

Get Unlimited Access Now

Transcript from the "Auditing Tools" Lesson

[00:00:00]
>> Jon Kuperman: Cool auditing, kinda moving from that micro back out to a macro level, auditing has come so far. There's so many great tools out there to just kinda give a high level audit of your website. We're gonna talk about a bunch of the tools that are really helpful.

[00:00:13] One thing to keep in mind is, if the project you're working on doesn't actually live online, doesn't have a publicly accessible URL, you're limited in what tools you can use. So for example, we can start with, I have some really cool stats. There's a WordPress plugin called W3 total cache, and they kinda did some research years ago.

[00:00:35] Which I thought was really interesting but talking about little improvements to speed and how big of a difference it can make for your brand. So google has reported, that like a half a second speed decrease costs them twenty percent traffic loss across the board. Yahoo had an article a while ago that was like less than half a second speed decrease a 5-9% full traffic page loss.

[00:00:55] And by full page it means they were hitting the page and before it finished loading they just hit back or closed the tabs, something like that. Amazon sales they report a one percent sales loss for just a 100 millisecond decrease. So I think like a lot of times, it depends on your app and it depends on your priorities.

[00:01:10] But these like performances improvements can really quickly translate money. I think people they are, if you have a faster competitor, if there's faster sites out there like people are really quick to leave to hit the back button and close the tab, try again. Cool so with this page audits, one of my favorite ones is this one called webpagetest, so it's webpagetest.org.

[00:01:33] It's this really cool site, you can put in any URL that you want and it'll give you this really
>> Jon Kuperman: These really full audit, so it's gonna hit the site, it's gonna run all these different tests on it, it's gonna give you back all these. The one thing I like about WebPage is it gives you letter grades, like you're in school, so you can just like.

[00:01:55] Did you get an A, did you not get an A, that kinda thing, it's a free service, with that you get queued up. So sometimes it takes awhile for the test to start, but anyway it's a really great, free resource. Again, this one is only available if the site that you wanna test is on a public domain, not if you're just doing local testing or something like that.

[00:02:12] So WebPage performance, you're totally right, this is like one of the most expensive things you can do, is like broadcast a live stream, and I keep hitting it. So this is for FrontEnd Masters right now with a live stream going, you can actually see that everything across the board is almost entirely A's.

[00:02:26] The time to first byte is the thing that's kind of expensive, so it gives you all this really cool stuff, like what the first view looks like when it's loaded. It shows you a breakdown of all the different content requests that are done, and what percentage they are.

[00:02:39] It just gives you this really good top-level view of what you're app, how it loads, what the waterfall is like. A lot of this stuff should look similar to the network tab that we saw. It is really similar stuff but I always like the webpage test cuz it gives you kinda the letter grades at the very top, you can kinda see how you're doing, with things.

[00:02:57] So yeah it's really great tool, it's free, I think the only real cost to it is that you have to wait, you wait your turn in line. The next one that's really cool is Lighthouse. So Lighthouse is this amazing product by a lot of the Google engineers that is now built in the Chrome Dev Tools, which is so cool.

[00:03:14] It's a really similar thing to what we've been looking at, it gives you this like really great high level view of like all these things there inside. So if we go to a side, i'll just open my local thing back up, and i'll open up the Dev Tools again, and this time i'm gonna go over to the audit's tab.

[00:03:31] And so from the audit tab we see this light house logo, so for those of you that used that awhile ago. There used to be on the audit set there were three choices i think, it was performance, best practices, SEO or something like that. It's been totally replaced by Lighthouse, so you can click on them, perform an audit button and you have all these different choices.

[00:03:49] The one thing I'll say is that selecting all five of them takes a lot longer than selecting one of them, but it is all great information. If you're building a progressive Web App it's important to check this otherwise you probably gonna get a bad grade, if it's not a progressive web App which is fine.

[00:04:03] You can check accessibility, you can check SEO you can check all this stuff let's kinda start off with performance and best practices one. So I click run Audit and what we can see in the mean time is it refreshes the page back here and then it runs this audit and starts loading all this stuff.

[00:04:18] So it gathers all this information and puts it together in this really nice presentational format, how your site's doing. Let's not be too impressed because my site is just some text on the thing [LAUGH], and I still didn't get close to 100 on this, but it's really cool.

[00:04:30] It kinda combines a lot of the things we've been seeing, so it shows you the screenshots so it shows you at like 60 milliseconds it had it's first paint, it's first meaningful paint. So you can see first meaningful paint at 50 millisecond first interactive, this is another thing.

[00:04:43] Chrome is like, they really care a lot about web performance, for a lot of reasons. They make a browser, they also make a search engine, they do ads, like all these reasons, so they're really invested in it. So, they've been coming up with these models for viewing web performance and so kinda back in the day we would look at like content loading.

[00:04:58] That was like what we would look like, how long did it take for the content to load. But now they look at a few different things where it's like when did the meaningful paint happen, because that's when your user can start reading things and seeing them, experiencing your site instead of a loading screen.

[00:05:11] Then we look at interactive, right, JavaScript is single-threaded, so if the thread is busy loading and doing stuff like that, you won't be able to. Have you ever seen a site where you can't scroll yet or you can't click on a button yet, right? It's not interactive yet, so they measure when the paint happens.

[00:05:25] They also measure when users can actually start interacting with the site, and then they measure when it's consistently interactive, sorry. So if you have a little period of interactivity and then it goes back to being plugged up, it'll go back and forth like this way. So yeah, you get these, all these things, you can drill down into them, you can learn more about any one of them.

[00:05:43] This is such a cool resource, I feel like every website, chasing a hundred is not the goal here, the goal is just like getting familiar with your web app. Is to run these tools to see wear you could improve and just start thinking about this is really easy whereas this ones gonna be really.

[00:05:59] We're like a live streaming video app we're probably gonna really struggle to get that time to first byte really great. But maybe you could inline your CSS and do all these other cool things like we've been talking about. You've got these opportunities, so it'll show you any files that are not minified, or could be minified more and so it's saying on this page I'm loading Lodash and jQuery.

[00:06:21] They are this size, and they could be saved by this size, so these are big wins, right? Like if I minified the lodash.js library, I would get a really big win out of that which is cool. Same with compression, it's saying that we've got all these things that are not compressed and how much they would be saved by GZIP compression.

[00:06:40] Which we'll get into in a minute, the kinda concept of compression and then it shows you all your past audits too, everything that you did really well on. So yeah, this is a really great tool, I love how down in the best practices you see some other things like It doesn't use HTTP2.

[00:06:53] It includes JavaScript libraries with vulnerabilities, I guess this version of JQuery has a vulnerability count. These are really cool things, and this is where I think the dev tools can add tremendous value to you as a worker. Especially at a bigger company, where you can learn how to just kinda run these tools and be like, hey did you know we're using a version of jQuery with like these two vulnerabilities in it?

[00:07:13] Make a ticket, and we should probably try to update that. Cool, and then for those that have apps that you can add to the home screen, if you don't set a short name in the manifest file it'll use the whole title, which would overflow. So again, if you don't think you have a website that people are gonna wanna save to the home screen, that's fine, but it is something to be conscious of.

[00:07:36]
>> Jon Kuperman: Cool just a little bit, this is not a PWA workshop, although that would be really fun too, but inside Lighthouse there's a really comprehensive progressive web app checklist. If you're interested in PWA's, there's a lot of great resources online. But if you're interested in making your app a PWA, you should run the Lighthouse on that.

[00:07:54] And you'll see a really comprehensive list of the things you would need to do to be a great progressive web app.
>> Jon Kuperman: Cool, and they have this little checklist, too. If you have my slides there's a progressive web app checklist, but basically it's like progressive web apps are apps that work offline, and have an icon.

[00:08:10] Can be saved to the home screen, all these kinda look good in mobile, all those kind of things. Cool, there's also this really cool tool by Microsoft called Sonar Wall, it's a open source. It does a lot of the same things that we've been kind of seeing, sonar wall.

[00:08:27] So it does very similar stuff to WebPagetester, whatever but one of the cool things about it is it goes really in depth with some of the networking stack stuff. So again, free service, you get queued we can sit here and wait for it to queue and then it gives you like a ton of different information.

[00:08:43] Again the goal is not to chase a hundred, right, like every web site you can go to google.com and it's not gonna be all a hundreds. Just some suggestions, things might be applicable might not be applicable so we'll give this a minute let it run. And do it's thing and then we'll just do a little analysis of my JonKuperman.com which is a static site.

[00:09:02] It's such a cool service though and I just learned about it like six months which is why I like,
>> Jon Kuperman: Okay this one did finish, cool, so now that it's finished we can take a little look through all the information that it gives you. So again, it kinda gives you this nice overview like a warning, 20 errors, how long it took to scan, which is maybe more indicative of itself than the website you're testing.

[00:09:29] But it's cool, so it'll do accessibility checks, interruptibility stuff, so it's like, here it gives this one error we can expand that, the meta tag is not needed. So I've got this UA compatible thing I guess that's not necessary and then it's really cool it links to documentation.

[00:09:47] It's really thorough about all the stuff they're testing, same things that we've been seeing right, like http. These are really all roads to the same path whatever tool, whatever UI works best for you. So kind of again, this could be compressed in some way, same with all of these.

[00:10:05] PWA, I don't have any touch icons specified, so you couldn't save anything, security, we got some errors. So content type did not specify so these are like secure headers that they recommend setting for every website that I'm not setting on my website. So these could be really important too,

[00:10:25]
>> Jon Kuperman: Adding like no opener and no refer to a lot of these, actually it would be interesting to see why that is a security issue. Yeah it looks like it just wants these, so you'll start seeing patterns and again we could look into this. Like why do links need to have these 'rel' values, I don't know.

[00:10:45] I'd be really interested in reading the documentation finding out but then it's up to you whether you implement those or not. So again we're just not chasing for 100 on the tools that we're using as much as to gain better insight about our app.