Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Browser Rendering & Performance

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

Browser Rendering & Performance

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

Avatar for Drew Powers

Drew Powers

February 28, 2018

More Decks by Drew Powers

See All by Drew Powers
Styling in React
Avatar for Drew Powers dangodev
0
53
Styling Systems in React
Avatar for Drew Powers dangodev
0
80
Virtual & Augmented Reality
Avatar for Drew Powers dangodev
0
140
Design of the Web (2017)
Avatar for Drew Powers dangodev
0
100
The Science of Font Selection
Avatar for Drew Powers dangodev
2
510

Featured

See All Featured
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
360
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Designing for Performance
Avatar for Lara Hogan lara
612
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.4k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.3k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
3
1.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
410

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!