Last month I covered the topic of page bloat — more specifically, calling attention to the fact that the web has reached a brand-new (if ignominious) milestone: the average home page is now more than 2 MB in size.

Today I want to talk about an issue that is arguably even more problematic: how page bloat affects mobile users.

According to the Mobile HTTP Archive, the average page served to mobile devices:

• is more than 1 MB in size,
• contains an unprecedented number of resources (such as images, scripts, and other page components), and
• contains an equally unprecedented number of redirects.

In this post, let’s review the size and composition of modern pages served to mobile users, and discuss the performance implications.

The average page served to mobile has grown by 203% since 2011

In 2011, the average page served to mobile was just 390 KB — which, if you can remember that far back, actually seemed pretty big at the time. Today the average page is more than three times larger than that. (Note that the Mobile HTTP Archive gathers data about all pages served to mobile, not just mobile-optimized pages.)

When it comes to mobile performance, there are six potential problem areas:

• images,
• number of resources,
• scripts,
• custom fonts,
• redirects, and
• HTTPS.

Today, let’s talk about each of these areas, how each presents a performance problem, and what you can do about it.

1. Images account for 63% of the average page’s total weight

Humans are visual creatures. We process visual information about 60,000 times faster than we process text-based information, which helps explain the power images have over us, and why we crave large, high-resolution images on the web.

Today, images alone account for more page weight than the entire payload of the average page just two years ago. This suggests that our love affair with images may be veering out of control. While the sheer volume of images is unlikely to change, we can get a lot smarter about how we use them.

The solution: The vast majority of images on the web are either in the wrong format or they’re the wrong size or they’re uncompressed — or some combination of all three of these factors. Here’s a high-level checklist of image optimization tips I compiled a few months back. For a deeper dive, check out this recording of Guy Podjarny’s O’Reilly webcast about creating high-performance images.

2. One out of five pages contains 100+ resource requests

Payload is just one area of concern. We should be at least as concerned by the increasing complexity of modern web pages. As the graph below illustrates, in 2011, almost half of all pages served to mobile contained fewer than 25 total requests (for page assets such as images, HTML, CSS, etc.). Today, more than half of all pages contain 50 or more requests, with 20% of pages containing 100 or more.

Latency (the amount of time it takes the host server to process a request for an object) is a problem for desktop users. It’s an even greater problem for mobile users. Latency for major carriers in the US ranges from 340 to 362 milliseconds. This latency is applied to each resource request. Even with several requests streaming concurrently, the total latency hit can be brutal.

The solution: While you can’t do anything about carrier latency, there are things you can do to your back end and to your pages, such as improve your server response time, leverage your users’ browser cache so that resources that appear on multiple pages of your site only need to be called once instead of several times, and consolidate your page resources to reduce the total number of server round trips.

3. JavaScript usage continues to rise

This is related to the section we just covered, but it bears calling out as a separate section. Each of these requests increases the complexity of page rendering, as each request must be downloaded and parsed by the browser. While mobile browsers have made huge strides in a few short years, this added complexity places a significant burden on them.

The solution: Know when to use JavaScript and when to back away. I highly recommend that you do an audit of some of your key pages and see where you fall on the JS spectrum. If you’re in the 6+ JS files camp (or even if you’re not), I suggest you watch Nicholas Zakas’s excellent talk Enough With the JavaScript Already. I saw him give a version of this talk at Velocity a couple of years back, and it was fantastic. Nicholas has probably forgotten more about JS than most people will ever know, and he has some great insights and tips.

4. Almost half of all pages served to mobile use custom fonts

Back in 2011, only 2% of all pages served to mobile devices used custom fonts. Today, just four years later, that number has leapt to 48%.

Custom fonts are awesome. They give designers and site owners 100% control over their brand — which, in our brand-obsessed world, isn’t trivial. But when custom fonts are poorly implemented or hosted externally, this introduces the potential for a huge amount of performance pain. Some fonts require massive amounts of CSS code, while others use super-heavy JavaScript. And sometimes those externally hosted fonts simply fail altogether. Whatever the cause, performance suffers.

The solution: The best way to tackle this problem is simply to disable custom fonts for mobile devices. If that’s not an option, then use them only where absolutely necessary, i.e., headers and key typographical elements. And be sure to read Ilya Grigorik’s excellent post on webfont optimization.

5. One out of five pages contains 5+ redirects

These numbers surprised me. I expected pages to contain a few redirects, but I didn’t expect 20%  of pages to contain five or more. And 3% of pages contained 10 or more. That’s a lot.

Redirects can be a performance fail in a few ways. They slow down page load, of course. But arguably even worse, if you’re trying to view a desktop-only (ugh) page on your phone, the redirect can send you to the home page of the mobile site, with no idea how to get to the content you were hoping to see. It’s more than a performance fail: it’s a total usability fail.

The solution: Patrick Sexton has written a really good post about how to avoid redirects, which I recommend. In it, he suggests that you use this SEO tool to audit your pages and identify all the redirects. (You may have some, even if you don’t think you do.) Brad Frost has written another must-read post suggesting a few solutions for redirects, including maintaining a single codebase and using canonical URLs.

6. The number of pages containing HTTPS requests has more than quintupled

In 2011, only 3% of pages served to mobile contained HTTPS requests. Today, that number has climbed to 16%. While this is a fantastic step forward in terms of offering a more secure user experience, it also comes with performance considerations that site owners need to be aware of. HTTPS requests require a few extra handshakes in order to verify their authenticity, which incurs an extra bit of latency. This latency can affect load times, though it doesn’t have to.

The solution: In his post about HTTPS and web performance, Dean Hume reminds site owners to verify your certificate configuration, enable keep-alives, and consider implementing the HTTP Strict Transport Security header, which “prevents any communications from being sent over HTTP to the specified domain. The browser redirects from HTTP to HTTPS client side, without ever touching the network.”

Takeaway: Why should you care about mobile performance?

Mobilegeddon may have come and gone, but mobile performance is, in my opinion, only just beginning to take the stage. One out of four people worldwide uses a smartphone, and one out of five Americans rely exclusively on their smartphone to access the internet. Understanding how your site performs for mobile users — who may account for half (or more!) of your website’s total traffic — isn’t just about making Google happy. It’s about making your visitors happy.

http://www.soasta.com/blog/mobile-web-performance-page-bloat-july-2015/