Search

12 . 4 . 13

A Mobile World, A Not So Mobile Web


If your mobile users are suffering, so are your profits!

Weight is everything – ask Ferrari, Nasa, or the British Cycling team, great performance relies on the most lightweight construction methods. Not much is different on the web; great performing websites need to be lightweight to work at an optimum level. We know this, because leading industry experts like Steve Souders having been teaching us this stuff for years. As the digital adage goes “Performance is a Feature”. In today’s mobile culture it can make or break your site/app. If website performance is neglected, you’re effectively burning money.

Thankfully there are great tools out there to give us guidance; such as the ubiquitous YSlow and the more recent Google PageSpeed Insights plugins. We also have CDN’s that help keep pages slim by loading popular JavaScript libraries from superfast servers. Clever use of browser cache can make return visits painless. All this is great news for web developers and website users, but there’s one thing that continues to bother me and most probably your audiences; websites are still bloated.

Website Bloat

Despite a newfound awareness and general trend by developers to employ size saving methods, there has been a rapid increase in page bloat in recent years…

Recent website size stats – See http://httparchive.org/ for web page statistics comparison

 

February 1st 2012 – 966kb

Figure 2

February 1st 2013 – 1270kb

Figure 1

In fact, studies show that the size of the average web page has tripled since 2008.

From 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger. During the same five-year period, the number of objects in the average web page has more than doubled from 49.9 to 100.

The number of page objects (http requests) has a particularly adverse effect on page load times due to browser limitation on simultaneous downloads and the performance expense of establishing a connection with the server. This is compounded on mobile devices that suffer from low latency connections and slower download speeds.

In order to the reduce the bloat, I thinks it’s important to identify what I feel are the key factors behind it and what we can do to help remedy them.

Plugin Jenga

Mobile Jenga

You’ve all seen it, you’ve probably even played it. The jQuery plugin stacking game, the aim is to get yet another ‘cool’ effect or piece of awesome functionality into the website. Sooner or later though things get out of hand, multiple JavaScript libraries – there’s a special place in developer hell for sites that uses prototype, scriptaculous, MooTools and jQuery all at once – little used plugins being loaded on every page and a <head> so full of script calls it begins to look like a supermarket shopping receipt.

@fontface Overindulgence

Browser support for the @font-face css rule has made it easy to use practically any typeface you like on a page. Too many typefaces though, and you’ve got yourself some serious bloat going on. As a rule I think it’s a good idea to stick to to 3-4 typefaces. Here’s an example of a reasonably sized @font-face set using the popular Google web fonts…

Font: Open Sans
Type faces: Normal 400, Normal 400 Italic, Semi-Bold 600
Result: 45kb

This combination of weights and styles will cover the type settings required for the majority of sites. and comes in at a reasonable 45kb split across 3 http requests. As you can see in Google’s helpful page load indicator, this falls into the green area; acceptable.

Figure 3

Perhaps you decide you want a few more weights though, or perhaps an alternative serif type for body copy. When we start adding a few more typefaces the page load time soon starts stacking up.

Font: Open Sans
Type faces: Book 300, Normal 400, Normal 400 Italic, Bold 700, Bold 700 Italic
Font: PT Serif
Type faces: Normal 400, Normal 400 Italic, Bold 700
Result: 339kb

What’s that? Your site is multilingual and requires the Extended Greek character set? That’ll be an additional 150k. Ouch, things are starting to get crazy! That’ll be 8 http requests for downloading all these fonts too, I’m sure your mobile users won’t mind waiting.

Figure4Increase in broadband speeds

I think due to the increasing speed of broadband connections in most developed countries, some designers and developers have misjudged or even ignored the need for web performance best practises. The result is over-designed sites that look amazing but suffer from page size bloat and bandwidth black holes.

This has, without a doubt, had detrimental effects on desktop users with slower connections. Spare a thought for our compatriots in the UK counties of Omagh, Fermanagh, Dungannon and Cookstown where more than 25% of the broadband users are receiving less than 2Mbit/s → It makes for some pretty irritating load times on heavy sites.

The real suffering is reserved for mobile users who, with their patchy coverage and low latency connections, are having to wait an age for some of the more obese sites on the internet to load. The moral of this story is that regardless of your own broadband speed, you need to keep an eye on the bigger picture.

Responsive Web Design done wrong

Retrofitting responsiveness onto existing desktop sites generally ends in tears for your mobile users. The common technique of hiding elements with display:none for mobile doesn’t stop them being downloaded… bad news. In some instances I’ve seen web pages that are more heavy-weight on a mobile device than the desktop counterpart! How many mb’s of data allowance and how much time has been frittered away due to lack of gzip, un-minified CSS & JavaScript, no optimization of images, hidden content and unnecessary markup. The mind boggles.

Images

Above all things, images are the biggest bandwidth hog. Media rich sites are really going to punish mobile users. When desktop sized images are served to tiny screens, I despair.

…and the rest

I could talk at length about optimizing assets, minification of files, gzipping and efficient use of browser cache, but this is already heavily documented by people far smarter than me. So I’ll just point you in the direction of  Yahoo! Best Practices for Speeding Up Your Web Site, these techniques should be ingrained into your daily process as a web developer, they’re relatively easy to achieve and your users will thank you for it.

 

The importance of page size today and in the future

The advent of the mobile generation is a remarkable revolution, I don’t think many people ever saw such rapid demand for smart phones coming. To understand the importance of mobile performance, you really need an insight into the way people are using their mobile devices. There’s a common misconception that mobile users are only using their devices for quick snippets of information when they’re on the move. I’ve always been surprised when this opinion has been echoed by clients because it’s just not true.

My daily commute is evidence of this; hundreds of people all are simultaneously glued to their devices, watching movies, playing games, reading news etc. It’s clear to me that people are now using their mobile devices for just about anything at any time. In the not so distant past, computing was the hobby of the geek. Mobile changed everything. We’re witnessing a whole generation of consumers using pocket sized computers, not only for communication, but social media, watching movies, gaming, and online shopping. Typically these interactions were only seen from desktop computing. The smartphone has reclassified what computing is, smartphones have made computing cool.

The smartphone has reclassified what computing is, smartphones have made computing cool.

Increasingly, we’re seeing people are using their mobile devices in place of desktop machines, when 25% of teens are “mobile-mostly” internet users (US 2013),  if they can’t access your site in the same time it takes for the desktop variant, the likelihood of them abandoning your sluggish site is high.

The importance of page speed and mobile performance has never been more relevant. As more and more people switch to mobile, you’ll need to cater for a user that expects speed greater than many sites are providing.

Conclusion

The companies that understand the impact mobile can have on their business are going to great lengths to provide an engaging, lightweight variant of their site that performs well and loads as fast as possible. Unfortunately they are an exception to the rule and there’s still plenty that can be done to make mobile (and desktop) browsing a snappier experience. Remember, fast websites mean happy users and increased sales.


Comments