Responsive Web Design: 6 Tips to Improve Performance and UX

by Chris Dyson

Last updated on January 10th, 2018

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.



Get updates on new articles, webinars and other opportunities:

Chris Dyson

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.


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.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Logonado says:
    August 8, 2017 at 8:54 am

    It helped to make my website more mobile friendly and responsive so thank you for the tip 🙂

  2. Anonymous says:
    May 9, 2017 at 7:37 am

    Today responsive website is the trending. Website should be viewed on all type of devices like Mobile, Tablet, iPad etc. thanks for your 6 informative tips. I will pay attention to my next website.

  3. xmodgames app says:
    March 7, 2017 at 7:04 am

    Responsive web designs and Web progressive Apps are the need of this current time because there are thousands of apps are being launched throughout the world But we cant install every app in our mobile. So web progressive apps are being used by most of the organized like Facebook, Quora etc. On the other hand responsive website are also important so that website can take the size of current screen.

  4. Arthur says:
    June 23, 2016 at 8:06 am

    I have been getting it wrong with images.thanks for the read

  5. ndemi says:
    June 22, 2016 at 5:06 am

    Google is such a mysterious search engine….on the positive side though

  6. Anonymous says:
    April 16, 2016 at 6:28 am

    thax Chris for such a great artical..Responsive websites is making one website,which acts and behaves like individual websites have been made for each devices.

  7. Anonymous says:
    January 5, 2016 at 3:33 am

    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.

  8. Annie says:
    November 20, 2015 at 4:46 am

    very good analysis and have done a great work.

  9. Mathieu says:
    October 7, 2015 at 5:55 pm

    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.

  10. henry says:
    July 29, 2015 at 3:37 pm

    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 🙂

  11. July 1, 2015 at 3:46 am

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

  12. Gabu says:
    June 30, 2015 at 1:41 am

    Thanks you for sharing this information very helpful.

  13. Dennis says:
    June 29, 2015 at 4:36 am


  14. Achieng says:
    June 26, 2015 at 1:47 am

    Web Design is a must for all

  15. Achieng says:
    June 26, 2015 at 1:46 am

    Thanks for the Website info

  16. Sue says:
    June 23, 2015 at 5:17 am

    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.

  17. Dennis says:
    June 22, 2015 at 8:19 am

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

  18. May 3, 2015 at 8:00 am

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

  19. Kelvin says:
    April 11, 2015 at 2:04 am

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

    • April 11, 2015 at 11:05 am

      Trial error is the hard way to learn. Glad you liked the post. 🙂

  20. Jin says:
    April 7, 2015 at 6:36 am

    Nice post, Thank you for sharing this.

  21. Kate says:
    February 23, 2015 at 3:35 pm

    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,


    • February 24, 2015 at 9:04 am

      Hi Kate. Great insight. Thanks for sharing your expertise. I’ve already referred back to this comment when responding to another comment this morning. lol. Looking forward to seeing more of you around the blog.

      • Kate says:
        February 25, 2015 at 4:07 pm


        Thank you for referring to the post! Glad I could be of some help. 🙂


  22. Jay Patel says:
    February 4, 2015 at 3:44 am

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

  23. Melina says:
    December 16, 2014 at 5:28 am

    Very well explained and nicely written article.

    Thanks for the post and Keep posting the good work.

  24. Ios says:
    December 11, 2014 at 1:26 pm

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

  25. Steve Mark says:
    November 27, 2014 at 6:42 am

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

    • November 27, 2014 at 9:45 am

      Glad you liked it, Steve.

    • Neil Patel says:
      November 27, 2014 at 12:40 pm

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

  26. John says:
    November 19, 2014 at 6:55 am

    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 at 1:15 pm

      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.

  27. Bhavia says:
    October 24, 2014 at 4:48 am

    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.

  28. FredMe says:
    September 14, 2014 at 6:55 pm

    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.

    • Neil Patel says:
      September 15, 2014 at 12:43 pm

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

  29. Denise says:
    August 5, 2014 at 8:35 am

    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.

    • Neil Patel says:
      August 5, 2014 at 3:49 pm

      Denise, thanks for the tips!

  30. james says:
    August 3, 2014 at 11:20 am

    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

    • Neil Patel says:
      August 3, 2014 at 9:57 pm

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

  31. Hiren says:
    July 28, 2014 at 12:42 pm

    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.

    • Neil Patel says:
      July 28, 2014 at 2:34 pm

      Hiren, thanks for the feedback. Glad we could help 🙂

  32. July 11, 2014 at 3:07 pm

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

    • Neil Patel says:
      July 12, 2014 at 11:58 am

      Enstine, great point. Thanks for the share 🙂

  33. July 8, 2014 at 6:35 am

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

    • Chris Dyson says:
      July 8, 2014 at 6:38 am

      Thanks Umesh

    • Neil Patel says:
      July 8, 2014 at 1:10 pm

      Umesh, glad we could help 🙂

  34. sushil says:
    June 26, 2014 at 9:22 am

    Thanks for sharing the Responsive Web Design Tips

    • Neil Patel says:
      June 26, 2014 at 6:00 pm

      Sushil, glad we could help 🙂

  35. June 24, 2014 at 8:21 am

    There are very good tips for improving designing

    • Neil Patel says:
      June 24, 2014 at 5:10 pm

      Umesh, glad we could help 🙂

  36. June 16, 2014 at 6:45 am

    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!

    • Neil Patel says:
      June 16, 2014 at 12:33 pm

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

    • Neil Patel says:
      June 17, 2014 at 1:56 pm

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

  37. May 3, 2014 at 3:37 am

    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 at 3:40 pm

      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.

    • neil says:
      May 4, 2014 at 9:11 pm

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

    • Chris Dyson says:
      July 8, 2014 at 6:39 am

      Thanks for your kind words Ayesha

  38. Daniela says:
    March 26, 2014 at 4:11 am

    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.

  39. Robert says:
    March 16, 2014 at 1:28 pm

    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.

  40. Kinnirawat says:
    March 8, 2014 at 5:16 am

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

  41. March 1, 2014 at 4:33 pm

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

  42. February 14, 2014 at 3:06 am

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

  43. February 12, 2014 at 9:17 pm

    Thank you very much for this informative article, Chris.

  44. Sonia says:
    February 9, 2014 at 4:18 am

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

  45. Michelle Hummel says:
    February 1, 2014 at 3:43 am

    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.

    • Chris Dyson says:
      July 8, 2014 at 6:41 am

      You are welcome Michelle

  46. Boca website design says:
    January 31, 2014 at 7:16 am

    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.

  47. Jenifer says:
    January 31, 2014 at 3:40 am

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

  48. January 24, 2014 at 4:43 am

    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.

  49. January 20, 2014 at 3:22 am

    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!

  50. satya says:
    January 6, 2014 at 5:42 am

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

  51. Flashwebz says:
    January 2, 2014 at 12:11 am

    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!

  52. Flashwebz says:
    December 27, 2013 at 4:32 am

    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!

  53. December 18, 2013 at 11:58 pm

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

  54. Tikona says:
    December 18, 2013 at 7:12 am

    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.

  55. ANNA says:
    December 3, 2013 at 6:54 am

    Thoughtful information nice

  56. Flashwebz says:
    December 1, 2013 at 11:12 pm

    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.

  57. William V. says:
    November 5, 2013 at 12:24 pm

    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.


  58. Mark   says:
    November 4, 2013 at 4:27 am

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

    • Aly says:
      December 7, 2013 at 2:23 pm

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

  59. November 1, 2013 at 4:59 am

    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

    • Chris says:
      November 1, 2013 at 9:14 am

      Thanks for taking the time to read it 🙂

  60. Ghautham says:
    October 31, 2013 at 10:02 pm

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


    • Chrs says:
      November 1, 2013 at 9:15 am

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

  61. Kurt says:
    October 31, 2013 at 5:51 am

    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!

    • Chris says:
      October 31, 2013 at 9:28 am

      Thanks for reading and commenting Kurt

      • Brendah says:
        June 24, 2016 at 2:31 am

        Great article on webdesign.

Show Me My Heatmap

Ah, @CrazyEgg I really do love you! So useful evaluating how users are interacting with all aspects of our redesign

Mike Halligan


What makes people leave your website?