New Perspectives On Web Design

By Addy Osmani CHAPTER 6

Tutorial: Getting a Jank-Free Mobile Web Experience
We’ve talked the talk, but let’s look at a simple app with some janky anima-
tion and see if we can optimize it to be jank-free. Now, remember that the
performance of your page on mobile differs greatly from desktop perfor-
mance so you’ll want to make sure you have remote debugging set up for
this tutorial. Let’s get started.

1. Open up http://jsfiddle.net/AxEJY/.


2. Click “animate!” As you can see, there is a visual break in motion,
   resulting in a suboptimal animation. We can record a Timeline
   session during the animation of this page to confirm that we have an
   issue hitting an optimal frame rate. The animation performs far worse
   on mobile than it does on desktop because we’re working with more
   limited GPU.


3. Let’s see what’s causing things to slow down. Here’s the JavaScript for
   our animation as well as the CSS: