Question

Our company develops big corporate solution for business (web-site). After approving to support Apple iPad we saw, that our site is very slow on it. So, I was tasked to optimize performance for iPad by optimizing GUI (Html, JS…), because server part of application is pretty fast.
I’ve found some solutions tricks with customer’s approve:
* Reduce grids columns count and leave only the most useful.
* Turn off all the animation.
* Decrease resizing as much as possible.
And of course, I minified all the scripts and stylesheets.
Can you make me some additional advises how to improve performance?

Answer 1

There’s several things, many of which apply to desktop web as well as they are just part of good practice.

In no particular order:

• Remove extra whitespace and HTML/CSS/JS comments
• GZip all text based content (HTML,CSS,JS)
• Optimize all your images (e.g. use a service like http://Smush.it )
• Move your images/static content to a separate server (increased HTTP pipelining), and don’t serve cookies on that server
• Don’t serve up anything to “mobile” that they don’t need (where possible)
• Don’t scale down images on the client, served scaled down versions from the server
• Since most mobile browsers handle CSS well, convert “lists” of data that render in tables, to use unordered lists etc.
• Serve common scripts like jQuery from a CDN like Google
• most mobile browsers support some kind of offline caching, or local lightweight database – if there is anything that you can cache to reduce future loads consider doing so
• If you want to get really fancy, you can do things like not directly loading images… and then checking on the page which images are currently in view (or delay slightly), and loading them as needed… the helpfulness of this will depend highly on the content
• Consider delaying the load of search results if applicable (e.g. like a Twitter stream that might only load the first 20 items, then only load additional items on demand.