Performance Toolbelt: Page Speed
Like it’s older brother YSlow, Page Speed, released by Google in in mid-2009, is primarily a tool to audit and analyze the performance of your site. However a closer looks shows that there is in fact a lot more that Page Speed can do.
What Does It Test
Page Speed analyzes the performance of a page based on a set of 26 rules (as of version 1.7) that Google has documented. Each rule is given a priority code based on how great the potential impact would be on the page load time. Once Page Speed has determined which rules are broken, it gives the page a score between 0 and 100, which can be exported in JSON format, or sent straight to ShowSlow.com - a tool for recording YSlow and Page Speed scores over time.
The rules range from common rules like optimize your images, to lesser known techniques like defining a character set early. A complete list of the rules Page Speed checks for is below:
Combine external CSS
Minimize DNS lookups
Leverage browser caching
Remove unused CSS
Leverage proxy caching
Minify CSS
Minify HTML
Minify Javascript
Specify image dimensions
Serve static content from a cookieless domain
Use efficient CSS selectors
Avoid bad requests
Combine external JavaScript
Enable compression
Minimize redirects
Minimize request size
Optimize images
Optimize the order of styles and scripts
Put CSS in the document head
Serve resources from a consistent URL
Serve scaled images
Specify a character set early
Avoid CSS expressions
Defer loading of JavaScript
Parallelize downloads across hostnames
Specify a cache validator
What Else Can It Do
Like I said, while auditing may be the most well known feature of Page Speed, it is far from being the extent of its capabilities. In addition to performing a basic audit of your page, Page Speed automatically optimizes the Javascript files, CSS files, and images that it finds on the page, and saves them to a folder on your computer (which you can specify). It also has the ability to profile deferred Javascript files - something it does not do by default.
Perhaps the most fun though comes when you use the Page Speed Activity panel. At it’s most basic usage, the activity panel lets you record a timeline of all the browser activities, including both network activity and Javascript processing, that take place during the time you choose to record. That means that you get detail like how much time was spent connecting to the server, and how much time was spent executing the Javascript.
The activity panel also allows you to see a list of all the Javascript functions that were instantiated, but not called, during the recording period. This information could help you determine what portions of your code are not necessary immediately so that you can choose to load them later, allowing you to further improve your load time. You can also record “paint snapshots” in the activity panel which highlight each element in a page as it is rendered.
While the advanced features offered by the activity panel are very useful, it’s important to keep in mind that they do slow down the Page Speed plugin a little. Since they add a little bit more overhead, the timeline will not be 100% accurate and will serve you better as a relative reference than an exact approximation of the time it takes your page to load.
It’s Open Source Too!
Just recently, the Page Speed SDK was released as open source. Already, Steve Souders has demonstrated the usefulness of this by building HAR to Page Speed - a tool that will apply the Page Speed rules to a HAR (HTTP Archive specification - a format gaining popularity) file you upload.
By opening the SDK up to open source, the potential is there for developers to build cross-platform tools that would allow people to analyze the performance of their site according to the Page Speed rules, regardless of the browser in use. It’s going to be exciting to see what other tools get built around the SDK as it continues to evolve.