TL;DR
The responsive design approach is a powerful way of launching websites that adapt for today’s multi-screen world. But the design benefits have a trade-off – specifically in performance. With a few small enhancements: script concatenation and compression and image resizing, it’s possible to overcome these performance hurdles and lead with a design that not only looks great, but is super fast for your users.
Going responsive
Many web designers consider responsive design to be the best approach for building new websites. Evidence for this is throughout top web design magazines such as Smashing Magazine, A List Apart or CSS Tricks that reveal a wealth of information on the subject.
If you’re not familiar with it, responsive web design lets designers create websites with optimized web experiences for visitors on a variety of screen sizes and resolutions. There’s a good reason for responsive design’s popularity; with screen size and resolution changing yearly, we all want websites to look great on the newest devices. Easy to use responsive front-end frameworks such as bootstrap are making it much less complicated for designers to create new responsive projects and learn the techniques necessary for going responsive.
Going responsive is not without challenges, especially when it comes to performance. With responsive design the HTML is the same for every visiting device and each time a page loads on mobile it also loads all of the HTML elements including images & scripts intended for the tablet and desktop sites. Every time a user visits your site they download the full page content by default – no matter which device they are using.
We conducted an analysis into 15 top responsive e-commerce sites which revealed that the average responsive site home page consists of 87.2 resources and is made up of 1.9 MB of data. If the number of resources sounds high, that’s because it is; together they dictate how the web page should render on all desktop, smartphone and tablet devices. What’s more, these numbers are trending in the wrong direction – the average responsive page has grown over the past year!
Source: Guy Podjarny, Real World RWD Performance – Take 2
On the plus side, you’ll notice in the above chart that the difference in page size between screen resolutions has increased between 2012 and 2013. In fact, almost 30% of responsive websites have started delivering slightly smaller payloads to smaller screens. It’s a great start, but the performance benefits are minimal when you take into account the overall increase in page size. Users are still waiting far too long for large and over-resourced pages to load on their devices. And in a world where 57% of your mobile customers will abandon your site if they have to wait 3 seconds for the page to load, there’s an urgent need to supercharge your responsive website.
What you need is a way to quickly reduce the number or resources and size of your page with minimal impact on your existing website:
Before: a responsive e-commerce website, before performance enhancements. It loads 136 resources, and is 9.02 MB.After: the same responsive e-commerce website, after script and image optimization. It includes 23 resources and is 581.81 KB, leading to a much faster load time, reduced bandwidth costs and much happier customers.
Below, you’ll find the two most important ways you can address the performance of your responsive website and quickly make significant performance gains.
Compress and concatenate CSS and JavaScript to reduce the number of HTTP requests
One of the most effective ways to quickly speed up the performance on your responsive website is to make sure that only the necessary resources are sent to customers’ smartphones, tablets and desktops. By optimizing the number of HTTP requests, you can reduce the amount of time a users spends waiting for the DOM to load.
To achieve this, you can compress and concatenate CSS and JavaScript resources. Tools such as Sass and Compass are great for CSS compression. You can use them to eliminate overhead by using a more elegant syntax and better stylesheet structure.
For Javascript compression, you can use a tool like Uglify. Uglify is one of the elements that powers the JavaScript compression in Mobify.js, our open source framework. We like it because it’s the fastest and the least error-prone of the JavaScript compressors.
Serve the right images to the right devices
Images make up the majority of kilobytes in most web pages. As such, they also pose one of the biggest problems in responsive design. If a responsive design uses one markup across devices, how can you ensure that only big, beautiful images are served to your Retina Macbook Pro, while making sure that a standard definition smartphone is sent smaller images that make sense for its lower-resolution screen?
The good news is that there are a number of different solutions to the responsive image problem. One way people have been making headway is by modifying existing backend markup, changing the src of all their img elements to something like data-src, and accompanying that change with a <noscript> fallback. Others have tried to avoid the need for changing your existing backend, such as the PHP solution Adaptive Images.
At Mobify, we’ve created an open source (and free as in beer!) JavaScript solution that lets you dynamically optimize your images for all screen sizes and resolutions. Using a single JavaScript tag inserted into your HTML, you can deliver responsive images through our global CDN. This means that you can always send the right images to the right devices, and do so at remarkable speeds – without needing to change your website.