Jank Busting Apple's Home Page


Overview

Watching frame rates on CSS and/or JavaScript animation is pretty addictive. I wrote this article the other day which examines the performance of a simple countdown timer within the Angular lifecycle. I then spent countless minutes playing Jake Archibald’s Jank Invaders to hone my skills and save the universe from jank :)

So, I was on Apple’s home page the other day and noticed some jank in their main carousel animation. apple home page It wasn’t anything huge, but the animation seemed to stagger a bit as the transitions were beginning and ending. There are five transitions that occur to display different Apple products. You can see this in the Frame analysis below. Each green line shooting to 0 FPS is a paint within chrome. bad fps jank

Digging deeper, we can see that a large amount of time is being taken for the hardware compositing. This is where we force elements to be accelerated and handled by the GPU with translate3D(0,0,0) or translateZ(0) (aka null transform hack). The problem with Apple’s site and the reason why paints are spiking before each animation is because too many layers (or divs) have the null transform applied. layer composite time
I wrote about this a while ago, but the basic point is that too much of a good thing is often a bad thing. In this case, too many elements have translateZ(0) applied when only one or two applications are really needed. This is forcing a longer composite time and ultimately giving the animations some jank.

The fix is easy. Start with the top level container for the animation and see which of the child elements have a null transform and figure out if they really need it. If we turn on “Continuous Page Repainting” in dev tools, we can see how the page is being painted and how many composited layers we have. bad fps jank

By viewing the source and running through each element of the carousel animation, we can see that the parent already has the proper layer compositing. From there, I just disabled all the null transform hacks that were applied to nested elements. apple home page markup

After doing this and fixing one other tiny CSS bug of one element having two different backgrounds, we get much better performance as you can see in the below timeline. apple home page markup

The yellow bars are the 7 second timer before each transition occurs, so this is expected.

The animation on Apple.com isn’t terrible as it stands in its current state, but as I stated at the beginning of this article, it’s fun to fix jank :)