Responsive Web Design: 6 Tips to Improve Performance and UX

by 68 10/29/2013

2013 has seen a significant increase in the number of people turning to Responsive Web Design as a solution to deliver a consistent experience across different screen resolutions.

Here’s why.

Web visitors expect a similar experience regardless of the device they are using. Therefore, if a person visits your site and it is not optimized for their machine, there is a good chance that she will end up leaving and not come back.

responsive-design

What Google recommends

Google has come out with some recommendations and tools to help webmasters improve performance on smartphone devices. If you want to rank well with Google and earn points with your visitors (and who among us doesn’t?), it pays to listen.

Research has shown that if there is a delay greater than one second it may interrupt the user’s train of thought and lead to a poor user experience.

Google recommends that your web page does not need to load within this timeframe but, by prioritizing above-the-fold content while the rest of the web page loads in the background, this should be achievable.

google-rwd-speed

Google recommends that your server response time should be less than 200ms and another 200ms for the above-the-fold content on your page to render.

They also recommend that:

  • Number of redirects should be minimized
  • Number of roundtrips to first render should be minimized
  • Avoid external blocking JavaScript and CSS in above-the-fold content
  • Optimize JavaScript execution and rendering time

But there is another problem here.

Web Pages are Getting Bigger

The average web page size is now a hefty 1532 kB and growing bigger every day. This is bad for site owners and users alike. You don’t need to be an expert to know that larger pages lead to slower performance and higher bandwidth costs.

While bigger pages do have an impact on desktop users, the people who this impacts most are mobile users. People use their smart phones to discover information as it is quick and easy to do so, but with the ever increasing page bloat, it can take a long time to load a web page on a mobile device, especially if you are using 3G.

Recently Guy Podjarny conducted some tests on sites that use responsive web design (RWD). He discovered that most RWD sites downloaded the full content of the page on different screen resolutions, despite the fact that there were some differences in the content and size of images shown on the various sized screens.

page-size-2013

As web pages continue to get bigger and demand grows for perfectly optimized page for all devices, it’s important that your designers and developers prioritize performance and you set a performance budget for your project.

Let’s take a look at how you could do that…

#1 Set a Performance Budget

A performance budget is a pre-determined limit on the speed or overall size of a page. Like a financial budget, it serves as a cap to spending (or, in this case) page bloat. This means that if new pages or elements need to be added or amended, you have to make sure there is enough room within the “budget.”

If you find that adding a new element means you will exceed your budget, you need to make a decision to optimize an existing feature so it is less complex or faster, remove an existing feature altogether, or not add the new feature at all.

#2 Optimizing Images in Responsive Web Design

One of the biggest problems with bloated web pages and slow page loading on responsive websites are images. Especially with the growing number of “Retina Devices,” people want higher resolution images for their sites and it’s important that pages don’t become cluttered with 1mb image files.

content-type-size

To manage this you can use a service such as Adaptive Images. It is a very small PHP script which detects the screen size and then automatically resizes, caches and serves a scaled-down version of the image. The software can also be customised, so you can set the quality of images and browser caching.

Some people might argue that mobile service providers already compress images automatically but, unfortunately, that is not always the case with all of them.

#3 Enable Compression

You should compress your resources by using gzip to reduce the number of bytes a page is sending across the network. This will make it much easier for users to access and navigate your website with faster loading pages as well as making the usage of your web server resources more efficient.

In addition you should minify CSS and JavaScript by removing any unnecessary line breaks and white space, as this will help reduce file sizes and increase the speed they are downloaded and parsed.

#4 Exclude Unnecessary Page Elements

It’s critical that you understand how your different page elements are used by users, because it makes it easier to determine which elements can be removed to improve performance.

As a hypothetical example, you might want to test a new widget on a web page that shows off your testimonials—but adding it will exceed your performance budget. On the web page, you have three email signup forms in different locations. If you have your analytics setup correctly, you will know which form is providing the fewest email signups, and you can easily remove it in favour of the new testimonial widget.

For other pages, it might be worth looking at excluding third-party requests such as social sharing buttons. ZurBlog highlights that to “… load the Facebook, Twitter and Google social media buttons for a total of 19 requests takes 246.7k in bandwidth.”    

If a responsive page does not rely heavily on social sharing as its main traffic source, it might make sense to remove them.

#5 Pick the Right Hosting Solution

