Responsive design has exhibited several performance issues in the recent times. The irony is – responsive design is doing pretty well on the latest range of smartphones, but nothing beyond the same.

You may be confused as most web users have high-end smartphones. However, a large population is still using mobile devices with a small screen size running on an old version of Android or iOS and maybe just a feature phone with little functionality. As a result, responsive design is not serving a wider audience as supposed to do.

The long-held belief that responsive design is for mobile devices of any screen size has a lot to do with this problem. As performance is dripping and dissatisfaction is increasing, there is a need to look beyond responsive design. Focus should be instead on ensuring a responsive performance. This post is about the same.

So, the big question is what to do?

Discard desktop-first design concept

A significant contributor to this persistent problem is that still the focus is on a desktop-first design approach. The emphasis is on designing a website for a desktop and then designing for other devices like smartphones and tablets. For any missing functionality, developers use shims and polyfills generously. Of course, there are vast libraries to ensure a rapid development. However, this does not address the issue of browser incompatibility. Is it justified to engage in a design concept that is not yielding desired results?

It is not very tough to implement a mobile-first design approach in which aim will be to offer only the intended information to the mobile user on his or her screen instead of all the things that are killing the device. Luke Wroblewski conceptualized this design approach for the first time in 2011 and since then, many industry experts have lauded his breakthrough design approach.

More data, even if it is taking a fraction of a second can have a remarkable impact on the overall loading time. However, it is also true that websites are getting heavier with graphic-rich content, and more people are using their mobile devices to access the same. When a user types the URL of a website on a mobile with a low-resolution screen, his aim is always to access the website content, but what he experiences is a nightmare. This is because of the difficulty in navigating via the endless unnecessary advertisements. Remove such avoidable content elements to allow your user to access the main content. This increase the site traffic, as apart from users with high-end smartphones, many will access your website via low-resolution mobile devices. Delivering a text-only version makes perfect sense if the mobile has limited capabilities, but then again, you may say the user experience gets compromised. Well, it is, but it is still better than receiving no content at all. At least in such a case, users will access the basic information about your site. Is there any point in designing a website in such a manner that it reduces its potential reach?

You will surely accept the fact that waiting endlessly only to check a website does not excite anyone. As per some surveys by Akamai and Gomez.com, an approximately 50% of the web users highly expect a website to load within 2 seconds or even less. There are more chances of site abandonment if a website fails to load in the browser within just 3 seconds! Moreover, most of the e-commerce websites nowadays have a large number of social sharing buttons like Facebook, Google Plus, Twitter, LinkedIn, etc. Do you know these buttons add more than 500KB to your responsive site and affect its performance? The Facebook like button alone demands a compressed code of 270KB! It also requires multiple HTTP requests. Instead, use social sharing buttons based on URLs as such a huge size is inevitably affecting the loading time of your responsive website even if the mobile connection is fast.

A website’s performance has a direct impact on the performance of a business and a slow responsive website never does anything good for a business. Believe or not, most mobile users are not interested in doing research or in reading long articles. Most of them use their mobile devices for an easy access to Facebook, WhatsApp, Twitter, and for indulging in the joy of online shopping. Moreover, mobile is no more a trend, it is the future.

As per the last year’s statistics of Comscore, the number of mobile-only Internet users in the U.S. has increased sharply while the desktop-only users are reduced to 10.6 percent.

Need to say anything more to convince?

Ensure graceful degradation

In the last few years, you may have come across the new buzzword in the world of responsive design, and it is ‘graceful degradation’. Yes, graceful degradation implies that even if a feature does not work successfully, it should fail in a way that it facilitates an acceptable usability. This means, creating a website design for a desktop and then gradually moving to tablets, smartphones and feature phones. The performance of a responsive design in which the website is degrading gracefully is bound to be high as the user experience is here always a top-notch one. The website will remain functional in spite of any shortcomings, and a visitor will be surely impressed with the overall quality.

Now, you may have this question in your mind that what is so fascinating about graceful degradation. The answer is simple. This is because it makes your content, visible and readable regardless of the browser, which is a remarkable feat! Fortunately, if you are using CSS3, graceful degradation becomes an easy job as most of the properties of CSS3 degrade automatically i.e. rounded corners become square, the text is wrapped instead of running in one single line, gradients become flat colors, and much more.

