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.
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.
Time to test
With this in mind I wanted to see how the sites on Layer0 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.
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%.
And Responsive Delivery
Borrowing from that, I put the homepage of over 60 sites that use Layer0 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 Layer0 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.
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.