CODEWITHSUNDEEP
ipadoptimizationwebmobile-safari
Sergey Metlov
Sergey Metlov

Reputation: 26331

iPad web-site optimization

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?

Upvotes: 1

Views: 3013

Answers (2)

copenndthagen
copenndthagen

Reputation: 50760

Some of the practical things which i would like to tell are;

  1. Avoid use of iframes on your pages. They do not work well on iPad.
  2. Use a library like Sencha touch which is highly optimized for the iPad.
  3. Make links or buttons to have large touvh areas, as users can get frustrated with incorrect link clicks..
  4. Avoid use of CSS absolute positioned elements.

Also to add a few more points;

  1. It is best to use the meta viewport setting as width=device-width...This ensures that your viewport is set based on your device and not hard-coded.
  2. Avoid use of CSS :hover properties in your iPad CSS...They can cause unnecessary issues (false hover's)

Upvotes: 1

scunliffe
scunliffe

Reputation: 63666

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.

Upvotes: 2

Related Questions