The Audits tab will give you suggestions on how to increase page performance, responsiveness, and more.
Simple click the Run button in order to kick off the audit! You'll see a loading bar indicating the status of the audit.
You'll receive back Google Chrome's suggestions on how to optimize your website.
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. 😎
