What methods can I use to execute JS-heavy pages on mobile devices?

Question

I have a website that includes a lot of JS code (~ 100K, including jQuery). When I browse such sites on my phone or tablet, I am usually disappointed in how lethargic they are. I want my site to work well on mobile devices (in terms of page loading and responsiveness ), without developing a separate "mobile" version of the site or replacing large parts of the code.

Of course, there are many performance measurement methods that apply to all environments. What I would like to hear is what I would like to do for performance in a mobile / cellular environment that I would not want to do in a desktop / broadband environment.

Here are some examples of what I'm looking for:

• Setting jQuery.fx.off = true to skip animation
• Turn off intense CSS effects like box-shadow , text-shadow and border-radius

What else?

Answer 1

Delay is a killer in a mobile environment, so one of the first things to focus on is reducing requests, for example:

Paste CSS and JS, then separate them and cache in localstorage (this is done by Bing mobile)

Alternatively, embed JS and wrap comments, and then delete comments and evaluate JS (mobile gmail used for this - don't know if it does)

Use uri data for images

Switching from jquery to finer structure like zepto.js

Do not use large offsets to hide elements from the view.

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

Answer 2

In fact, you won’t be able to find optimizations specific to mobile devices only. The two you mentioned, disabling animations and intense CSS effects will also work to improve performance on a slow desktop PC. Likewise, any other optimization that you can target to a mobile device will also improve desktop performance.

With that said, the only semi-optimization that I can think of greatly benefits mobile devices, in particular, by reducing the physical size of your page. This is to ensure that people do not spend time scaling to different parts of your page.

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

Answer 3

Take a look at the following article that I wrote in Javascript Performance Optimization Techniques .

For page load time on mobile devices, the most relevant section is "Managing and actively reducing your dependencies." Here are some methods:

• Enter a code that reduces the library's dependence on the absolute minimum.
• Use the post-load dependency manager for your libraries and modules.
• Collapse and merge your code into modules.

For responsive UIs, you want to focus on reducing interaction with host objects (DOMs) and methods associated with maximizing the efficiency of your iterations. Here are some of them:

• Keep your HTML super skinny (get rid of all those useless DIV and SPAN tags)
• Save a pointer to a pointer to objects in the browser.
• Reduce the number of calls to change the DOM to an absolute minimum, especially style changes.

The other sections have everything that is useful for various aspects of creating an optimized and flexible user interface. I hope you find them useful.