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

Browser Rendering & Performance

Drew Powers
February 28, 2018
27

Browser Rendering & Performance

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

Drew Powers

February 28, 2018
Tweet

Transcript

  1. 01. NETWORK TAB G O A L No cartoonishly large/slow

    requests, and images are reasonably-sized
  2. dashboard.manifold.co* Addy Osmani: The Cost of JS * local dev

    Airbnb: React Performance Google: The RAIL model
  3. 02. PERF TAB G O A L Interactive in 2s,

    and each interaction takes 100ms
  4. 04. ANIMATING G O A L Find that sweet spot

    between “smooth” and “sluggish”
  5. 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