5

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?

4
  • 2
    Have you tried searching FPS or "frames per second" on the internet? Jan 18, 2014 at 10:00
  • 1
    I'm sorry, I'm confused about what you don't understand. Do you need an explanation about what "frame" means? Jan 18, 2014 at 10:01
  • I understood like speed at which the image is refreshed (typically in frames per second, or FPS) . But web performance talks about reduction in fps due to bad code. What and when affect frames per second in browser? Why?
    – Fizer Khan
    Jan 18, 2014 at 10:13
  • 1
    This is talking more about scrolling and animation performance. A basic app such as gmail only changes frame on click, so it's no big deal. Jan 18, 2014 at 10:28

1 Answer 1

10

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.

1
  • 30 fps is the normal hz rate on mobile devices Jan 18, 2014 at 10:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.