Improving the performance of a jQuery Mobile web application
What techniques can be implemented to improve the performance of a jQuery Mobile web app (not using Phonegap, etc. Just one JQM mobile app)? The things we've already done include the following.
- Minify JS, CSS files.
- Reduce or omit images using font icons and image sprites.
- Removed unwanted / unused CSS with mincss.
- Used data-extended = "true" where possible.
- Used the latest JQM and jQuery libs (ofcourse =))
- Page caching where possible.
- The image is not scaled. Images of different sizes are created if necessary.
What else can you do to improve productivity? What changes can we make to HTML, CSS and / or Javascript / JQuery / JQuery Mobile to further improve performance?
Sincerely.
Shreerang
source to share
The main element I see in your list is reducing the number of elements on the page to a minimum. You probably have additional divs, spacing, etc. On the page without even realizing it. Not only does the browser have to spend time rendering each element, if the style for the parent is changed, the style for each child must be recalculated as well!
A good way to take a look at your page to display graphics graphically is to inspect the page with the Firefox 3D layout view: https://developer.mozilla.org/en-US/docs/Tools/3D_View and check if any removed or merged -or items.
Literature:
Yahoo Best Practices: https://developer.yahoo.com/performance/rules.html#min_dom
Google minimizes browser fees: https://developers.google.com/speed/articles/reflow
source to share