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 analyzes your site as it loads, then it displays file sizes, load times and several other details about every element on your webpage.
It also provides page speed performance ratings and recommendations on how to correct the things that are slowing you down.
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.
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.
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?
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.
One other thing you can do is use CSS sprites. This lets you contain several images in one.
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.
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.
It would be a headache, though, to go through and do all of this manually.
It looks like this when you're done.
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
Use Browser Caching
Prioritize Above-the-Fold Content
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.