Fast and fpsious

There are two types of performance on web, we can optimize page loads and network requests and we can optimize rendering performance. Rendering performance can have huge impact on UX, if your app is slower then 30fps it is most likely that users will show less engagement to it. This talks will show some techniques and strategies on how to achieve almost 60fps on your mobile web/hybrid mobile app.

Transcript

1. FAST AND FPSIOUS
2. How users would describe fast web? “It opens fast!” “Animations are so smooth!” “I could scroll it for pages!!!”
3. HOW TO ACHIEVE THAT? JUST ADD NITRO AND EXTRA HP
4. What makes web fast? “It opens fast!” “Animations are so smooth!” “I could scroll it for pages!!!” Optimized CRP Animation and scrolling run at 60fps
5. 60 FPS
6. Every 16ms browser does: JavaScript Style Layout Paint Composite
7. DO WE HAVE TO DO THAT ALL THE TIME???
8. RAIL
9. How much time do we have at each state?
10. HOW TO MEASURE?
11. JAVASCRIPT WHEN YOU HAVE JUST 3ms
12. JavaScript Measure it with JS Profiler flag. Control memory consumption (check Memory flag) Compare speed results of solutions on jsperf.com Don’t concentrate on every single line.
13. JS Animations Use requestAnimationFrame instead setTimeout/setInterval. Do your javascript first. Run requestAnimationFrame at the end of animate function. If animation is simple, consider CSS transitions as optimization option.
14. FLIP
15. STYLE .BOX--HAS-STYLE > .LOOKS-NICE
16. LAYOUT FORCED SYNCHRONOUS??
17. How to determine it?
18. What causing it? EXAMPLE OF PROBLEM EXAMPLE OF SOLUTION
19. PAINT EVERY FRAME I
20. How to measure it?
21. COMPOSITE LAYERS 3D SPACE...
22. Previewing layers
23. Alternative HACKY way for iPhone and Safari: transform: translate3d(0, 0, 0); will-change: transform;
24. Always measure your results before you try to optimize AVOID PREMATURE OPTIMIZATION
25. Measure it! Optimize it! GOOD PERFORMANCE, MEANS GOOD UX
26. What to read next? Paul Lewis blog (www.aerotwist.com) Book: Designing for Performance by Lara Callender Hogan David Walsh blog (http://davidwalsh.name/) Addy Osmani’s talk on memory management in JS Udacity Web Performance Optimization, Browser Rendering Optimization Courses
27. @SoHotSoup THANK YOU FOR WATCHING!!!