This is how it happens.

You spend good money on a beautiful responsive web redesign for your company site.

There's no more pinching and zooming. Everything now renders on phones, tablets and desktops and it looks spectacular.

But several weeks in and there's no new traffic. So you type your URL into your phone's browser just to make sure you’re actually on the web and…





Ah, there we go. There's your beautiful new site. You're live alright, even though it took seven seconds for the site to open.

And that, my friend, is your problem.

Seven seconds doesn't sound like a long time, but for someone waiting for your website, it's an eternity. The result is that person doesn't wait and moves on.

Your average visitor will give up on a site that takes more than two or three seconds to load, even on a phone. Whether it's a short attention span or just being busy, people don't want to see that "loading" icon spin and spin and spin.

Studies show that for every second of load time, you lose 7% of your visitors.

Sure, Wi-Fi connections are can be shaky, but poor site performance is usually the culprit.

So what can you do to minimize load times so that your performance is always at its peak?

The following 5 steps will show you how to speed up the performance of your responsive web design and shave off several of those seconds.

Before Doing Anything Start With A Page Speed Test

You chose a responsive web design because more and more people are using phones and tablets. It's a mobile world and people want their information fast and they want it yesterday.

You know who else does?


For those who don't know about your business, search plays an important role. And as Google is the big brand in search these days, I like to pucker up as much as I can to get good rankings in its search index.

Part of the big kiss up is having fast load times. I kid. It's not actually a kiss up. You should strive for fast load times to make your audience happy.

That's where the puckering really takes place.

Still, with Google's Hummingbird algorithm producing faster, targeted results, the company has expressed its preference for quick loading sites and actually gives precedence in its search results to those with great page speed.

So you gotta be fast or you won't be found.

The good news is, there are free tools you can use to measure load times and see exactly what's slowing you down.

One of those tools is the Pingdom website speed test. This is a great tool because Pingdom uses real browsers to test your site. You simply type in your URL and click the Test Now button.

Pingdom speed test for MerryFools

Pingdom analyzes your site as it loads, then it displays file sizes, load times and several other details about every element on your webpage.

Pingdom speed test for performance

It also provides page speed performance ratings and recommendations on how to correct the things that are slowing you down.

Test responsive design performance with Pingdom

Another great tool is Google's own PageSpeed Insights. It works similar to Pingdom in that it analyzes your web page content and then generates suggestions for improving performance.

Test your responsive design speed with Google PageSpeed

I like it because it breaks issues down into high, medium and low priority so you know what to tackle first. It also separates mobile issues from the desktop experience.

PageSpeed results shows you what needs to be fixed to speed performance

Now, for overcoming those performance issues I mentioned. These relate to reducing or optimizing HTTP requests in your responsive design, which account for the majority of bulky load times.

An HTTP request is how a user's web browser talks to your website server to call images, stylesheets, scripts or other files that piece together the look of your website on a phone, tablet or desktop.

The more requests a browser has to make, the longer a site takes to load.

So, without further ado…

1. Optimize Your Images

Images are the most common cause of a bloated webpage because they are often the largest set of assets. For each image there is one HTTP request.

The big thing now is "Retina display." It's a proprietary term of Apple but it means high-resolution imaging.

It's supposed to make it hard to tell that photo of a tropical oasis from the real thing . . . on your screen, that is.

Does this image make you feel retina-fied?

High resolution images are meant to fool the eye.

Anyway, as higher resolution images become the norm, page weight will increase with these large image files.

The problem for many is that image resizing is called in the body HTML, which doesn't actually reduce the size of the image file; it just reduces the displayed version of the image file.

And with responsive web design, one image has to load across at least three devices, all with varying screen sizes.

So if you have a full-screen, high-resolution image on your desktop version, it has to shrink down to fit the screen of a phone.

Needless to say, a large file size, even displayed to fit a phone screen, can take a long time to load.

Optimizing your images to reduce file size can greatly reduce the request time for each image.

We use Photoshop to reduce color depth without losing quality and save images in formats that reduce file size further.

For the budget-conscious entrepreneur, there are several free tools out there that do the same thing, like GIMP or Image Optimizer.

One other thing you can do is use CSS sprites. This lets you contain several images in one.

Use spritesheets to reduce the number of HTTP requests.

It's great for images that are reused throughout your site, such as a logo, social media icons and background images, and it vastly reduces the number of server requests.

In a nutshell, it involves calling a specific image area in the sprite from your stylesheet to display on the page without having to request each image separately.

A good example of CSS sprite in use would be a button image that changes color when you hover over it. Without a sprite, you'd have two images and thus two requests.