No matter how many tweaks you make to your website, a lot of the performance comes down to the quality of the servers you are using.

There is a wide array of different hosting packages offering a range of benefits and complex pricing structures, from cheap shared hosting costing a meagre few dollars per month, to cloud services and fully managed dedicated servers costing hundreds of dollars per month.

It is important to invest time in researching web hosting packages to make sure you get the best value for money and can achieve the performance your users demand.

You can start by looking at the performance of your competitors and websites in different niches to see which ones are the quickest. Once you know which sites perform the best, you can enter their details in whoishostingthis.com, which will show you which hosting provider they are using, as well as reviews as to the quality of customer support and problems with down time.

If you are still not sure whether investing in a more robust server setup is worth the additional investment, consider this: Google uses page speed as a ranking factor and there is a correlation between the time to first byte (TTFB) and search rankings.

ttfb-speed

Sites with a lower TTFB respond faster and have better search rankings than slower sites with a higher TTFB.

On top of that, every extra second it takes for your website to load, it will cause a 7% decrease in your conversion rate.

#6 Use a Content Delivery Network for Static Content

A Content Delivery Network (CDN) is a network of different servers that duplicate your content across them; this improves performance by delivering the content based on how close your users are to the server determined by the minimum number of nodes.

For example if a CDN has servers in London, Texas and China, a user from India would likely see content on the server in China where as a user from Paris will most likely be delivered the content via the London server.

When choosing a Content Delivery Network people tend to consider speed and bandwidth.

To maximize on speed then you will need to make sure that your provider has server locations near to the majority of your target audience. For example If your audience is mainly in the UK, it’s important that your CDN has servers in the UK, France or Ireland.

As for bandwidth, look at your monthly stats in your normal hosting control panel. If you only use 5GB of bandwidth per month, it makes little sense to opt for the bigger packages. You should consider purchasing a package slightly higher than your current requirements to allow for growth.

The most popular Content Delivery Networks are MaxCDN and Cloudflare, which both offer very affordable starter plans.

Once you have been through this process and followed the guidelines recommended by Google, you should test your site with the PageSpeed Tool. It will show you how well your site performs and make any necessary recommendations for further improvements.

Good for Google and your mobile users

By taking these steps and following the guidelines that Google have provided then your responsive site will be optimized for performance and provide your users with a great experience.

Have you created a Responsive site yet? Have you prioritized for performance? I’d be happy to answer your questions in the comments below.

About 

Chris Dyson helps websites to increase traffic and improve conversions with website reviews and marketing advice. Book your website in for an audit at Hit Reach.

Print Friendly

About 

Chris Dyson helps websites to increase traffic and improve conversions with website reviews and marketing advice. Book your website in for an audit at Hit Reach.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

68 COMMENTS

Kurt

I really appreciate responsive web designs. It’s a great way to say thanks to those users/viewers that choose to go to my website on their smart phone or tablet, in addition to their laptop or desktop. I know how frustrating it is, trying to view a web page that’s too big for my smart phone, especially when it’s the only thing I have to use at the time! Thanks for the great post!

October 31, 2013 Reply

    Chris

    Thanks for reading and commenting Kurt

    October 31, 2013 Reply

Ghautham

We learnt a lot of this after a lot of “trial and error” research. Happy to see a post that neatly summarizes it all.

Thanks!

October 31, 2013 Reply

    Chrs

    Ghautham – yes there is certainly a lot of trial and error still involved in optimizing for perfomance – thanks for commenting…

    November 1, 2013 Reply

Slinky Web Design

That’s a great read, we insist on responsive web design for all our clients, it no use in this time and age having a website that is not accessible on tables and smartphones. Nice read! SWD

November 1, 2013 Reply

    Chris

    Thanks for taking the time to read it :)

    November 1, 2013 Reply

Mark  

Hi Chris, great blog shared above. Really very useful information shared regarding responsive web design. Awaiting for more such useful blogs.

November 4, 2013 Reply

    Aly

    Nice blog. Thanks for sharing and keep writing. Best of luck.

    December 7, 2013 Reply

William V.

Great post, Chris!

