Automatically Speed Up Your Site with mod_pagespeed for Apache
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
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
- 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.
- 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:uri scheme below a default (2048 bytes) or specified threshold. The filter does not currently optimize GIFs or 1x1 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.
- 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.
- 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.
- 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."
By website optimization on 12 Nov 2010 AM