With a sprite, you can call the one image containing all the images you need, once.

2. Enable Compression

When you compress resources on the server-side of your website, you reduce the number of bytes your webpage sends over a network. What's amazing about compression is you can reduce transfer time up to about 70%.

Which is a remarkable number given that almost nobody does it.

It's a little hard to explain, but when you compress a file on your server, a compression algorithm like GZIP looks for repetitive coding in your webpage and combines it all in a zip file so that only one reference is required to handle all the others.

It then sends that compressed file to the user's browser, which unzips it and displays your website.

If your eyes just crossed reading that, I'll let Google confuse you further:

Overall, I don't think you need to know exactly how it works, just that it does and it greatly reduces the time it takes for your website to load, so you should have it enabled.

The other benefit is better SEO, as your faster load time will help improve your rankings, which in turn makes for a better user experience.

3. Cache Your Pages With Long Expiry Dates

First off, it's cache, like cash, not like cake or cashay.

Browser caching is great for instantly serving your website to users who visit you often.

It saves temporary static files on a user's web browser after the first visit so that your page is accessible as soon as your URL is entered the next time, instead of a browser having to download everything from your server again.

This is a real time saver for both your audience and your server as it cuts down on the number of HTTP requests needed to load your web page, thereby reducing server load.

There is a time limit on caching, though, and eventually the page will have to be downloaded again, but you can set the expiration time and really push it out there – up to a year.

Keep in mind, the more frequently your content is updated, the sooner you want to set the expiry dates so that your audience receives the most updated content.

4. Prioritize Above-the-Fold Content

Sites often have a ton of stuff going on for the user. Multiple sidebars, large attractive header images, links galore in the navigation, then finally the body content.

And usually a web page is coded exactly in the order it's laid out. This means as your page is rendered, it loads all of those things before it gets to the main content.

Depending on what's loading in your sidebar that could take quite a bit of time to load.

When it comes to your mobile users, especially, you want your main content to load first, before all that other stuff, so that your above-the-fold content is immediately available.

Above-the-fold content is everything a user sees on a website before having to scroll for more, as in a folded newspaper.

A simple fix is to put the main content code before the sidebar and other code.

This also goes for requests made to files that do not appear in your main content, like background images, third-party links (think social media) and non-essential scripts.

Just send those guys to the back of the line.

It's also a good idea to use inline CSS – styling that is written into the HTML code on the page – in content above the fold so that rendering is uninterrupted.

Google also recommends relocating calls to external scripts and stylesheets as they block rendering.

Because a browser parses a webpage as its written, external scripts cause rendering to pause so that script can be fetched and parsed before rendering continues.

The problem is that this starts a new request for every external script encountered.

The answer is to put those non-critical scripts elsewhere, after the above-the-fold content.

You can probably get away with putting them at the bottom of the document, things like Google Analytics which is not only an external script, but is third-party as well.

5. Minify, Minify, Minify. Oh and Optimize Your Resources

Last but not least, you can limit the number of HTTP requests by limiting the number of files requested.

Merge those external stylesheets into one file. Do the same with your external JavaScript files.

Create one file for each to rule them all.

This is important for older browsers and mobile users where the number of connections are often limited.

Also, when doing this, you should go ahead and remove all the spaces and line breaks in your stylesheets and scripts to speed things up.

This is called minifying. You can minify your CSS, your JavaScript and your HTML.

It would be a headache, though, to go through and do all of this manually.

But there are tools you can use like MinifyCSS to automagically compress and minify your stylesheet and the Online JavaScript Compression Tool for your scripts and this HTML minifier. All great tools that make minifying easy peasy.

It looks like this when you're done.

Minify your JavaScript, CSS and HTML

Isn't that beautiful? Meh. But it's efficient!

Reducing HTTP Requests Is The Easiest Way To Speed Things Up

That's where I recommend starting. Start with a page speed test, find out where you are lagging, and optimize accordingly using the prescribed methods.

  • Optimize your images

  • Enable compression

  • Use Browser Caching

  • Prioritize Above-the-Fold Content

  • Minify Resources

Sure, there are other things you could do, but these are the most common reasons your site is sluggish.

Google recommends a server response time of less than 200ms. Your above-the-fold content should render in that time as well.

As responsive websites grow in file size, performance is going to struggle.

By following the advice here you will not only speed things up, but you will help improve your rankings by making Google happy and you will make your audience happy by giving them a great experience.

Phil Foxwell writes a lot of stuff at Merry Fools. You can follow and join Merry Fools there to continue the conversation on responsive web design performance.