Browser Rendering & Performance

Lunch & Learn (28 Feb 2018)
https://www.youtube.com/watch?v=l03FMI5PjS0

Transcript

1. BROWSER RENDERING AND PERFORM- ANCE BROWSER RENDERING AND PERFORM- ANCE
3. PREFACE:
 SHOUTS TO
 FIREFOX PREFACE: SHOUTS TO FIREFOX
4. webpack.js.org
5. 01. NETWORK
 TAB 01. NETWORK TAB
6. dashboard.manifold.co Image Optimization
7. 01. NETWORK TAB G O A L No cartoonishly large/slow requests, and images are reasonably-sized
9. 02. PERF TAB 02. PERF TAB
10. dashboard.manifold.co* Addy Osmani: The Cost of JS * local dev Airbnb: React Performance Google: The RAIL model
11. 02. PERF TAB G O A L Interactive in 2s, and each interaction takes 100ms
12. 03.
 RENDER
 PANEL 03.
 RENDER PANEL
13. Smashing Mag: Compositing 60FPS CSS Animations
14. 03. RENDER PANEL G O A L Keep it at 60FPS
15. 04. ANIMATING 04.
 ANIMATING
16. Material Design: Easing Nintendo Switch Loading
17. 04. ANIMATING G O A L Find that sweet spot between “smooth” and “sluggish”
18. NETWORK Identify large/slow requests PERF Interactive up front, interactive all the way through RENDERING Keeping it at 60FPS ANIMATING The user experiences everything; make it look good G O A L S
19. TIME’S UP!