• 8 hours
  • Easy

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 12/17/18

Audits

Log in or subscribe for free to enjoy all this course has to offer!

The Audits tab will give you suggestions on how to increase page performance, responsiveness, and more. 

Launching an audit
Launching an audit

Simple click the Run button in order to kick off the audit! You'll see a loading bar indicating the status of the audit.

Audit in progress
Audit in progress

You'll receive back Google Chrome's suggestions on how to optimize your website.

Audit suggestions
Audit suggestions

More severe items are marked at the top in red, and less urgent items are down below in yellow. The first part deals with Network Utilization, or how long it takes to load the page. Let's go through each item suggested to the New York Times by Chrome.

Network utilization

Combine external JavaScript

You should probably compile all your JavaScript into one file as it loads into your page (no need to actually write all your JavaScript or CSS in one place! Just make sure it's in as few places as possible as your page loads in production).

Enable gzip compression

You know how you can zip up files on your computer using the extension .zip? Same concept! Learn more about GZIP and data compression in general

Leverage browser caching

Cache what you can so users don't have to load the same stuff from zero every time they access your page. Be smart about what you cache though; there's no point in caching something that is constantly updated.

Minimize cookie size

Pretty self-explanatory.

Parallelize downloads across hostnames

Loading content from resource takes time. The more you can distribute your resources across multiple hosts, the better, because this lets the browser open up connections without crashing a single responsible server. 

Specify image dimensions

Specifying the height and width of your images within the img tags means Chrome can load your page without waiting for the actual images themselves, since it already knows what their dimensions will be. If you don't do this, Chrome will squeeze them in awkwardly later.

Optimize the order of styles and scripts

Put CSS in the document head

Chrome is constantly evaluating whether it already knows a certain style rule every time it sees one. If you include the CSS rules at the very beginning of your document (therefore, in the head), Chrome obviously knows immediately what it's dealing with and spends less time searching.

Remove unused CSS rules

The less CSS rules, the better. CSS organization is important!

In the next activity, you'll take all these tabs for a spin on your own favorite website. 😎

Example of certificate of achievement
Example of certificate of achievement