It’s an easy mistake: designing a responsive website without focusing on its performance. And even experienced web designers commit it. It’s also the worst thing that could happen to the responsive Web movement, one that’s gravely affecting a user’s experience in the name of future-friendliness.
Is responsive design inherently low on the performance front and is there nothing you can do about it? Hell no! “Responsive design has seemingly become confused with an opportunity to reduce performance rather than improve it,” as Stephanie Rieger eloquently put it. But what can possibly be done to increase the performance of a responsive website, you ask? Keep reading!
Get over with that bloated web page syndrome
On the one hand, a responsive site needs no redirection from desktop to mobile site and this gives it a speed advantage over a dedicated mobile site. On the other hand, most responsive sites unfortunately are overweight and take a good time to load on mobile devices; this makes them fall flat in front of dedicated mobile sites that are mainly the lite counterparts of their desktop versions. The sight has become very common even with non-responsive sites, so it wouldn’t be wrong to say that not just responsive design but website obesity has also become de rigueur – and sadly so.
You can start from setting up the maximum size for a web page. And you can use the amazing performance guidelines laid down by Yahoo! and Google and their tools – Yslow and Google Page Speed – for analyzing and optimizing your website.
Acknowledge and be ready to fight with network bottlenecks
Mobile networks can’t be relied upon when it comes to hiccups, though we all know their speed will increase in the near future, like it has been for quite a while – from 2G to 3G, 4G and LTE. To make sure that network bottlenecks don’t affect much of a user’s experience, you can use compressed media for low-bandwidth connections, whereas HD for high-bandwidth connections. And you can also change the quality of image as per the connection speeds. Auto refresh is also one of the functionalities that should not be used if there’s no option to disable it.
Playing around with images a bit can do wonders with your loading speed. And why play with just images, why not all the elements that’re not so necessary for a mobile user, like social media widgets, maps etc. You’re right, we’re talking about conditional loading here. What the heck is it, you ask? It’s a technique that helps you conditionally load contents in the sidebar with the help of Ajax. This technique can help you boost the loading time of your responsive site.
To summarize, responsive web design is not and should never be a reason to compromise with the performance of a website. It’s a beautiful concept. Let’s use it beautifully.