FREELessons: 15Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Audits

DevTools contains a bunch of predefined performance metrics. In this lesson we’ll use them to evaluate our page, and discover what the suggestions mean.

Related Links

3.5 Audits

Hey everyone. In this lesson we're gonna take a look at the audits panel. The audits panels contains a set of predefined recommendations for your page. You can run an audit on a webpage, and get suggestions for how to improve it in regards to performance. But I believe there are a few Chrome extensions which add a few audits. To be safe, I like to always reload the page and audit on load. So I'll select that, run, the page will reload. The audits will be evaluated, and we now get suggestions. Note there are two categories, network utilization, and webpage performance. Red is potentially serious and should definitely be looked into, orange, maybe you can treat as more of a warning or an informational tip. Let's check this out. Combine external JavaScript. We can open that up and it actually tells us how many JavaScript resources were served, and eight is quite a high number. But first, I'd like you to keep in mind that this website to-do MVC is dedicated to showing good JavaScript architecture. This is primarily aimed at web developers who want to understand some best practices. So in this case, it's probably intentional that they haven't concatenated and minified all these scripts, so that we are able to view the page, and actually view the source easily. Now, how can we verify that there are eight JavaScript resources? Well, if you remember, we can go to the network panel and use the advanced filtering that we saw. So if we filter it by to do mvc and finally apply basic filter of Scripts. As you can see right at the bottom it confirms that there are eight resources being shown, so this is correct. Of course on a production website, you could use a JavaScript task runner or build system like Grunt or Gulp to actually concatenate all these scripts into one. How about leverage browser caching? What's that about? Well, it's actually giving us the resources and note that these are clickable, and it's suggesting to us that we can improve the cachability of these. So, let's go check that out. Go to the Network Panel, click on a Resource, scroll down a bit to the response headers, we can see that the Cache control is max age 600 which is fairly short. This is typically something you'll sort out on your server or CDN. What else do we have? Remove unused CSS rules is an interesting one because, not only are you told a percentage of rules which are unused on the current page, but you're even given the selectors, in question, which is really cool. We can also click on the file, for me, 15% isn't too high. And the simple fact of avoiding the HTTP overhead of requesting another file on a separate page which won't not be cached, might not make this worth it. So again, a lot of these aren't necessarily hard rules which everyone should follow blindly, but rather, recommendations and suggestions for how to improve the performance, which we'll need to evaluate on your own website. Let's take a look at another example. Here I'm on the Wikipedia page, and I'm gonna again, Reload the Page and Audit on Load. This is an interesting suggestion, use normal CSS property names, instead of vendor prefix ones. So it's actually paused our CSS, and as you can see here, web ca, box shadow is used but box shadow is supported. Now if we go to and have a look at box shadow, we can see in almost all modern browsers it is supported in an unprefixed state. What's nice about this is that these are also clickable. What about serve static content from a cookieless domain? Well, let, let's explore this. As you know, HTTP requests can have associated cookies with them, and if it's on the same domain, it means cookies at that domain originally set will still be sent, in this case we're requesting content along with a cookie, but this cookie might in fact now be needed. Maybe if for example we were downloading content where the response depends upon whether or not I'm authenticated for example, then it would make sense. But in this case for a simple static asset, by hosting it on a different domain, you can remove the need for HTTP cookies to be sent. Now these network utilization and work page performance orders are great, don't get me wrong. But I also want to bring your attention to PageSpeed Insight. PageSpeed Insights is; a free service where you can simply past your URL in, and it will analyze it for you. And very similar to the audits panel, it give you re, it will give you recommendations on how to improve the performance of your page. So here, an analysis of the Wikipedia page is finished and it's made some suggestions. It even gives me a preview of what it looks like on a device. Optimize images is always a good suggestion. It even gives us the files in question, and it tells us a percentage reduction that they would benefit from were we to optimize it. In this case, we could do something like image optim. You also see rules that have passed. By the way, it's really good that they put some emphasis on the mobile suggestions, cuz note mobile suggestions and desktop are slightly different. So what the raw menu of the services which can evaluate the performance of your webpage, such as the audits panel, or PageSpeed Insights, or webpage test, for example, it's always good to be aware of what the dev tools does offer. Thanks for watching, I'll see you in the next lesson.

Back to the top