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.
Mobile & tablet processors
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
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.
Latest browsers and mobile devices get hardware-accelerated animations and the best performance, whilst the site continues to work well in older browsers.
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).
The performance increased to 39 frames per second (more bars), with each frame taking 25ms to render (shorter bars).