There are two big ways in which going the SPA route gives you opportunities you can take advantage of to improve user experience:
Less downloaded content
If you have different HTML pages for each page in your application, you will have to download each of them in their entirety. If your site shares common markup between the pages, it will be re-downloaded for each page. Compare this with an SPA where at the very least you download only the changes needed to go from the current page to the next one. In some cases there will be little improvement, in others it will be quite significant.
Another way in which SPA can be more efficient is if you separate the logic of building the markup and your data. Consider the example of having a list with 100 names and scores:
Traditional:
<ul id="myList">
<li><strong>Name 1</strong> score 1</li>
<li><strong>Name 2</strong> score 2</li>
<li><strong>Name 3</strong> score 3</li>
...
<li><strong>Name 100</strong> score 100</li>
<ul>
SPA:
<ul id="myList"></ul>
var myData = {
"Name 1" : "score 1",
"Name 2" : "score 2",
"Name 3" : "score 3",
...
"Name 100" : "score 100"
}
var html = '';
for (var name in myData) {
var html += '<li><strong>' + name + '</strong> ' + myData[name] + '</li>';
}
document.getElementById('myList').innerHTML = html;
The SPA model can save bytes even when building the DOM. Also, the logic is reusable, so if you need to re-build the list with more content, you only need to add stuff to an object and call a method.
Striking the pefect balance between download size and processing required is a very difficult problem and it depends on many issues, including the particularities of the application, the device, other tricks that can be done, etc. Fortunately a common sense approach gives good enough results most of the time.
Transitions
Other than some IE experiments you can't make any change to transitions between different pages in the browser. This is an important selling point for SPA because with clever transitions you can give the appearance of speed even when the site is not that fast. Even without transitions, an SPA is much better suited to give feedback to the user while loading than a regular site.
One thing to note is that you should focus on the initial page load to be as smooth as possible (by only loading the bare minimum) and after that batch requests as much as possible. A big problem with mobile latency is that if the device doesn't need to use the radio for a while, it will be turned off. Turning it back on again incurs a significant overhead, so requests should be batched whenever possible.
My personal advice is that if you can go SPA, you should. There is very little that can be done to improve efficiency for regular HTML sites, while i suspect SPAs will continue to be improved constantly in the future. At the very least, you can expect similar performance from a carefully built SPA as you get with regular HTML and the potential opportunities can give big rewards.
