If you've been following the growth of responsive web design, you've probably come across some truly awe-inspiring responsive websites that demonstrate just how exciting this approach can be.
On the flip side, you’re also likely aware of some of the challenges that come with a responsive approach, such as poor performance.
This article explores what makes many responsive websites so slow, and introduces the various elements of Mobify Performance Suite – a series of new features to Mobify – that target these performance problems. By the end, you’ll understand exactly how Mobify makes responsive websites faster, as well as how you can get started using our free tools.
So, why are responsive websites so slow?
The slow load times associated with responsive design are due to the number and size of the resources used to create an engaging site that works across different devices. As the chart below demonstrates, the numbers have recently been trending in the wrong direction.
The biggest culprits contributing to this performance challenge are high-resolution images. Images typically make up the majority of data on a page, so they’re typically the number one offender when we talk about performance problems.
Responsive websites use the same HTML for every device - so the question is how do you ensure that you deliver a large, high quality image to your visitor’s Retina Macbook Pro, while making sure that an old smartphone on 3G is sent smaller images that make sense for its lower-resolution screen and low bandwidth availability?
There are also secondary performance troublemakers lingering in the background, such as high numbers of HTTP requests caused by external scripts, and the unnecessary loading of resources contained within HTML elements that are usually hidden on mobile.
Are there existing solutions available?
Finding a fully automated solution to the responsive performance issue – particularly responsive images – has been a bit like the quest for the holy grail for web designers over the past year or so, and there are a number of different solutions that already exist.
Unfortunately, most approaches to solving the problem either require extensive changes to your existing site structure – by using server-side user-agent detection – or force you to break semantic web standards.
Mobify advocates a client-side approach, so we decided to try something a little different.
How does Mobify Performance Suite make responsive websites faster?
The technology powering Mobify Performance Suite uses a technique called Capturing, which is a client-side API designed to give developers complete control over the DOM before any resources have started loading. By inserting the Mobify script into the
This lets us make three kinds of optimizations:
1. Image Optimization
The key feature of Mobify Performance Suite is the image optimization service, which:
- Resizes images based on the maximum width of the browser window
- Serves WebP images to supported browsers, and
- Distributes images from Mobify's CDN
<img> resources to the correctly sized image on Mobify’s CDN (based on the widths and formats sent to it from the client – your device). These optimized images are stored on the CDN for around two months, so the next time a device with the same requirements accesses your page, the right image is ready to go.
The end result is that you always send the right images to the right devices, and can do so at remarkable speeds. Boom! Responsive images.
It’s worth noting that there is a limit to how many images you can convert for free per month, but it’s possible to use a different image resizing service like src.sencha.io, or make your own if you feel like it.
3. HTML Simplification
Another common issue caused by a responsive design’s single set of markup is the need to hide specific elements in the DOM at certain breakpoints. To get around this, designers typically use display:none to hide unwanted elements on smartphones or tablets. However, these workarounds simply hide the element – the browser still downloads all of the resources contained within them anyway.
The end result is that users on mobile are forced to spend time waiting for resources to download that they’ll never actually see.
Since Capturing allows you to restructure the HTML, Mobify Performance Suite lets you selectively remove DOM elements at certain breakpoints without implementing non-semantic workarounds. It is the one major feature of Mobify Performance Suite that is not automatically turned on, since elements need to be selected manually.
This way, rather than putting large ad units in elements that are hidden on smartphones, you can stop these elements from ever making their way into the DOM, thus making sure that the resources contained within them never get downloaded.
Conclusion (and how to get started)
You love responsive design, we love responsive design, and Google loves responsive design. As a methodology, it has taken the web design world by storm. But with responsive design comes significant performance challenges, which is why we’ve created a set of free-to-use, automated features that reduce both the page weight and the number of HTTP requests in order to improve the speed of a responsive site on smartphone and tablet devices.
If you’re keen to try it out, getting started with Mobify Performance Suite is very easy - simply enter the URL of your site into the tool below and we’ll show you how much faster your responsive site could be on mobile! You can also check out the developer documentation, which explains each of the features in greater detail.
Got any questions or feedback? Let us know in the comments below!