What is 60fps in web application? [closed]

Question

When i read about performance(mostly from Paul Irish), it talks about achieving 60 frame per second for better performance of web application.

What is actually 60fps meant by?

Answer 1

Frame rate (FPS, frames per second) is how fast a device can display consecutive images to the screen.

Animation requires that the displayed frames create an illusion of motion. If the FPS is too low, the animation will not be smooth and individual frames may be discernible by the human eye.

60 FPS is the refresh rate of most displays today (60hz), which is an ideal target for smooth scrolling. If you can't target 60 FPS, aim for 30 FPS instead.

At 60 FPS you have 16.7ms to paint a frame. Factoring in mobile, you have 8-10ms to paint a frame.

30 FPS is actually smooth if you can keep it constant. If it is variable people will notice an issue.

At 15 FPS or lower, people will experience jerky and jittery rendering and engagement can drop.

Frame rate matters and can impact your engagement.

Please see the image below to understand what is meant by FPS and what the user would see based if the FPS was different.