mod_pagespeed is an open-source Apache 2.2+ module designed to automatically speed up your site by optimizing the various components of your web pages. The module does this by rewriting page resources using filters that adhere to web performance best practices. mod_pagespeed is the server version of the client-side Firefox module that analyzes web pages using similar best practices.
How mod_pagespeed Works
mod_pagespeed utilizes a number of filters to optimize HTML, JavaScript, CSS, and JPEG and PNG images, as well as set better caching policies. mod_pagespeed rewrites resoruces into a server-side cache to be delivered instead of the original resources, so it is important to configure caching on your server correctly. The module essentially takes existing page resources and trims excess fat (unused resources in images for example), and improves caching (hashed resources with long expiry times). By configuring caching and HTTP compression and using mod_pagespeed, webmasters can speed up their sites by serving optimized resources.
mod_pagespeed Filters
This module is configured similarly to other Apache modules, using the pagespeed.conf file. The configuration file turns on and off the filters, and allows webmasters to fine tune threshold settings used by the various filters. A summary of the initial filters is shown below:
- Add Head
- Adds an XHTML head section to the document if it finds a
<body>tag before finding a<head>tag. This filter is used to make sure there is a place for other filters to write tags into the HEAD of XHTML documents. - Add Instrumentation
- Inserts two small snippets of JavaScript (early in the head, and late in the body) to measure the time the client spends loading and rendering a page, and reports this data back to the server.
- Collapse Whitespace
- This filter replaces contiguous whitespace with a single whitespace character to reduce the transfer time of HTML files.
- CSS Combine
- The CSS Combine filter reduces HTTP requests by combining multiple external CSS files into one concatenated CSS file.The filter operates within the scope of a “flush window.”
- Combine Heads
- Although technically a no-no in XHTML, there are web pages out there that have multple head elements. This filter combines them into one.
- Elide Attributes
- This filter removes attributes from tags when the specified value is equal to the default value of that attribute.
- Extend Cache
- The “Extend Cache” filter extends cache lifetimes for all resources that are not otherwise optimized. This filter rewrites the URL referenced in an HTML page to include a hash of the resource. It also rewrites the HTTP header to extend the max-age value of the cacheable resource to one year. mod_pagespeed uses the origin cache TTL to periodically re-examine content to see if it has changed. If so, the hash of the content will change. This mechanism makes it safe to serve hashed URLs with a long timeout. So if a site owner changes a resource, the hash to the resource will change after the specified TTL. Note that this filter is included in other filters that optimize resources.
- Inline CSS
- The “Inline CSS” filter moves smaller external CSS files into the HTML file, to save HTTP requests. This filter inlines CSS files below a specified byte threshold.
- Inline JavaScript
- The “Inline JavaScript” filter works similarly to the Inline CSS filter. It saves HTTP requests by inlining small external JavaScript files directly into the HTML file. This filter only inlines script below a specified byte size threshold, and only those scripts without both source and inline data, and on-domain JavaScripts.
- Minify JavaScript
- This filter minifies JavaScript code to reduce file size. It currently removes most whitespace and comments. This filter allows webmasters to “prettify” their JavaScript to be more legible with indents etc. and still have minified files without the extra step of minification.
- Move CSS to Head
- This filter moves all external CSS to the head of the HTML document. This filters aims to minimize the number of times a browser must re-flow a document by ensuring that all CSS is parsed in the head before any body content is encountered. Like some of the other filters in mod_pagespeed, this filter works in the scope of a “flush window.” A flush of the output buffer is used to deliver initial content faster, and to increase the apparent response time of web pages (feedback).
- Optimize Images
- The “Optimize Images” filter re-scales, re-compresses, and strips metadata from JPEG and PNG images. It also inlines images using the
data:urischeme below a default (2048 bytes) or specified threshold. The filter does not currently optimize GIFs or 1×1 pixel images. You should also turn on the insert_imagedimensions filter to ensure fast rendering of images. - Outline CSS
- This experimental filter is the opposite of Inline CSS. It takes inlined CSS larger than a minimum byte threshold and makes it into an external resource. Outlining CSS can save bytes across multiple pages that use the same inlined CSS by caching the outlined CSS file.
- Outline JavaScript
- This experimental filter works similarly to the Outline CSS filter. It takes inlined JavaScript larger than a minimum byte threshold and makes it an external resource.
- Remove Comments
- This filter removes most comments from HTML files. The filter is aware of Internet Explorer’s conditional comments, and will not remove these.
- Remove Quotes
- This filter removes unnecessary quotation marks from HTML attributes. Note that XHTML requires quotes around attributes.
- Rewrite CSS
- This filter minifies inline and external CSS by stripping out most whitespace, and shortening color names. The example shows #ff0000 shortened to red, it isn’t clear if shorthand hex notation is also used for this filter (i.e., #ffcc00 becomes #fc0). Note that this filter should be used with caution on malformed or proprietary CSS.
Conclusion
mod_pagespeed is a welcome addition to our web performance toolkit. It automates a number of techniques webmasters either do manually or automatically with shell scripts. While no substitute for recoding pages using CSS sprites, conversion to CSS behavior from JavaScript (drop-down menus for example), substituting CSS layout for table layout, and modular CSS techniques, mod_pagespeed will trim the fat, reduce HTTP requests, and intelligently extend caching policies for your web page resources.
Further Reading
- Make your websites run faster, automatically – try mod_pagespeed for Apache
- Official announcement of the mod_pagespeed Apache module by Richard Rabbat, Product Manager, ‘Make the Web Faster’ initiative at Google. Last year Google introduced Page Speed, a client-side analysis module that analyzes web pages for performance issues. On November 3, 2010 Google’s official blog announced mod_pagespeed, which incorporates 15 on-the-fly optimizations derived from web performance best practices. Initial tests by Google showed speed improvements of up to 50%, or 2X faster on average across a rough sample of web sites.
- modpagespeed.com
- Official website for mod_pagespeed, offers before and after examples of each filter.
- mod_pagespeed documentation codebase
- “mod_pagespeed is an Apache 2.x module. It is added into an existing Apache installation, and configured with the pagespeed.conf configuration file. mod_pagespeed can be installed from source or binary form.”