BROWSER
RENDERING
AND
PERFORM-
ANCE
BROWSER
RENDERING
AND
PERFORM-
ANCE
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
PREFACE:
SHOUTS TO
FIREFOX
PREFACE:
SHOUTS TO
FIREFOX
Slide 4
Slide 4 text
webpack.js.org
Slide 5
Slide 5 text
01.
NETWORK
TAB
01.
NETWORK
TAB
Slide 6
Slide 6 text
dashboard.manifold.co
Image Optimization
Slide 7
Slide 7 text
01. NETWORK TAB
G O A L
No cartoonishly large/slow
requests, and images are
reasonably-sized
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
02.
PERF TAB
02.
PERF TAB
Slide 10
Slide 10 text
dashboard.manifold.co*
Addy Osmani: The Cost of JS
* local dev
Airbnb: React Performance
Google: The RAIL model
Slide 11
Slide 11 text
02. PERF TAB
G O A L
Interactive in 2s, and
each interaction takes 100ms
Slide 12
Slide 12 text
03.
RENDER
PANEL
03.
RENDER
PANEL
Slide 13
Slide 13 text
Smashing Mag: Compositing
60FPS CSS Animations
Slide 14
Slide 14 text
03. RENDER PANEL
G O A L
Keep it at 60FPS
Slide 15
Slide 15 text
04.
ANIMATING
04.
ANIMATING
Slide 16
Slide 16 text
Material Design: Easing
Nintendo Switch Loading
Slide 17
Slide 17 text
04. ANIMATING
G O A L
Find that sweet spot between
“smooth” and “sluggish”
Slide 18
Slide 18 text
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