The longer it takes for a page to load, the fewer pages a visitor is going to want to load during their visit, and the less likely they are going to be to convert – whether that means placing an order, filling out a form, or making a download.

So when evaluating mobile UX, page load has to be a factor.

And while we have previously gone into more detail on how in our 12 Ways to Speed Up Your Mobile Site, the big two take-aways are that a faster mobile site needs to reduce page size and requests.

Page size is intuitive for anyone who has ever sat around waiting for a download to finish. The larger the download, the longer it’s going to take. But it’s less intuitive how latency caused by too many requests slows down a page.

A page is made up of many different items that need to be requested from the server. Every external file - each image, or javascript file, or CSS file – is a request. And even the tiniest 1KB file takes routing time before it begins downloading. Load up your page with too many requests and it’ll slow load time down to a crawl. Particularly on mobile sites, where latency is an even bigger issue than on desktops.

Time to test

With this in mind I wanted to see how the sites on Moovweb held up. And the best way to gauge this seemed to be comparing each mobile page to it’s corresponding desktop page – which as luck would have it, Akamai’s CTO Guy Podjarny had already put together.  Over the past couple years he’s run a fantastic test on Responsive Web Design sites using WebPageTest.

Screen Shot 2013-09-20 at 6.25.16 AM

If you haven’t tried out WebPageTest, you should definitely take it for a spin. It’s a great tool for putting a page through a rigorous loading test on different browsers, devices, or geographical locations. And if you’ve ever seen a great page loading infographic, more often than not you’ll see it cited in the sources.

Guy put RWD pages through it at different browser widths to simulate how each page would load at the different breakpoints. And showing that even as the screen size shrank to mobile, the page download size savings were basically negligible. The saving in KB was less than 10%.

[caption id="attachment_3207" align="alignnone" width="852"]Guy Podjarny Guy Podjarny's "Real World RWD Performance – Take 2"[/caption]

And Responsive Delivery

Borrowing from that, I put the homepage of over 60 sites that use Moovweb and Responsive Delivery through the same WebPageTest - once for the desktop page using chrome, and then once using the mobile page on an iPhone.

The two things I was looking for were the overall page size in KBs and the amount of requests. Overall, the results were quite impressive, especially taking into account the rampant over-downloading that Guy saw with his RWD tests.

On average mobile pages delivered through Moovweb less than half the size of their desktop site (49%). When it came to requests, they did even better – with the mobile pages making only 44% of the requests.

desktop-to-mobile-comparison

Cox.com

The Cox site is a great example of using Responsive Delivery to optimize page size for mobile. The desktop site itself is already efficient and streamlined, at just under 700KB and just about 50 requests. But with cloud transformation to optimize for mobile the Seagate homepage size is more than cut in half. Slimmed down to under 300KB and just more than a dozen requests, it delivers a great mobile experience with a mobile-optimized interface and, just as importantly, a mobile-optimized size.

[caption id="attachment_3214" align="aligncenter" width="300"]Screen Shot 2013-09-23 at 9.18.10 AM About 700KB and 50 requests[/caption]

[caption id="attachment_3215" align="aligncenter" width="181"]iOS Simulator Screen shot Sep 23, 2013 9.16.57 AM Less than 300KB and a dozen requests[/caption]