A Guide to Animation Performance on the Web

2.1 An Introduction to Web Animation Performance

In today's Web, animations play a big role in user experience and the delivery of information. The days of slow browsers are long gone and the browsers we have today use the latest technologies to ensure that we get the best experience possible. That means fast loading times and also high performance animations. Now what exactly does high performance mean? Well, first of all, it means animations that don't slow down the browser. Here's the thing. Browsers are actually very complicated pieces of software that have to execute thousands of operations just to render a web page. To give you an idea, here's a rough list of processes that happen after you enter a web address and hit Enter. First, the browser does a DNS Lookup, this basically transforms the domain name you entered into an IP address. Then the browser sends an HTTP request to the appropriate server, the server responds and sends back an HTML file, usually the index. The browser then takes this file and begins to render it. And this is the step where most of the operations take place because rendering a web page is very complex, as you'll learn in lesson three. In addition to that, the browser will send additional requests for various objects, like CSS files, images, JavaScript, and so on. As you can see from this, the browser already has a lot on its plate. And creating an animation that will tax it even more is something you should avoid. I mean, if you have a PC with a lot of processing power, then you probably won't feel the difference. But websites nowadays are accessed from all kinds of computers and all kinds of mobile devices. And mobile devices don't have a lot of processing power. So when creating animations, it's important they work just as well on high end computers, but also on less powerful devices. Another aspect that makes high performance animations is the frame count, or the FPS. Achieving silky smooth animations means getting as close as possible to 60 FPS, that means 60 frames per second. This is something that can be measured, and you'll learn how to do that in lesson number four, but for now, what does 60 FPS mean? And how did we get to that number? Well, it all comes down to the refresh rate of our screens today. A regular display has a refresh rate of 60 hertz. In other words, pixels are painted on our screens 60 times a second. That means the browser needs to match this rate, and paint a new frame on each screen refresh. So if our animations run as close as possible to 60 frames per second, they'll be super smooth. The lower the FPS count of an animation, the more jagged and unpleasant it is. And this actually ties into the first point. If we give the browser too much stuff to do, it's possible it won't finish the painting process before the next screen refresh. That will result in dropped frames and a jagged animation. Now, I know there are displays out there with much higher refresh rates than 60 hertz. For example, professional gamers use monitors with 240 hertz refresh rates, but those are specifically made for games. What we're interested in is web animations, and for these, 60 hertz or 60 FPS is the gold standard. So to sum it up, creating a high performance animation boils down to two things. Number one, make sure the animation doesn't slow down the browser. And number two, make sure the frame rate of the animation is as close as possible to 60 FPS. So we know what to do, but the question is, how do we do it, okay? And the very cool part about this is that browsers actually give us all the controls that we need to achieve these high performance animations. We just need to know which controls to turn on or off. And we'll talk more about that in the next lesson, see you there.