mod_pagespeed is an open-source Apache module that make Apache rewrite and resize your assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow.
mod_pagespeed is built on PageSpeed Optimization Libraries, deployed across 100,000+ web-sites, and provided by popular hosting and CDN providers such as DreamHost, GoDaddy, EdgeCast, and others.
mod_pagespeed works is using input/output filters that attaches them selves to the Apache kernel, these filters filters and rewrites data from http requests and response. It looks at the content and caches optimized versions of your assets (Images, CSS and JavaScript)
A good example of this is when someone use a large image for a thumbnail and resize it in the html code instead of making a smaller copy of the image. This makes the visitors download a much lager image than they need to, which takes up bandwidth and adds to the loading time of the page
<img src="/images/huge-image-3264x2448.jpg" alt="" width="100" height="75" />
One solution would be to make smaller versions of the image, either using php or another server side language when the image is uploaded or manually, which is a painstaking process. But with mod_pagespeed there is no need for either of this, since it resizes images on demand.
So how does this work?
The first time a page is requested apache sends the original page, the content goes through the output filter which parse the html code, when the parser see a img tag it checks if this image with this dimensions are in the cache, if not, the original image is sent, and the image is added to the queue for later processing.
Later processing?
This is a process that runs in the background so it wont affect the page speed. This process creates an optimized scaled down version of the image using the height and width from the html code, and saves it to the cache.
Next time this page is requested, the parser finds the image in the cache and rewrites the img tag on the fly, making the browsers download the much smaller optimized version of the image.
<img src="/images/huge-image-3264x2448.jpg.pagespeed.ce.o7p2Hd5wij.jpg" alt="" width="100" height="75" />
Notice what happened to the filename there, the output filter appended a string containing the tag pagespeed and a hash, when the browser requests an asset with the tag pagespeed the input filter will know this is a cached asset and will use the cached resource instead of the original.
Is that all it does?
No-no, it also compresses the images by lowering the quality of them to an acceptable value if set, and optimizes images by removing meta-data.
mod_pagespeed also works with css and javascript files, removing whitespace and comments, this allows you to have readable files with comments if you like, saving you the trouble of minification.
It also concatenate serveral files into one file. This is great for WordPress blogs with alot of plugins, since they tend to have a lot of extra javascript and css includes.
There are 40+ available optimizations filters, which include:
- Image optimization, compression, and resizing
- CSS & JavaScript concatenation, minification, and inlining
- Cache extension, domain sharding, and domain rewriting
- Deferred loading of JavaScript and image resources
- and many others…
