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.

0 shares
  • AdamJessop

    Seems a bit strange in a post that is all about improving the loading of responsive sites, suggests using a javascript library purly to change text sizing. Yes FitText is a small library, but it needs the jquery library. Wouldn’t properly defined CSS be better?

    • http://www.javerydesign.com/ Justin Avery

      +1, I love fittext and fitvids… pretty much everything that comes from davatron5000, but I’m struggling to find how it applies to improving performance.

      This article should be littered with responsive image techniques, caching strategies, concatenation of files, icon fonts etc etc.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      It really depends on context. If jQuery is required for any part of your site then using it again adds no extra overheads.

      To do the same thing as fitText with CSS means media queries set up for screen sizes rather than as content dictates, which isn’t considered best practice.

      You’re quite correct though, jQuery is a little bulky if you’re only going to use it to resize a headline.

      • Adam Jessop

        I know regarding jQuery if your site is already using it, I just find that in the context of the post, its inclusion is a little misplaced.

        Like @justinavery:disqus I like the fittext and fitvids plugins, and have used them before. But I would argue that having consistent headline styles (sizing and weight) that could possibly go over 2 lines is better on mobile, vertical scrolling is somewhat expected.

  • http://www.creativebeacon.com/ James George

    This is an interesting post. I hadn’t considered the speed of a responsive site, considering that we tend to optimize our pages anyway. You are right, though, a lot of people serve desktop sized images to mobile users in their responsive designs. This definitely gives responsive designers something to think about!

  • jaystrab

    “responsive design is something that we could all be getting excited about for no good reason”
    Exactly! Your normal website will work fine on any device. So chill out, people.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      How so? I don’t think I’ve seen a ‘normal’ website — which I mean non-responsive and non-mobile — work satisfactorily on a phone.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Thanks Cinegk, but you’re talking about building a dedicated mobile site, not a ‘normal’ site as jaystrab suggests.

    jaystrab’s comment was that a ‘normal’ website would work fine on a mobile device and I was curious what his experiences of that are — and what devices he’s basing that on — because mine are quite different.

    • jaystrab

      A ‘normal’ website is not a responsive website. A static website that lets the device resize it based on the device’s screen res. Every iPhone, iPad and Android device I’ve seen resizes static websites fine. You don’t need a responsive site or a separate mobile site for your website to work on those devices.

  • Joana Magee

    Responsive web designing is a web style strategy targeted at designing sites to provide an maximum watching experience,easy studying and routing with at the least resizing, panning, and scrolling. Great stuff i have read here. Thanks………

  • http://www.keybrowsse.com/ Keybrowsse

    Loading time is a big issue in responsive web design. I suggest if our website traffic is less percentage choosing responsive is not wise choice. But for future it is must!!!

  • http://www.mathewporter.co.uk/ Mathew Porter

    My main point with RWD is to maximise load speeds for mobile devices as the mobile internet speeds in the UK can be very shakey. Once we have a better solution in the spec for images, then things will really start to move forward.

  • http://instalogic.com/ Instalogic Web Design

    Thank you so much for the post :D I love it!!

  • http://www.eyewebmaster.com Rosendo A. Cuyasen

    As SEO specialist. What we do is exactly what you have shared here in this article. You may also used some of this tools to check your site if there are other errors. http://www.eyewebmaster.com/tools/

  • Dylan Lott

    There is an SEO benefit to not having a m.yourdomain.com URL however. Google can (and I’ve seen it happen) interpret this as duplicate content that your site is hosting, and can discount your content and not provide any link value to your site.

    That’s why Google says to use a responsive website, because it lessens your chance of being penalized for duplicate content. It has nothing to do with how many URLs they have to crawl.

    • http://www.upost.it/ GeorgeSDK

      You can fix everything with @media. (5 months experimenting with it). You don’t need anything else, m.yourdomain.com or otherwise.