2 advanced techniques to dramatically increase the performance of your responsive website
May 3, 2013
This is a guest post by Peter McLachlan who is a co-founder and the chief architect of Mobify, the open mobile platform that powers the mobile experiences for leading companies such as the Expedia Affiliate Network and British Telecom. He leads design, development and security for Mobify’s software & systems. Peter holds an MSc in Computer Science from UBC where he studied visualization of large scale networking data. On sunny days he leads kettle-bell workouts on Mobify’s rooftop patio.
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.
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!
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:
Below, you’ll find the two most important ways you can address the performance of your responsive website and quickly make significant performance gains.
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.
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.