Optimizing Responsive Design Websites for Performance

Tweet

Responsive design has been the darling of web design for a few years now, although it’s really come to a peak in 2013. It’s no wonder, of course. A site that can adapt to every device makes things so much easier than worrying about a separate mobile site.

However, the one area where responsive fails is speed. Without optimization, a responsive site will deliver all HTTP requests for a full desktop site, even when they are hidden. This, of course, slows a mobile or tablet site considerably. So, what can you do to make it go quicker?

Quite a few things, as it happens. The good old web is awash with tools and tips to help, so here are some of the best of them.

(Image Source: Seth Waite)

(Image Source: Seth Waite)

Images should be properly optimized

We all know that images are often the main culprit when it comes to slow load times and this is just as true of responsive sites. There are a couple of ways to approach this and the quickest and easiest is to use Adaptive Images. This detects screen size and automatically creates, caches and delivers a scaled down version of the image, without having to change the <scr> or <img> markup.

A lightweight PHP solution, the software should be used alongside Fluid Image techniques and can really help cut down on time. It uses an htaccess file, one PHP file and a single line of JavaScript to determine the screen size of visitors.

You can also customize the software and set the quality of images and browser caching.

Media queries

There are tons of decent frameworks to be found online that do away with the need for using media queries, such as Bootstrap, for example. But does this mean that you shouldn’t bother learning about them? No, too much knowledge can never be a bad thing and do you really want to rely solely on the code of others?

A media query in responsive design is a CSS declaration that is used to call other declarations, based upon the size of the screen on the target devices. You can use them in two ways: as an external call or one that writes directly inside the stylesheet.

External code

<link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" />

Direct call

 @media screen   and (min-width:320px) and (max-width:480px){

 /*Style Declarations For This Width Range */ 

 }

Both of these are ways to make CSS declarations to be called when the device is between 320px and 480px. As you can see, the @media screen starts the query and the maximum and minimum width attributes set the parameters.

Still seem like a lot of trouble? Check out ProtoFluid, which allows you to create adaptive CSS without having to test it on each device.

Other resources worth checking out are unsemantic’s CSS framework, which allows you to work with percentages, instead of columns and Screenfly, which allows you to build wireframes directly within the browser and is also useful for testing.

Minimizing HTTP requests

As mentioned earlier, all HTTP requests are sent to every device unless you tell it not to, so what can be done to reduce these and reduce DOM load times? JavaScript and CSS resources can help with this, such as Compass.

This is an open source CSS authoring framework that allows developers to create clean markup and create sprites and extensions simply and easily.

For JavaScript, tools such as UglifyJS are invaluable as it compresses code, allowing for automated working with JavaScript.

Conditional loading

This is ideal for ensuring that mobile and tablet devices don’t download all kinds of content, including images, maps and so on. This is especially true of third party scripts such as gravatars and social media icons, as these will generally be geared towards the larger devices.

ZurBlog points out that to

… load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes 246.7k in bandwidth.

For perspective’s sake, that’s over twice the bandwidth and 3 times the number of requests required to load a complete, minified version of the entire Foundation framework.

Is it really necessary to have all these load for social? It depends really. If you rely on social signals for SEO, then using a simple share URL isn’t really going to work for you. This is because the sharing URL is just for sharing, rather than adding likes or G+ +1s.

However, there’s always your main site for that and the URLs can be incorporated into the stylesheet for mobile and tablet devices.

For example:

<a href="http://www.facebook.com/sharer.php?u=URL&amp;t=TITLE">link or image</a>

(source ZurBlog)

Testing, testing …

Whichever techniques and resources you use, the most important aspect to building a responsive site should be the testing. As mentioned earlier, you can use resources such as Screenfly, but it’s also a good idea to test it on as many real world devices as you can.

Ask family, friends, workmates, whoever, but test it thoroughly on as many devices as possible. One of the things you should bear in mind is usability, so ensure that it doesn’t just look good, but it passes the thumb test, is easy to navigate and preferably, has a strong call to action at the top of the page.

Look at the text too, does it display correctly or does it look squashed and push other content to strange places on the screen. You can use FitText to address this, which is a JQuery plugin that auto-updates font sizes, giving options for minimum and maximum sizes.

It allows the CSS font size to be ignored and should only be used for headlines, rather than paragraph text.

Responsive design is an innovative and recommended approach to design in the age of multiple devices, despite some calling it the modern Flash. However, I don’t think we’ve all got excited for no good reason over it and even Google say it’s the best way to build mobile sites.

It’s all about the usability when it comes to mobile and tablet, so you should always design with that in mind and one way to approach this is to design the site from mobile up, rather than desktop first.

At the moment, minimalist design is something of a trend, so why not think about combining minimalism with responsive to ensure that you build a site that’s speedy, aesthetically pleasing and easy to use?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.dehydr8ed.com Joey Djemal

    Great post, awesome read and great tool tips.

  • http://craigslist.sixsensebusiness.com/ AbduL GhaFFaR

    I have little experience with responsive design. It always face issues of website loading speed. If website loading speed quite low, it will create problem for optimization. Mostly developer to avoid to take this because they need to work hard to increase loading speed

  • http://www.risktoolbox.com Dorsey

    We’re just beginning a B2B project that simply screams for RWD. Not having previous experience with it, I performed due diligence and quickly learned that it’s more than just media queries, as pointed out here. Mostly, I learned that you have to perform due diligence and research and build the system as if every byte sent down to the device matters, because it does. This has largely been ignored when building non-mobile web sites with plenty of real estate, high-res graphics, and huge bandwidth.

    The four-second rule is hardly new. More than 30 years ago, we found user frustration increased exponentially if what were then called “interactive systems” (as opposed to “batch systems”) took longer than two or three seconds to respond, and those were the days of 120 baud data lines (look it up). Even if all the system spit back was the beginning of a long data set, as long as that first response was quick, the user frustration level was low.

  • http://wearepropeople.com/ Responsive design

    Responsive design is really awesome…Most of our clients require it for their websites. But we have to recognize that one of the it’s disadvantages is the loading time, which lasts longer than for usual site. It requires more work on optimization of the loading time. Thanks for the article!

  • http://kitsmedia.ca John Owen

    I think the ‘mobile first’ style sheet concept works well. I first saw it in the WordPress 2012 theme. Interesting they have abandoned it in 2013 theme. We are sticking with 2012 child themes.

  • http://www.originitsolution.com/ Delhi Designer

    I am new in responsive design so i think this post will really improve my skill in this fields. Most often i feel the problem of image size, and its manipulation in responsive layout.

    So, thanks for this post. Really great and easy to understand.

  • http://www.wish111.com Matthew

    Great article Kerry, yes once is all said and done. testing, testing testing..Making sure the site can get accessed on all devices..

  • http://www.marcelino.si jure

    excellent article. Especially for us, working on opensource (wordpress, magento) and having regarding plugins always speed issues.

  • http://markitwrite.com Kerry

    Thanks guys, with regard to open source solutions I think it’s always helpful to include them where possible as most developers I’ve ever met much prefer to use open source if they can. I too think the ‘mobile first’ model is most likely the best approach to take these days, especially with regard to responsive sites.

    Kerry

  • Andrea Pernici

    The best performance tips for responsive design is to NEVER use any kind of Framework and write only the necessary code to render the page correctly then defer the rest.