What have you done to make metro mobile load quickly?

Most importantly metro mobile is presented to the browser is composed as a single HTML file with inline images (as data URIs), JavaScript, and CSS. For development purposes the images, JavaScript, and CSS are separated into multiple files and are compiled into one file via server side includes. I have done this because mobile networks have high latencies, and by presenting one single file the mobile browser can display the file with one single HTTP request, eliminating any additional HTTP roundtrip requests.

Doesn't inlining all the images, JavaScript, and CSS prevent the browser from downloading resources in parallel? As a result doesn't this mean the page takes longer to load?

Yes, inlining the resources does mean that the browser doesn't download any resources in parallel. However, mobile networks tend to be high latency, higher bandwidth internet connections. Round trip ping times of 200 or 300 ms are common, and 600 ms latencies are not unheard of. If you assume two additional round trips to download resources, by inlining the images, it reduces the total time to load a page on a network with 600 ms latencies from almost two seconds, to below one second. Additionally the file size increase from BASE64 encoding which is required to inline the images is mitigated by gzip compression. The net difference of the gzipped images versus the BASE64 encoded gzipped images is 17 bytes, or less than 1% of the file size of the images. Finally, by inlining the CSS and JavaScript the gzip compression is greater than if the files were served separately.

Don't you use any compression of the files?

I use several different types of compression. The CSS and Javascript are compressed by YUI Compressor. The HTML file is compressed by htmlcompressor. The graphics are compressed by PunyPNG. Finally, I have used a custom script to take all global HTML, CSS, and JavaScript objects and reduce the object's name to two characters. After this is all said and done this reduces the main metro mobile page by 40% from 29.5k to 17.5k. Additionally, if the web browser supports HTTP gzip compression the transmitted file size will be reduced to 8k resulting in a net 72% compression ratio.

How does metro mobile determine the nearest stop?

It obtains the nearest location using the HTML5 Geolocation API, then uses this to obtain a list of the nearest stops via OneBusAwayAPI.

What development environment have you used?

I have utilized GNU Emacs 22.3.1, Bazaar, and Safari 5.0's Web Inspector. I've not used the C-x M-c M-butterfly command, but I intend to utilize this in the version 42.42 of metro mobile.

Where do I find the uncompressed version of metro mobile?

The uncompressed version is provided at http://www.inmff.net/mm/, additionally a version before the files have been combined via server side includes is available at http://www.inmff.net/mm/nossi.

Where is metro mobile hosted?

metro mobile is hosted at digital.forest in South Seattle.

What is on the roadmap for metro mobile?

I've got more ideas up my sleeves, but I can't tell you everything!

I've got more questions!

Send them along on the contact page.

---