Mobile Sites in 2014: Bigger, Better…Slower?

The relationship between phone “speed” (e.g., 3G, 4G) and mobile site size is a curious one.

As the years go by, we expect our phones to get faster (check), and perhaps as a result, mobile websites are getting larger and larger (double-check). However, smartphone connectivity speeds are about as dependable as wooden cars. A variety of factors such as latency, bandwidth, and device specs can all hamper a phone’s connection, and these factors are all out of your control. After all, you can’t expect everyone to own an iPhone 5.

What is in your control? The way you design and build your pages. Or, in other words, your site size. By keeping mobile sites lean, developers can help out their mobile viewers limit their data expenditure and enjoy more responsive webpages. Let’s take a look at how mobile sites have inflated over the past few years, and what can be done to bring them back down to a more manageable size.

Mobile Page Bloat At A Glance

Between November 2011 and May 2014, the average mobile site grew in size from 475 KB to to 740 KB – a 56% increase. Although images are still taking up the most space, they haven’t increased too much as a percentage of overall site size. Scripts and stylesheets, on the other hand, have nearly doubled in size between 2011 and 2014, while HTML prevalence remains more or less the same.

Just at a glance, we already have two important takeaways:

1. Images continue to take up too much space (62%, to be exact) when they don’t have to. Web Performance Today has an excellent post on how to smartly reduce image sizes, which may be well worth a read-through.
2. The average script has grown in size from 96KB to 175KB and become almost 24% of the average page’s total size. A big reasons scripts are starting to get so bulky is because many developers have begun to rely on third party scripts, which are not always optimized (or implemented well).

But there are also two other factors at play that may be less obvious:

1. While stylesheets don’t take up too much space at all (around 35 KB in 2014), and are essential to increasingly popular responsive site design, they can limit performance in other ways. For example, an unoptimized stylesheet in the wrong part of the page or one placed in multiple files can contribute to a slow site.
2. Custom fonts have increased by 625%. 29% of all mobile sites now use their own custom fonts, which is good for design, but terrible for mobile performance. Many custom fonts are CSS hogs, and others are JavaScript bears. Most custom fonts are more trouble than they’re worth, so knowing which fonts to use is extremely important.

By reducing clutter in the form of fat images, extraneous third-party scripts, unoptimized stylesheets, and custom fonts, a smart developer can significantly improve mobile site performance. So go, give it a try. Your visitors will love you for it.