Improving mobile browser performance by 65% for a leading UK food retailer

in Technology   —  

Building a high-traffic, high-performance site requires careful attention to exactly what is happening deep within the browser. This is made all the more important when animations and transitions form a key part of the site.

With the incumbent agency struggling, and the client a well-known leading food retailer, we were drafted in to find a solution. We re-engineered the existing website to run 65% faster on tablets and smartphones using hardware-accelerated animations, resulting in a significantly improved user experience across all devices.

The problem

With the website having been originally developed as JavaScript backbone.js application, there were a number of complex transitions and animations as users interacted with the site and moved between different sections and pages.

The existing website was noticeably sluggish on tablets and smartphones due to the extent of software-based transitions and animations, all written in JavaScript. This provided an poor user experience with a growing number of mobile and tablet users accessing the site.

Mobile & tablet processors

The reason for the slow in-browser performance was that application was written to make extensive use of JavaScript which render the animations using software.

While this is often fine for desktop devices with fast (and power-hungry) desktop processors, the increasing use of tablets and smartphones with relatively slower (and more power-efficient) processors means that there is not enough processing power to provide the same level of performance.

How we improved performance

We changed the the animations from JavaScript to use the CSS3 support available in the latest browsers. This meant that the animations would require less processing power, and appear smoother overall.

Furthermore, with the hardware support available in CSS3, we further optimised these to ensure the use of the additional graphics processor present in iPad, iPhone and most Android devices.

By forcing hardware-based animations, we were able to leverage the graphics processor, reducing the load on the main processor, and making the animations appear much smoother and faster.

Technically this meant forcing the browser to treat specific content as if it was “3D” content, in order to engage the graphics hardware. However, we found this could only be done with image animations, as hardware-accelerated animations lose their anti-aliasing (text smoothing) which makes small text illegible.

Of course, we could not remove the JavaScript animations entirely, due to the need to continue to support older browsers including IE8, so by using graceful degradation, we were able to provide a fallback to the original script-based animations for these browsers.

Result

Latest browsers and mobile devices get hardware-accelerated animations and the best performance, whilst the site continues to work well in older browsers.

Before

Browser performance before optimisation

The performance was benchmarked at 24 frames per second, with each frame taking 42ms to render. In addition the site uses considerable amount of processing power (the green bars).

After

Browser performance after optimisation

The performance increased to 39 frames per second (more bars), with each frame taking 25ms to render (shorter bars).

Read next

ArticleTechnology

Why brands should use the latest image technologies

To deliver a perfect experience across multiple devices it is essential to consider how images are delivered

ArticleRetail

How retailers can boost conversion, part 2: predictive search

How to extend your search function to ensure your customers can get to relevant products as quickly as possible.

ArticleRetail

How retailers can boost conversion, part 1: landing pages

How landing pages can improve the shopping experience and drive sales.