Visitors are expecting richer and more engaging content on websites, but that doesn’t mean sites have to overload on media files and apps to choke up the bandwidth and increase load time. You provided some great tips for site performance optimiztion, especially with excluding all unecessary elements and using a CDN. Both initiatives can drastically reduce load time and keep your visitors engaged. No one likes to wait and will abandon the site even it takes an extra millisecond to load. As for CDNs, I just want to add that caching static objects is no longer the norm of the many services that CDNs offer. Some of the bigger CDNs such as Akamai and CDNetworks offer robust dynamic acceleration solutions that can also speed up the delivery of content generated in real time on the orign server.

Cheers,

November 5, 2013 Reply

Flashwebz

Chris Dyson first of all thanks for a nice article, I have read a full article and really your every 6 tips very helpful and nice article and very easy understandable.

December 1, 2013 Reply

ANNA

Thoughtful information nice

December 3, 2013 Reply

Tikona

Optimizing the web design for various screens means optimizing your website for Google. Responsive design doesn’t only improves user expereince but also ad revenue and Google trust too.

December 18, 2013 Reply

Creative Graphics

Responsive design is effect web design it is difficult to understand when we creat html page

December 18, 2013 Reply

Flashwebz

Nice one Chris good blog posted, really this is very nice blog, easy understandable content, really good written about responsive web design, very useful thanks for post!

December 27, 2013 Reply

Flashwebz

Chris first of all thanks for fantastic article, really this is very help full article very easy understandable content very nice article with helpful infographics used, thanks for post!

January 2, 2014 Reply

satya

Actually i tired it for my first web site..it works very nice..thanks..

January 6, 2014 Reply

Derick Williams

Excellent post, Chris.

Great article and lots of interesting content shared regarding responsive website design. This is really helpful. Thanks for the lovely share. Cheers!

January 20, 2014 Reply

James Morrison

Responsive website design is a great way to visit any site on any type of devices. Either it is a laptop, smartphone, tablets or the personal computers. It’s a way to create the device compatible site so that user can get a unique experience in any way. It also affect the traffic on your site from different platforms.

January 24, 2014 Reply

Jenifer

Thanks for the post Great article the information published here will be very useful. anyway thanks again :)

January 31, 2014 Reply

Boca website design

Nowadays everyone wants to increase their website performance and ux for their responsive web design and the tips you have provided is very helpful and useful thanks for sharing that wonderful points for increasing performance.

January 31, 2014 Reply

Michelle Hummel

Nice post, Chris. Each step of article makes clear sense. I most liked your suggestions such as use of ‘Adaptive Images’ & ‘Content Delivery Network’. Thanks for informative share.

February 1, 2014 Reply

Sonia

Thanks for Responsive Web Design great article. I really like this and i hope you’ll post more related to this topic.

February 9, 2014 Reply

Rommel Fernandes

Thank you very much for this informative article, Chris.

February 12, 2014 Reply

Scott Ritcher

#4 Exclude Unnecessary Page Elements

The floating ajax sharing thing on crazyegg is incredibly ugly and distracting. The deep shadow puts it in the foreground, in front of what I am trying to read.

Visitors should NEVER need to click the Reader button in Safari to get a better reading expreience than the real site.

February 14, 2014 Reply

Harsh Agrawal

Hey Chris
Thanks for useful wrte-up and doing a research on tips for responsive design with better user-experience. What’s your though on sidebar? I’m thinking of completely getting rid of it from mobiles/tablets and add only Email subscription box after blog posts..??

Also any tip for social sharing buttons for responsive layout (Mobile or tablet view to make it usable) ?

March 1, 2014 Reply

Kinnirawat

Many thanks for the exciting blog posting! I really enjoyed reading it

March 8, 2014 Reply

Robert

These tips are highly appreciateable, Although I believe there are other factos too which improve performance in responsive web design, I guess you do need to follow those too.

March 16, 2014 Reply

Daniela

Great choice of topic. Nowadays design and usability are the perfect mix for mobile succes and users expect mobile services to be relevant and user-friendly and to perform well. And no doubt that the real challenge is to optimize message and design for different mobile devices, such as smartphones and tablets, that are connected with different mindsets, needs and moods.

March 26, 2014 Reply

Ayesha Goyal

Nice post regarding responsive design. Responsive web design technology uses different elements with fluid grids. The size of the elements is in proportion instead of pixels. It changes the appearance of the site depending upon the screen of the device used. It generally serves the scroll problem faced while browsing sites on the mobile devices or tablets. It is in rapid growth since the use of smartphones and mobile devices.

