Saturday, October 29, 2011

Integrating Google Page Speed in your Web site build

Google Page Speed is a great tool to help analyze and optimize the performance of your Web pages. It's actually a family of tools:

- Page Speed Chrome and Firefox browser extensions complement Firebug and analyze the performance of your Web pages right from your Web browser.

- Page Speed Online analyzes the performance of your Web pages too without requiring a browser extension.

- Mod_pagespeed is an Apache HTTPD extension module that optimizes, rewrites and minifies your Web pages on the fly.

- The Page Speed Service is a proxy hosted by Google which optimizes and delivers your Web pages from Google's servers.

- The Page Speed SDK allows you to embed the Page Speed analyzers and optimizers in your own project.

If you're paranoid (don't want your Web site to depend on Google's Page Speed servers) and CPU + memory conscious (don't want to spend resources / $$$ running mod_pagespeed on your HTTP server) you can also run Page Speed on your pages ahead of time when you build your Web site.

It's pretty simple. Here's how I'm doing it on Linux using GNU Automake and Apache HTTPD (I'm sure that can be adapted to other environments):

1. Download and build the Page Speed SDK, like this:
build=`pwd`
curl -OL https://dl-ssl.google.com/page-speed/sdk/current/page-speed-sdk.zip
unzip page-speed-sdk.zip
cd page-speed-1.9
make builddir=$build/page-speed-1.9-bin


That'll build two useful command line tools: minify_html_bin, an HTML rewriter / minifier which also minifies inline CSS and Javascript, and jsmin_bin, a Javascript minifier which also works well for CSS.

2. Write the following in your Automake Makefile.am file:
minified = htdocs/index-min.html htdocs/foo-min.js htdocs/bar-min.css

sampledir = ${prefix}
nobase_dist_sample_DATA = ${minified}

SUFFIXES = -min.html -min.js -min.css
.html-min.html:
    ../page-speed-1.9-bin/minify_html_bin $< $@

.js-min.js:
    ../page-speed-1.9-bin/jsmin_min < $< > $@

.css-min.css:
    ../page-speed-1.9-bin/jsmin_min < $< > $@

CLEANFILES = ${minified}


I won't go into the Automake specifics now but these rules will run the Page Speed minifiers on your Javascript, CSS and HTML pages as part of your Make build. I'm using a simple naming convention for the minified files, index-min.html is the minified version of index.html.

3. Add a DirectoryIndex directive to your Apache HTTPD httpd.conf config file:
DirectoryIndex index-min.html index.html

That tells HTTPD to serve /index-min.html (the minified page) instead of the original /index.html page when a user points his browser to http://yourwebsite.com/.

4. Reference foo-min.js and bar-min.css in your HTML pages instead of foo.js or bar.css for example.

5. After making changes to your Web pages, build your site like this:
make

If you had /index.html, foo.js, and bar.css, you should now have /index-min.html, foo-min.js, bar-min.css, all nicely optimized, rewritten and minified by Page Speed.

To clean up the minified files, run:
make clean

That's it. That little trick should normally save you from 30% to 50% bandwidth, CPU, memory and disk space on the client devices that access your site (particularly useful with resource-constrained mobile devices) and on your HTTP server too (which now serves smaller files).

Hope this helps

No comments:


The postings on this site are my own and don’t necessarily represent positions, strategies or opinions of my employer IBM.