Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browser Rendering & Performance

Avatar for Drew Powers Drew Powers
February 28, 2018
0
46

Browser Rendering & Performance

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

Avatar for Drew Powers

Drew Powers

February 28, 2018
Tweet

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
36
Styling Systems in React
Avatar for Drew Powers dangodev
0
54
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
100
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
81
The Science of Font Selection
Avatar for Drew Powers dangodev
2
480

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
100
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
0
320
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
44k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
0
4.8k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
120
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
1
660
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

Transcript

  1. BROWSER RENDERING AND PERFORM- ANCE BROWSER RENDERING AND PERFORM- ANCE

  2. None

  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
  8. None

  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!