I would like to hear more on this technology as it will help in designing.

May 3, 2014 Reply

    Kathryn Aragon

    Glad you found it helpful, Ayesha. It’s incredibly important to incorporate response design in every website since users want to be able to access our sites from any device. Thanks for stopping by.

    May 3, 2014 Reply

    neil

    Ayesha, glad you liked it. Thanks for reading and I look forward to hearing more from you :)

    May 4, 2014 Reply

    Chris Dyson

    Thanks for your kind words Ayesha

    July 8, 2014 Reply

Sunitha dass

Interesting insights to imporve the performance and usability!! Between i just liked the point #2 saying it is very important to optimize and compress images for responsive designs! Thanks for the informative post. Working hard to follow it in my job!

June 16, 2014 Reply

    Neil Patel

    Sunitha, glad you liked the post. Thanks for the great feedback. Looking forward to hearing more from you :)

    June 16, 2014 Reply

    Neil Patel

    Sunitha, glad we could help. Please let us know if you need help with anything else :)

    June 17, 2014 Reply

Umesh Kumar

There are very good tips for improving designing

June 24, 2014 Reply

sushil

Thanks for sharing the Responsive Web Design Tips

June 26, 2014 Reply

Umesh Kumar

You provided great tips for site performance optimiztion. It is good for designing.

July 8, 2014 Reply

Enstine Muki

I think now from SEO point of view also Responsive designs are given a lot importance.

July 11, 2014 Reply

Hiren

webpage speed is very important part for a website. Responsive web design play very important role to drice traffic on your website. Thanks for nice information.

July 28, 2014 Reply

    Neil Patel

    Hiren, thanks for the feedback. Glad we could help :)

    July 28, 2014 Reply

james

Website Speed is really important .Installing total cache plugin and propery setting it makes our blogs speedy .Wp smush it is also a Nice plugin to improve page load speed .Thanks Cris of this new updates

August 3, 2014 Reply

    Neil Patel

    James, great points! Looking forward to hearing more from you :)

    August 3, 2014 Reply

Denise

Every website owner needs a responsive web design now. Thanks Chris for highlighting some crucial points. I have come across some more aspects, which are also useful. You can find them here.

August 5, 2014 Reply

FredMe

Neil, Amazing post like always, thank for that. I experimented responsive wordpress theme on my work and I can confirm that, we have a great difference and awesome results.

September 14, 2014 Reply

    Neil Patel

    Fred, glad you found it helpful. Looking forward to hearing much more from you :)

    September 15, 2014 Reply

Bhavia

Excellent post on responsive web design. I am very glad that I came across your post. Thanks for the detailed explanation it’s extremly helpful. I am not very familiar with few of the things you have mentioned, but would definitely try to implement it in my work. This is an excellent reference material for my web design and web development company.
Thanks for sharing. Looking forward to your new blog.

October 24, 2014 Reply

John

Thanks for this wonderful blog. As the way of accessing information online has changed; as more and more people access the web via the smart phones or tablets. Therefore, having a responsive web design is mandatory, so that, people can access the website in a user-friendly way, and the traffic does not get limited. Companies that offer lucrative, responsive design and development decreases the loading time of the website on smartphones or tablets, so that, users don’t get frustrated easily.

But can you kindly clarify one point, that; how can a CDN may be helpful for static content? How by optimizing images in responsive web deign will help? Will it not decrease the resolution?

November 19, 2014 Reply

    Kathryn Aragon

    Hi John. To answer your CDN question, check out this thread. As for image resolution in responsive design, yes, quality can be affected. Workarounds are technical, but there are some plugins that can help. This article gives a good list.

    November 19, 2014 Reply

Steve Mark

This is very interesting and deep information about Responsive web design and services. Thank you for sharing.

November 27, 2014 Reply

    Kathryn Aragon

    Glad you liked it, Steve.

    November 27, 2014 Reply

    Neil Patel

    Steve, glad you found it helpful. Looking forward to hearing much more from you.

    November 27, 2014 Reply

Ios

I believe that optimizing the web design for different screens means also optimizing your website for search engines. Responsive design not only improves user expereince but also loading times and trustrank also (my 2 cents).

December 11, 2014 Reply

Melina

Very well explained and nicely written article.

Thanks for the post and Keep posting the good work.

December 16, 2014 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>