Question

Twitter’s new HTML5 mobile site on iPhone is blisteringly fast in the mobile browser. What techniques are they using to create a near-native experience for their site?

Answer 1

It is blazingly fast, and there’s a lot of techniques used to make that happen. Let’s cover some of them:

Minimize HTTP Requests

So starting out simple and viewing the source, you’ll a huge mess of…everything. They’re doing some server-side fanciness to include all the CSS and Javascript on the HTML page. The benefit of this is a single request gets you all the initial layout code. That’s why the page is black when it’s first loaded. Minimizing HTTP Requests is one of the best ways to improve site performance, and there are a host of techniques related to it (CSS compression, Javascript compression, creating a spritemap..)

Which brings us to:

Create a spritemap.

Take a look at sprite.png included in the network traffic. It has all the icons. A list apart does a pretty good job of explaining how this works:

http://www.alistapart.com/articles/sprites

The simple explanation is you have a large graphic, and use CSS to create a window looking at only one specific piece of it. Having a single graphic again serves to minimize HTTP Requests.

Use CSS3

Of special interest, and you can research this further with twitter bootstrap, are the buttons. The buttons are not graphics; they are CSS3 gradients (with a graphical icon layered on top). Any device being served this page should support CSS3 gradients, so it’s a safe and light way to create a nice interface.

Lazy Load

The background image takes a second to appear, because it’s requested via Javascript after the fact. That’s the final fanciness – anything heavy like big images are only requested once the page is ready to use.

Hope this helps, ask questions if you have any!