Smashing Conference 2013 - Day 2

Addy Osmani - Gone in 60 frames per second

Addy Osmani talking about rendering performance
Fig. 01| Addy Osmani talking about rendering performance
  • 3 pillars of performance:

    • network
    • compute
    • render
  • performance in design
  • performance must be treated as an essential design feature
  • users love snappy experiences
  • become BFFs with how browsers work
  • the new bootstrap is mobile first

    • changed to flat ui -> 100% faster paint time
    • much more viable
  • pre scale images where possible
  • you need to be aware of performance consequences

first do it, then do it right, then do it better

  • face your performance demons
  • don't feel bad poking at pages
  • don't guess it, test it

case study: pinterest

  • sluggish scrolling
  • inspecting the frame tab in Chrome Devtools
  • set a frame/time budget
  • 60fps = 16.7ms to get all done (scripting, rendering, painting, misch)
  • show paint rectangles via the Devtools
  • painting should just happen on elements where you expect a visual change
  • enable continuous page repainting and show and hide different elements in the DOM to test how long each individual element needs to get painted
  • if you have a performance issue be sure to measure it
  • border-radius can have a huge impact

if you carry nothing away from this talk just use paint rectangles, thats okay

  • jank on the web
  • to provide a nice experience you need a stable(high) frame rate
  • offsetTop triggers layout reflow (be careful when using them)
  • difference between a native and unpolished one
  • frame rate can directly impact engagement, conversation rate
  • whats special about the number 60?

    • animation should try to match the refresh rate of the device they are being used on
    • < 15fps your user will perceive jerkiness
    • 30fps can provide a silky smooth experience as long they're stable
    • 60 are perfect
  • what can cause that?

    • heavy onScroll() handlers
    • long image decodes and resizes
    • too much inside your event handlers
    • heavy animation or data processing
    • doing a little too much at once
  • box-shadow and rounded corners combined is worse
  • css properties can have a high paint cost

    • border-radius
    • transforms
  • what are paints?
  • updates to the screen due to changes in the page
  • these changes invalidate the rectangle on screen expensive and can make your page look sluggish
  • Hacks (be careful don't overuse them causes a lot of GPU power usage)
    -webkit-transform: translateZ(0)
    -webkit-translate3d: translate3D(0, 0, 0)
  • check out other browser vendors dev tools more often (nightlies too)
  • mobile-first performance benchmarking
  • your frame rate on desktop != frame rate on mobile
  • Conclusion = frame rate matters and can impact engagement