Responsive Web Design: 6 Tips to Improve Performance and UX

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.


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 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.


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.


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, 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.


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.


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.


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.


  1. 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!

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


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

  3. 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

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

  5. 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.


  6. 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.

  7. Thoughtful information nice

  8. 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.

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

  10. 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!

  11. 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!

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

  13. 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!

  14. 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.

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

  16. Boca website design says:

    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.

  17. Michelle Hummel says:

    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.

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

  19. Thank you very much for this informative article, Chris.

  20. #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.

  21. 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) ?

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

  23. 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.

  24. 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.

  25. 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.

  26. 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!

  27. There are very good tips for improving designing

  28. Thanks for sharing the Responsive Web Design Tips

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

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

  31. 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.

  32. 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

  33. 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.

  34. 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.

  35. 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.

  36. 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?

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

  38. 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).

  39. Very well explained and nicely written article.

    Thanks for the post and Keep posting the good work.

  40. Hi Chris,
    Great tips! I really enjoyed reading all the information and thanks for sharing it.

  41. Chris, Neil and Kathryn,

    Thank you so much for the insightful article, I believe that your six tips are very worthwhile and valid points. I also genuinely appreciate that you mentioned Google requirements and their importance in website optimization. Addressing these six tips, I firmly believe that setting a performance budget is incredibly useful and will set a high standard for task performance and monetary efficiency. To be economically efficient and effective and to keep a company within its “budget,” I suggest comparing relevant website rankings and their “performance budgets” to see what Google and other search engines feel are most effective. In response to your second point, optimizing images in responsive website design, I agree with your points and add that the webpage cannot only be too cluttered with images but one must be careful not to upload images that have too high of a resolution because that, too will increase reponsive loading speed. With enabling compression, I agree that navigation will be much easier responsively. Effective minimalism is a term that I like to use for this key component. This should not only be applied to the coding aspect of RWD but to the layout features as well. This relates to the fourth point, excluding unnecessary page elements. While the third point addressed more of the technical aspects of conciseness, this addresses more of the user interface. The user experience is of the utmost importance when developing website responsiveness. As stated earlier, effective minimalism is key. Such shortcuts include “Read more” buttons, drop-down menus, lists, etc. Integrating a captivating and unique homepage will make the user want to further explore the site on their device. Text fonts, styles, and sizes are also incredibly important visual factors that should appeal to the viewer. The hosting solution platform I found intriguing, I had never thought of the importance of that aspect prior to reading this blog post. After analyzing its components, I found the statistics to be very helpful. What I took away from this section was that connecting with a quality host for a decent price (going back to Tip #1, staying in budget) will amplify one’s website speed and lead to better Google optimization. The last tip, creating a content delivery network for static content, I thought was a brilliant idea. I was unaware of this concept before reading about it; it relates to Tip #2 in the sense that speed will be much faster and bandwidth will significantly improve. I find this optimization tactic to be extremely useful and will employ its use in my future RWD endeavors.

    Thank you again for the blog post, if you are looking to research more about responsive website design from a different approach and perspective please take a look at my company website blog at:

    Best regards,


  42. Nice post, Thank you for sharing this.

  43. Thanks for this tips.We learnt a lot of this after a lot of “trial and error” research.

  44. It helped to make my website mobile friendly unless google would kick of my site for mobile visitor Thank you

  45. How can I make my website responsive to be accessed on the mobiles platforms without any challenge?

  46. Thanks for sharing a very important information to us and its very helpful.It’s nice to see some interesting info in this blog and i learn from this blog that how to use fresh content.

  47. Thanks for the Website info

  48. Web Design is a must for all


  50. Thanks you for sharing this information very helpful.

  51. The world is changing rapidly. I well researched articled in line with the dynamism in the web-based world.

  52. Thanks alot for your 6 valuable tips. i want to know more about Gzip page compression as i am looking to reduce my pageload speed on my site !! awaiting ur reply :)

  53. A responsive site is a thought of the user. However this is not an obligation as to the progress and capabilities of users themselves can adapt to any website. It is a cosmetic issue these days.

  54. very good analysis and have done a great work.

  55. Anonymous says:

    The trend is now of Responsive website design, website can be viewable on any type of devices it may be on laptop, smartphone, tablets or the desktop. A use will get unique experience. Search engine give importance for responsive website design.

Comment Policy:

Please join the conversation! We like long and thoughtful communication. Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment. Finally, please use your favorite personal social media profile for the website field.

Speak Your Mind