I’m developing a web application using jQuery Mobile on the client side and PHP & MySQL on the server side. The application works great on desktop browsers like Safari, Chrome and Firefox. However, on the iPad – where the application is opened as a web clip from the home screen – the application performs much worse. Scrolling works fine, but tapping a link to load a page from the server goes very slow.
A recording of the iPad’s screen shows that (for example) after tapping it takes 0,3 seconds before the tapped element is highlighted and the loader is shown. After 1,0 second from the start the lower half of the opened page is rendered/shown (below the loader). It then takes another 0,6 seconds before the upper part of the page is shown, making the total time required to load the page 1,6 seconds. A video showing this process (played at 25% of the original speed) can be found here.
I understand that loading a page (over WiFi) takes some time, but I do not understand why rendering the upper half of the page takes an extra 0,6 seconds. Assuming that the page is fully loaded after 1,0 second (because the lower half of the page is already shown then), I think that takes pretty much time as well, because it only takes around 0,5 seconds on Safari on my Mac. But that might be caused my the slower processor in the iPad and the lag of the WiFi connection.
Hopefully someone knows some (client side) optimisations to make the application perform (or feel) faster. I already disabled animations within jQuery Mobile and I will try to optimise the server side myself.
Maybe these things are important to know:
- All pages I return from the server have a full
<head>with multiple referenced stylesheets and scripts. Does jQuery Mobile ignore the<head>or diet this take processing power? - I have a fixed header and footer on most pages. I’m using
<div data-role="…" data-position="fixed" data-id="…" data-tap-toggle="false">to accomplish this. The header and footer are included in all pages as well. - Most headers have a button on the left side (
<a data-role="button">tag), a title in the middle (<h1>tag) and a controlgroup on the right side (<div data-role="controlgroup">) containing two buttons (<a data-role="button">). - One button in the header is set to prefetch the page to where it links (
<a href="…" data-role="button" data-rel="dialog" data-prefetch>). This button is included in every page, but thehrefof the link is the same on each page. This might be something..? - All footers have a navbar (
<div data-role="navbar">) with several items (<li><a>). - Some pages are listviews with filter capabilities (
<ul data-role="listview" data-filter="true">). That currently contain just a few items (<li><a>, max. 5) and list dividers (<li data-role="list-divider">). - Other pages are forms (
<form>) containing listviews as well (<ul data-role="listview" data-inset="true">) with several form fields inside (<li data-role="fieldcontain">).
Well, that are all ‘special’ things I can think of. If you need to know more or see some source code, please let me know.
The problem was (mostly) fixed by updating to jQuery Mobile 1.1. That version included some performance related fixes/optimisations.