Optimizing performance of rich media pages is important for performance and can significantly affect perceived performance particularly over narrow links such as mobile. Unfortunately the manual tuning can be quite time consuming and can even lead to having the code be less maintainable as files get jammed together to avoid round trip latencies. Fortunately Google has provided a solution that can implement the majority of tuning recommendations at runtime optimizing even pages generated by third parties and shrink wrap packages, Google PageSpeed mod.
What PageSpeed does is install into your Apache server and it analyzes the markup and images as it goes by and rewrites it to improve performance, the whole install process takes only a few minutes.
https://developers.google.com/speed/pagespeed/module/download
Once in place you can activate various filters to optimize performance, I will go over a few but you can find the entire list at
https://developers.google.com/speed/pagespeed/module/config_filters
combine_js, combine_css
These two are extremely handy and allows you to manage CSS and JS assets one way but deliver them to clients another way. Typically when doing rich development you are going to need some Javascript libraries above and beyond jQuery. Each of these libraries are usually small but they also often come with their own CSS styles needed to format the output of the plugin. Ideally we would package them all up and serve them as a single file and avoid the need for multiple round trips to the server (latency is a bear especially on mobile). Unfortunately smashing the files together makes any upgrading significantly more complex, you can’t just remove the old version and drop a new one in. With pagespeed you can have the plugin automatically combine CSS and JS on the fly. It then caches the combined files to promote speedy service in the future. So you can have your cake and eat it too, separate files for management single files for delivery.
inline_images, inline_css, inline_js
These three are also handy and work much like the combine does but potentially eliminating round trips all together. The mod will actually look at the size of the css/js/image and based on a user specified threshold you can eliminate the trip back to the server entirely. This is particularly helpful in the case of the images. Remember sprite management, sticking a whole set of images unto one large image then using css windows to point to different parts of the larger image? It was painful and a total hassle and made image maintance a chore. Now we can take the simple route for management and just have it all optimized for us with virtually no effort.
rewrite_css, rewrite_js
How I hate dealing with minified code. It adds steps to every change and deployment and the soft connection between the “real” code and the minified code is always an issue for curious errors popping up in downstream environments. Happily with pagespeed having to deal with minified code is a thing of the past. Turn on these filters and your JS and CSS can be automatically minified. You can keep the “normal” copies on your server and even deploy them then they get minified and cached at runtime with pagespeed. It is important to note here you should also be using mod_deflate to gzip your minified files, they are additive compressions so doing both achieves the maximum compression.
recompress_images, convert_png_to_jpeg, resize_images
This can on the fly convert images to their optimal web service format going as far to resize large images that for whatever reason has been tagged with a height and width smaller than the actual source image. Many a time have I sat down to optimize a client’s page and found they had some giant image uploaded and then restrained by a fixed height and width. We can say “you shouldn’t do that” and it is true but it happens often enough that it is a problem I would rather not have to deal with, and now, largely – I don’t.
Analytics
PageSpeed also has hooks to the very popular Google analytics. When dealing with 3rd party and shrinkwrap applications it can be tricky to get page metrics as the majority of solutions involve adding a little JS to the page to call the analytics server. With PageSpeed you can add the google analytics JS to all pages served automatically enabling you to track applications without the need to update them or without even bothering to do it on your own applications.
Admin pages
PageSpeed also has a bunch of diagnostic pages to let you see how the mod is running, there are three admin screens
The Console which covers cache hit ratios and rewrite success vs failure.
Statistics which includes much more detailed runtime statistics
And Messages which covered the detailed logging of the PageSpeed activity
As mentioned before PageSpeed has many more options these are just a few of the basics to get you started. Proper use of this mod will make your pages both faster while still being easy to develop and maintain, a win win. Thanks for the help Google!
