How to speed up responsive websites

Responsive web design is the buzzword of the decade already, and is ideal for the multi-screen connected world that we live in. However, the trade-off for this is in performance due to larger file sizes.

This has prompted some experts to say that, like the early days of Flash, responsive design is something that we could all be getting excited about for no good reason. However, while at the moment there are performance issues, these can be overcome to some extent with some small adjustments, compression and image resizing.

Why responsive design can perform slowly

Responsive design loads all of the same HTML elements for every device, including those intended for tablet and desktop delivery. This means that all content is often delivered, including images and scripts, no matter what device it’s being viewed on.

A study carried out last year showed that 86% of responsive sites currently online deliver a full desktop page to mobile devices. This is clearly a trend to the design technique that needs addressing, if we are to stop the progress of bloated web pages in its tracks.

At the moment responsive design is pushing up page sizes and this is the trend that needs to be addressed, especially when you consider that 57% of mobile users will leave if the site doesn’t load within 3 seconds.

How can performance be improved?

For those who already have a design in place and are wanting to now optimize, Mobitest can be used to measure performance in order to go on and address it. Of course, when planning out a design, optimization will be simpler to carry out at this stage and performance should always be considered an essential part of design, rather than an afterthought.

In order to improve performance, the size of the pages and resources loaded with it needs to be reduced. This can be carried out using various techniques, without seriously altering the look and feel of the site.

The first thing to consider is how to ensure that only the resources which are needed are sent to the target device. This can be done by minimizing the number of HTTP requests, so that the user spends less time waiting for the DOM to load. This can in turn be done by compressing CSS and Javascript resources, for which tools such as Compass — an open source CSS authoring framework — can be used. This allows developers to create cleaner markup and create sprites and extensions with minimal fuss.

With regards to JavaScript, tools such as UglifyJS can be used, which compresses code.

Conditional loading

This can be considered an important technique when it comes to responsive design, as it can be used to make sure that mobile and smartphone users don’t download the aspects of the site that slow it up, or that they won’t use.

Conditional loading can be used to stop all kinds of content from loading, including social widgets, images, maps and plenty more. It’s important to note at this point that the site should be thoroughly tested at each stage of optimization so that it’s easy to see what has made a difference as you go along.

Images

We all know that images are usually responsible for taking up the largest amount of kilobytes in a web page. It’s also safe to say that images which are designed for a desktop browser are going to underperform when delivered to a mobile device.

If a site also has a lot of legacy content, then this is going to affect performance even more and some way to prevent this content from loading needs to be implemented. While this can be done by altering the markup by changing the src or img elements, the PHP solution Adaptive Images is probably easier. The software detects screen size and automatically creates, caches and delivers the appropriate scaled down embedded HTML images, without the need for changing the markup. To be used in conjunction with Fluid Image techniques, it’s a handy solution and one that will save a lot of time. Adaptive Images uses one htaccess file, one php file and a single line of Javascript in order to determine the screen size of visitors to the site.

Text

It’s worth thinking about text too, as this will wrap naturally when the device is narrowed and could cause display issues. FitText is a tool that can help address this, a jQuery plugin which auto-updates font size, with options for the minimum and maximum sizes that will be allowed.

This is ideal for headlines that may be displayed badly on a mobile device and allows the CSS3 specified font size to be ignored. However, FitText is only intended for headlines and shouldn’t be used within paragraph text.

Why choose to design responsively?

Whilst responsive design has its problems, much like any relatively new technology or technique, it’s still worth choosing to build a site in this way. Nobody wants to go backwards and while it may be easier to build a mobile website, it’s much better to be as innovative as possible.

Google agrees, their advice is to use responsive design as the best way to design for mobile. Of course to the search giants, this means that they only have one URL to crawl, rather than numerous URLs for what’s essentially the same site, so it’s in their interests really.

However, in this time of social sharing mania it also makes sense, as mobile users may share a page with someone using a desktop. In order to create a uniform experience, this should deliver the same content.

Further to that, having a responsive site improves productivity in the workforce as there is essentially a lot less to do. This applies to content, updates and SEO, as this will need to be carried out separately if different sites are built.

The figures

Mobile devices and tablets are becoming the norm for connecting to the internet and surfing in this, almost, post-PC era. Tablet sales worldwide have soared in just a year, more than doubling in that time and with many consumers now choosing different devices running Android, as well as iOS.

There’s little doubt that so far responsive design is having a positive impact, despite performance worries. According to one report, which asked some of the world’s top brands how having a responsive site had affected traffic, visits across all devices were up considerably.

This included an average increase of 23% by mobile visitors, as well as a lowered bounce rate of 26%, with visitors spending around 7.5% more time on the sites than was previously seen.

O’Neill, the trendy surf clothing retailer, report a conversion rate that is 65.7% higher on iPad and iPhone as a result of developing a responsive site. This accounted for a 101.2% revenue growth on these devices alone.

With regard to Android devices, the conversion rate was even better, at a whopping 407.3%, accounting for a huge revenue growth of 591.4%. A smaller conversion rate was seen on non-mobile devices, although growth was still seen.

This is just one of the brands that release their figures and it’s quite difficult to get the data from others right now, much as it was with the impact of social media a couple of years ago. However, it goes some way to proving that the returns from designing a responsive website can be substantial.

Bearing that in mind, what further reason does any designer need to start designing responsively for their clients and trying to ensure that they perform as well as they possibly can? There isn’t one, and those designers who don’t want to go to the trouble of learning how to design, build and optimize a site using responsive techniques may find themselves left in the dust.

67% of users say they have purchased via a mobile site and it’s thought that mobile internet usage will overtake that of desktop by next year. Bearing all of this in mind, it’s easy to see why businesses will become more and more interested in the best mobile web solutions that they can offer.

Responsive design may still be in its infancy at the moment but it seems clear that market demand will make it grow up quickly, so it’s worthwhile learning as many aspects to the discipline as possible now.

What techniques have you used to optimize responsive sites? Does delivering alternate content negate the benefits of responsive design? Let us know in the comments.