Cityrider49

jQueryMobile & Base64: Going Big For Speed

• by Paul Wheeler
• Sunday, May 22, 2011

I have been playing with the jQueryMobile (http://jquerymobile.com/) Alpha release since it was first available to the general public. I have really enjoyed how it has simplified mobile user interface development in a format that takes advantage of server optimizations such as GZIP and extended caching. (Note: Check out the "Webserver Configs" at http://html5boilerplate.com/ for more information)

Below is a simple mobile user interface that I have been trying out a few ideas:

Nothing too fancy but similar to other mobile websites that require registration. 

jQueryMobile is a small framework that consists of two JavaScript libraries (jquery-1.6.1.min.js and jquery.mobile-1.0a4.1.min.js), one CSS library (jquery.mobile-1.0a4.1.min.css) and a handful of PNG images. To really leverage the framework I copied the .HTACCESS settings from the HTML5 Boilerplate framework into the HTTPD.CONF configuration file of my Apache server. Between GZIP wrenching out the last little byte savings and the extended caching rules, the performance over a variety of connections has been good as you can see from the network resource screen captures from Firefox and Safari:

FireFox 4

Safari

But I started to wonder if I could really put the spurs to it. 

After shrinking the HTML as much as I could and double checking the optimization of the PNGs that were being used by the framework, the only opportunity I could see was reducing connections.

To save two calls to the external PNG files I replaced the external "background-image" image URLs in the CSS with their Base64 encoded equivalents. This change would increase the size of the CSS but allow the images to travel with the CSS, thus reducing the number of external references. And since I was leveraging GZIP, the compression would offset the transfer size a little.

The change resulted in a 10 to 30ms improvement in download times as shown in these network resource screen captures from Firefox and Safari:

FireFox 4

Safari

I know this doesn't seem like much in the high speed desktop world but on a WiFi or cellular network where latency can be high, this is a decent improvement.

More compatibility testing needs to be performed but this technique in conjunction with other strategies such as GZIP, long cache expirations and content delivery networks (CDNs) should provide a great mobile experience for the end user.

You can find my test CSS file here: http://www.cityrider.com/jquerymobile/jquery.mobile-1.0a4.1.base64.min.zip

Comment & Older Posts »