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

Answer 1

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/

Answer 2

Have a look at the following article I wrote on Javascript Performance Optimization Techniques.

For page load time on mobile devices the most relevant section is Managing and Actively reducing your Dependencies. Some techniques here are:

• Write code that reduces library dependencies to an absolute minimum.
• Use a post-load dependency manager for your libraries and modules.
• Minimize and combine your code into modules.

For UI responsiveness you want to focus on Reducing interaction with host (DOM) objects, and techniques around Maximising the efficiency of your iterations. Some key ones are:

• Keep your HTML super-lean (get rid of all those useless DIV and SPAN tags)
• Store pointer references to in-browser objects.
• Reduce calls to modify DOM to an absolute minimum, especially styling changes.

The other sections there are all useful around different aspects of creating an optimized and responsive UI. Hope you find them useful.

Answer 3

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.