Chapter 7. Animation Performance
Performance affects everything. Increased performance—apparent or real—drastically
improves UX, which in turn boosts your company’s bottom line. Several major studies
have demonstrated that latency increases on search engines result in significant decreases
in revenue per user. To put it bluntly, people hate waiting.
As explained in Chapter 1, JavaScript animation performance is comparable to that of
CSS animation. So, if you’re using a modern animation library such as Velocity.js, the
performance of your animation engine is not your app’s bottleneck—it’s your own code.
That’s what this chapter explores: techniques for coding high-performance animations
across all browsers and devices.
The reality of web performance
If you’ve ever wondered why running concurrent animations slows down your UI, or why
your site performs slowly on mobile devices, this chapter is for you.
Animations are a very resource-intensive process for browsers to perform, but there are
many techniques that can help the browser work as efficiently as possible. We’re about to
learn them.
From the perspective of UI design, there’s no shortage of articles extolling the virtues of
building mobile-first, responsive websites. Conversely, from the perspective of UI
performance, most of us, as developers, are unaware of what best practices are or how to
follow them. Staying abreast of the web performance landscape is overwhelming and
oftentimes futile; we’re held captive by browser and device quirks, byproducts of the
volume of devices (desktops, smartphones, and tablets) and browsers (Chrome, Android,
Firefox, Safari, Internet Explorer) that crowd the ecosystem. Considering that these
platforms are continuously updated, it’s no surprise that we often throw in the towel and
sideline performance concerns as much as we can. Sometimes we may even be tempted to
do away with animations altogether if we’re unsure how to implement them without
sacrificing performance.
We tell ourselves:
Since devices are getting faster, as users continue upgrading their hardware,
my site will become progressively more performant.
Unfortunately, the global reality is the exact opposite: the smartphones that the
developing world is adopting fall short of the performance of the latest iPhones in our
pockets. Do you really want to forsake building products for the next few billion people
coming online? The upcoming Firefox OS initiative is poised to bring capable
smartphones to hundreds of millions of people, so we’re not simply waxing poetic about
hypotheticals. The mobile revolution is here now.