Optimizing Responsive Design Websites for Performance

Share this article

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?

Kerry ButtersKerry Butters
View Author

Kerry is a prolific technology writer, covering a range of subjects from design & development, SEO & social, to corporate tech & gadgets. Co-author of SitePoint’s Jump Start HTML5, Kerry also heads up digital content agency markITwrite and is an all-round geek.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week