Let us have an example of graceful degradation. Suppose, you have designed a responsive website with JavaScript features and these features are not supported by your browser or may be disabled on your client’s side. So, what can you do to get the content? Well, in such a case, graceful degradation allows your browser to display the content within the “noscript” tag.

This you can understand better with the coding given below:

<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled. 
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>

There is one more example of graceful degradation that I would like to share, and it is the usage of HTML5 by YouTube for playing videos. Suppose, your browser is not supporting HTML5, the video will display by using Flash, and if even Flash is not installed, you will receive a message to install the same on your mobile device. In either case, you will be able to watch the video. However, one drawback of this graceful degradation is although performance is good, you have to compromise with certain design elements if you are using outdated browsers. I guess determining the essential visual elements of your website beforehand can do the trick.

No need to keep unused libraries

One best practice can be not keeping libraries that are not in use. Yes, it is true that keeping track of the used libraries and the unused ones is very time-consuming, but it is indeed worthy. Sometimes, you may have noticed that you are using only a single functionality after the inclusion of a library. It can be sometimes two or three even. The most often tool that I use for creating a responsive design is jQuery. In fact, there are plenty of jQuery libraries helping developers to create responsive websites. An inclusion of several libraries like the JavaScript libraries just because you have liked some widgets is going to increase your page loading time to a significant extent. However, it will be a neat practice to analyze which libraries are in use and to what extent.

Check the availability of features

You can check whether your device supports a certain feature or not before activating the same. For example, it happens that although you have installed the latest version of Google Chrome on your outdated Android phone, it is still not displaying your website. Sometimes, in an attempt to load such a website, the browser is crashed so badly that it makes the entire mobile device unresponsive. You need to reboot the device, and this is the last thing that you have desired isn’t it? Many users of certain web applications are already suffering due to this issue.

Unavailability of features on devices and yet designing websites or applications has resulted into some noticeable problems like the instant crash of Google Hangout apps on Android devices worldwide irrespective of the browser type. This is in spite of the fact that the app was a lightweight app. You may argue that users were using an older version of Android smartphones, but it is also true that such devices are still available off the shelf as a brand-new one in any of the mobile stores. Many mobile users face the same performance issue with YouTube and Twitter app too. Even an update of Google’s Android System Webview service via Google Play freezes many smartphones to become a sort of nightmare of users.

Optimize images

Including visually appealing large images is always tempting for the designers. The problem arises when they do not compress these images before uploading them into the CMS. This is especially true with multiple e-commerce websites across the web. As per the recent research by Radware, pages are getting bigger, and an approximately 45 percent of the top 100 retail sites does not engage in image compression. This makes such sites bulkier and as a result, the loading time is increased, but as a designer, you can avoid the problem.

Make the images with smaller size by using a suitable image optimization tool. There is, in fact, no dearth of such tools over the web. Some of the notable ones that you can put to use are Dynamic Drive, Smush it and Riot. If you are a pro in Photoshop, you can also optimize the image size by yourself. Use a smart compression technique and strip it from any redundant metadata. Converting graphics into PNG, color-rich images to JPEG, and animated ones to GIF also does the trick.

Geared up for extreme cases

When you start designing, you must have noticed that you get tempted to design the pages that are easier. At least, this enables you to show something to your stakeholders. This may seem nice at first sight, but if you focus your efforts towards the most challenging scenarios, in the beginning, you will get a good result.

For example, a web page featuring some articles, blogs, and press releases. It must have a title too. Now, what will happen that if the title space that you have thought to show “Responsive Web Design Tips” has to show a title “10 Essential Tips and Techniques for Successful Responsive Website Design”? Now, this is an extreme case.

An effort like the above to optimize your responsive website’s performance seems invisible. However, these efforts yield good returns with happy and satisfied users. You can take help of various tools like Pingdom tools that can enable you to monitor the load time of your responsive website effortlessly. Do not skip the vital aspect of testing to make sure that your responsive website is performing as intended. Test it on as many real devices as you can.

You can also make use of resources like Screenfly that enables you to test your website on multiple screen resolutions. You can argue that all these strategies need a significant amount of time, but then again, one need to sweat hard to reap the benefits. Nowadays, creating a responsive website with a responsive performance is essential, even more since Google is rating sites based on their performance. If you are a designer or a developer, do not limit yourself to any one of the above best practices. You should look for more solutions and may push hard to deliver a website exhibiting responsive performance.