Cruising at 60 FPS below 1000ms

Two metrics for a fast and smooth (not janky) experience on the web is to keep your website running (scrolling) at 60fps and avoid tasks longer than one second. When a user performs a task, be it loading a page or deleting some e-mails, you’ll want feedback within 1000ms. If the task is any longer, you can use patterns as spinning loaders, help text or finish the task in the background.

• 100 ms: instant
• 100-300 ms: Small perceptible delay
• 300-1000 ms: Machine is working
• 1000+ ms: Likely mental context switch
• 10000+ ms: Task is abandoned

Resources

• High Performance Browser Networking by Ilya Grigorik
• Breaking news at 1000 ms
• http://www.thecssninja.com/javascript/pointer-events-60fps
• https://engineering.gosquared.com/optimising-60fps-everywhere-in-javascript
• http://ariya.ofilabs.com/2013/06/optimizing-css3-for-gpu-compositing.html