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.
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.
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.
There are 40+ available optimizations filters, which include:
- Image optimization, compression, and resizing
- Cache extension, domain sharding, and domain rewriting
- and many others…