What techniques can I use to make JS-heavy pages performant on mobile devices?

Question

I have a site that involves a large amount of JS code (~100K including jQuery). When I browse similar sites on my phone or tablet, I'm usually disappointed at how sluggish they are. I want my site to perform well on mobile devices (in terms of both page load time and responsiveness), without developing a separate "mobile-friendly" version of the site or swapping out large portions of code.

Of course, there are countless performance techniques that are applicable to all environments. What I'd like to hear are things I might want to do for performance in a mobile/cellular environment that I would not want to do in a desktop/broadband environment.

Here are a couple of examples of what I'm looking for:

• Setting jQuery.fx.off = true to skip animations
• Disabling intensive CSS effects like box-shadow, text-shadow, and border-radius

What else?

Answer 1

Latency is the killer in the mobile environment so one of the first things to concentrate on is reducing requests, for example:

Inline the CSS and JS, then split them out and cache in localstorage (Bing mobile does this)

Alternatively inline the JS and wrap in comments then remove the comments and eval the JS (Mobile gmail used to do this - don't know whether it does)

Use data-uri's for images

Switch from jquery to a slimmer framework like zepto.js

Don't use large -ve offsets to hide items from view.

If you find @standardista's presentation from Velocity EU, it contains a whole series of other thoughts.

Answer 2

You are not really going to be able to find optimizations that are specific only to mobile devices. The two that you mentioned, disabling animations and intensive CSS effects, will just as well work to increase responsiveness on a slow desktop PC. Similarly, any other optimization you can make to target a mobile device will also improve performance on a desktop PC.

With that said, the only semi-optimization I can think of that greatly benefits mobile devices in particular is to reduce your page's physical size. This is so that people don't have to waste time zooming to different parts of your page.

Also, to add to your list, I highly recommend using Minify: http://code.google.com/p/minify/