Mobify Developer Blog Mobify
, June 20 2013

Inside Mobify Performance Suite: Automating Responsive Images, Script Optimization and More

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.

Guy Podjarny's Real World Responsive Web Performance Chart
As we become better at creating beautiful responsive websites, the size of pages has actually been increasing year on year. Source: Guy Podjarny, Real World RWD Performance – Take 2

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?

Mobify Performance Suite is powered by Mobify.js, our open source JavaScript framework. It performs a series of optimizations on your mobile and responsive website via a single JavaScript tag inserted into your website’s HTML. This tag is generated in your Project Dashboard, and for users who want to see performance optimizations without customizing anything, it’s possible to simply place the tag in your website, relax, and enjoy the newfound page speed.

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 <head> of your page, it works as a blocking Javascript call that can delay the initial download of resources.

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

After deploying a Mobify tag into your website, you’ll immediately see your site’s optimized images start to be delivered through Mobify’s image resizing servers. This happens because – behind the scenes – the JavaScript tag captures your website’s HTML and automatically reconstructs the document to point <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.

Responsive image optimizations in Mobify Performance Suite
A sample reduction in page size based on image optimization.

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.

2. JavaScript Optimization

Mobify Performance Suite is also designed to automatically optimize JavaScript by concatenating and compressing external scripts. The goal is to reduce the number of HTTP requests required by your site, which results in a much smaller latency impact for users.

JavaScript optimizations in Mobify Performance Suite
A sample reduction in HTTP requests based on JavaScript optimization.

Just like the Image Optimizer, the JavaScript Optimizer is on by default when using Mobify Performance Suite. As a secondary benefit, you can also increase the perceived performance of your website by enabling the ‘Unblock rendering’ option. This will move all JavaScript to the end of the document, but is not set by default as it can cause problems if you have scripts that must remain at the top of the page.

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!

Hope that article was useful for you!

Would you like to receive more mobile web tips in your inbox, right when we publish them?

Subscribe to Mobify’s Developer Blog!

You'll be joining a community of awesome, like-minded mobile developers.

And you'll get articles full of mobile web development tips and tricks, in your inbox, right when we publish them.