Google has just open sourced Page Speed, a tool used internally by Google to optimize their web sites, especially the speed web pages are loaded with.
Page Speed is a Firefox add-on running in Firebug. The tool runs on Linux, Mac and Windows XP/Vista. When it runs, Page Speed analyzes some of the web server’s configuration plus the code downloaded from the server and creates a list of results including suggestions on how to improve the web pages. The analysis is based on a list of best practices organized in five categories:
- Optimizing caching — keeping your application's data and logic off the network altogether
- Minimizing round-trip times — reducing the number of serial request-response cycles
- Minimizing request size — reducing upload size
- Minimizing payload size — reducing the size of responses, downloads, and cached pages
- Optimizing browser rendering — improving the browser's layout of a page
These practices consider the page load time, the time between a page request is issued and the moment it is served as seen by the client. The page load time includes creating TCP connections, solving DNS names, sending requests, fetching resources including those from cache, executing scripts, rendering.
The suggestions offered by the tool are:
- Avoid CSS expressions
- Combine external CSS
- Combine external JavaScript
- Defer loading of JavaScript
- Enable gzip compression
- Leverage browser caching
- Leverage proxy caching
- Minify JavaScript
- Minimize cookie size
- Minimize DNS lookups
- Minimize redirects
- Optimize images
- Optimize the order of styles and scripts
- Parallelize downloads across hostnames
- Put CSS in the document head
- Remove unused CSS
- Serve resources from a consistent URL
- Serve static content from a cookieless domain
- Specify image dimensions
- Use efficient CSS selectors
The suggestions are scored and sorted by priority. An example, when loading Facebook’s home page, the following high priority suggestion is given: “The following external CSS files were included after an external JavaScript file in the document head. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.”
The Page Speed Activity panel shows all browser’s activity including network events and JavaScript code execution measured in ms. This is useful to see where the browser spends most of the time when trying to load a certain page. Overall, Page Speed seems like a must-have tool for web developers.