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

VelocityConf: Rendering Performance Case Studies

VelocityConf: Rendering Performance Case Studies

Jank-free rendering performance has been shown to positively affect user engagement and user experience in a number large sites, yet remains an area many developers are unaware of how to diagnose or optimize for.

To highlight how widespread rendering is a performance issue, we’re going to walk through case studies of Flickr, Pinterest, Google+, Twitter Bootstrap and more.

Learn about common paint issues in modern sites, caused by fixed-backgrounds, heavy CSS, doing too much in your onscroll handlers, compositing and more. We’ll also look at changes Pinterest made to get up to a 40% improvement in rendering times.

By the end if this session you’ll be equipped with the knowledge to use the performance profiling tools in Chrome DevTools to find and fix rendering issues in your own sites.

To learn more about rendering performance, checkout jankfree.org.

Also, anything on Chrome rendering by Paul Lewis, Paul Irish and Jake Archibald is generally pretty reliable :)

Addy Osmani

November 13, 2013
Tweet

More Decks by Addy Osmani

Other Decks in Programming

Transcript

  1. Rendering Performance
    Case Studies
    Gone in 60 frames per second

    View full-size slide

  2. Addy Osmani - @addyosmani
    Chrome Developer Relations
    Google

    View full-size slide

  3. Network Compute Render
    3 Pillars Of Performance

    View full-size slide

  4. Our agenda for today...
    1. DOM to pixels on the screen
    2. Rendering performance tooling
    3. Real-world case studies
    Flickr
    Bootstrap
    Pitchfork
    Pinterest
    Google+

    View full-size slide

  5. #perfmatters

    View full-size slide

  6. What we build for the
    web is evolving.

    View full-size slide

  7. Users ❤ snappy
    experiences.

    View full-size slide

  8. Silky smooth scrolling
    Buttery animation
    Great performance everywhere.
    High performance web apps have:

    View full-size slide

  9. Speed must be treated as an
    essential design feature.

    View full-size slide

  10. The fastest web page is..

    View full-size slide

  11. Everything we add increases
    the work the browser has to
    do to put pixels on the screen

    View full-size slide

  12. Mobile web performance goals
    1. Connectivity
    - Show above the fold content in < 1s
    - Serve critical path CSS in first 14KB
    2. Max of 200ms server response time
    3. 60fps scrolling, 60fps transitions
    4. Speed index under 1000*
    * average time visual parts of the page display per WebPageTest

    View full-size slide

  13. Today we’ll focus on this.
    1. Connectivity
    - Show above the fold content in < 1s
    - Serve critical path CSS in first 14KB
    2. Max of 200ms server response time
    3. 60fps scrolling, 60fps transitions
    4. Speed index under 1000

    View full-size slide

  14. Rendering performance
    impacts user experience.

    View full-size slide

  15. "In an A/B test, we slowed down
    scrolling from 60fps down to 30fps.
    Engagement collapsed"
    ~ Shane O'Sullivan
    * in their native app, fluctuating
    between 30 to 45fps.
    * Consistent 30fps performed
    second best

    View full-size slide

  16. "We tested pre-fetching JS in search
    results, which caused jank in our pages.
    All business metrics got worse"
    ~ Jonathan Klein

    View full-size slide

  17. Response rates matter.

    View full-size slide

  18. See the flow of how Chrome
    renders pages

    View full-size slide

  19. DevTools
    Timeline

    View full-size slide

  20. drag here to filter
    record/stop
    30fps = 33ms per frame, 60fps = 16ms per frame

    View full-size slide

  21. what do these records mean?

    View full-size slide

  22. Let’s dive in!

    View full-size slide

  23. GET / HTTP /1.1
    host: www.example.com
    Make a request

    View full-size slide






  24. MA RESPONSE






    HTML wizaaaaard
    I am teh HTML masterz.



    Get a response

    View full-size slide









  25. HTML wizaaaaard
    I am teh HTML masterz.





    View full-size slide



  26. <br/><section><br/><h1> <img> <p><br/><head><br/><title> <link><br/>Get a response<br/>

    View full-size slide

  27. Recalculate Style

    View full-size slide

  28. DOM CSS
    +
    Recalculate Style
    Styling the DOM

    View full-size slide

  29. Render tree
    Styling the DOM

    View full-size slide





  30. Styling the DOM

    View full-size slide





  31. Styling the DOM
    section p {
    display: none;
    }

    View full-size slide





  32. Styling the DOM
    section h1:after {
    content: "<333 pseudo elemz"
    }

    View full-size slide

  33. html, body {
    marg: 0;
    width: 300px;
    height: 700px;
    background: white;
    color: white;
    }
    body {
    background: #888;
    }
    section {
    display: block;
    margin-top:30%;
    padding-top:60px;
    width:100%;
    background:#444;
    }
    section h1:after{
    content: '<3 pseudo';
    height: 40px;
    margin-top: 10px;
    display: block;
    }
    img {
    margin: 30px;
    border-radius: 4px;
    border: 3px solid white;
    box-shadow: 0 2px 2px rgba(0,0,0,3);
    }
    Layout
    Laying out the document

    View full-size slide

  34. Rasterizer
    Raster

    View full-size slide

  35. drawPoints
    drawOval
    drawRectangle
    drawRoundedRect
    drawPath
    drawBitmap
    drawText
    drawLine
    drawArc
    clear
    translate
    save
    restore
    clipPath
    moveTo
    lineTo
    Rasterizer

    View full-size slide

  36. Instant replay

    View full-size slide

  37. Image Resize

    View full-size slide

  38. Image Decode + Resize
    Draw Bitmap

    View full-size slide

  39. Move Elements

    View full-size slide

  40. Composite Layers

    View full-size slide

  41. Composite Layers
    Layers

    View full-size slide

  42. Layer creation criteria

    View full-size slide

  43. To the screen

    View full-size slide

  44. To the screen
    CPU GPU
    Composite Layers

    View full-size slide

  45. All together, you should
    expect to see..

    View full-size slide

  46. width
    margin
    border
    left/top
    box-shadow
    border-radius
    background
    outline
    transform
    opacity

    View full-size slide

  47. DOM to pixels on the screen
    Recalc styles
    Calc styles that apply to elements
    Layout
    Generate geometry for each element
    Paint
    Fill pixels for each element into layers (Paint)
    Composite layers
    Draw layers out to the screen

    View full-size slide

  48. What about frame rate?

    View full-size slide

  49. Frame rate
    Rate at which a device produces
    consecutive images to the screen

    View full-size slide

  50. To see what’s impacting
    rendering, look at FPS

    View full-size slide

  51. A consistent frame rate is our ideal

    View full-size slide

  52. Why target 60fps?

    View full-size slide

  53. Match the refresh rate of the
    devices you are targeting.

    View full-size slide

  54. Jank
    Disruption in consistent frame
    rate that manifests itself visually

    View full-size slide

  55. < 15fps
    Your users will perceive jerkiness and jank

    View full-size slide

  56. 30fps
    Smooth as long as it’s a constant 30fps

    View full-size slide

  57. 60fps
    Smooth animations and transitions with no stutter

    View full-size slide

  58. Frame budget
    At 60fps, you have 16.7ms budget for
    Logic processing
    Compute processing
    Rendering

    View full-size slide

  59. Frame budget
    It’s more like 8-10ms budget because
    - Browser, JS engine, renderer processes
    - Margin for slower devices like mobile.

    View full-size slide

  60. What causes jank?

    View full-size slide

  61. Properties that trigger layout (reflow)
    Correct as of November, 2013.

    View full-size slide

  62. Correct as of November, 2013.
    Reading offsetTop in a loop

    View full-size slide

  63. Correct as of November, 2013.
    Cache that read outside loop
    or don’t use offsetTop

    View full-size slide

  64. Drop-shadows
    Blurs
    Linear-gradients
    Fixed background images
    Heavy styles can cause jank*
    *Correct as of November, 2013. Likely to change!

    View full-size slide

  65. CSS Styles
    that affect
    paint, layout

    View full-size slide

  66. Recalculate style triggered when styles
    are computed or changed.
    Heavy use of JS to rearrange the page (e.g onscroll) is bad

    View full-size slide

  67. Heavy onscroll() handlers
    Doing shit inside of scroll is terrible

    View full-size slide

  68. Scrolling
    Correct as of November, 2013.
    Watch out for:
    Unnecessary paints:
    position:fixed
    overflow:scroll
    hover effects
    touch listeners
    Long paints:
    Complex CSS
    Image decodes
    Large empty layers

    View full-size slide

  69. Long image decodes and resizes
    Remember to pre-scale your images!

    View full-size slide

  70. Should be pre-scaled. Instead using overly high-res sources
    with more costly resizes.

    View full-size slide

  71. DOM elements with measurably
    high paint cost
    Measure what elements might be slowing you down.

    View full-size slide

  72. Too much inside your event handlers

    View full-size slide

  73. Heavy animation or data processing
    Where possible rely on rAF or Web Workers

    View full-size slide

  74. Position transform: translate(npx, npx);
    Scale transform: scale(n);
    Rotation transform: rotate(ndeg);
    Opacity opacity: 0....1;
    4 things a browser can
    animate cheaply
    Move all your visual effects to these things.
    Transition at your own risk.
    translateZ(0)
    or
    translate3D()
    may be required

    View full-size slide

  75. Hardware acceleration
    GPU compositing

    View full-size slide

  76. Old-skool painting
    All your elements get painted into one big bitmap

    View full-size slide

  77. Old-skool painting
    What if we had separate bitmaps, or "layers"? Click.

    View full-size slide

  78. Old-skool painting
    What if we had separate bitmaps, or "layers"? Click.

    View full-size slide

  79. Layers & Compositing
    Hardware compositing uses the GPU to help build the page
    Elements are broken out to a bunch of layers
    Those layers are uploaded to the GPU as textures
    The GPU composites those textures together

    View full-size slide

  80. More: DevTools Settings

    View full-size slide

  81. Useful Settings
    red shaded rectangles
    around repainted regions
    orange borders around
    composited layers
    yellow border around
    touch handler listeners

    View full-size slide

  82. Layer promotion hacks
    -webkit-transform: translateZ(0);
    -webkit-transform: translate3d(0,0,0);
    1 -webkit-transform: translate3d(0,0,0)
    Use with caution!!
    Blink/Webkit
    iOS
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    1 -webkit-transform: translate3d(0,0,0)

    View full-size slide

  83. New! Layers panel
    Visualize elements promoted to a layer with the new layers panel (experimental)

    View full-size slide

  84. Layout thrashing

    View full-size slide

  85. When JS violently writes, then
    reads from the DOM repeatedly
    causing reflow

    View full-size slide

  86. The slow way
    while (i--) {
    var greenBlockWidth = sizer.offsetWidth;
    ps[i].style.width = greenBlockWidth + 'px';
    }

    View full-size slide

  87. The right way
    var greenBlockWidth = sizer.offsetWidth;
    while (i--) {
    ps[i].style.width = greenBlockWidth + 'px';
    }

    View full-size slide

  88. Writes to the DOM
    invalidate layout
    Browser wants to wait until the end of the current frame to reflow.

    View full-size slide

  89. Querying geometric values
    before a frame completes,
    forces early layout.
    Forced synchronous layout

    View full-size slide

  90. It’s a performance killer.

    View full-size slide

  91. FastDOM
    Batches DOM reads/writes on the
    next frame using rAF for scheduling.

    View full-size slide

  92. ~ Paul Irish

    View full-size slide

  93. Case studies

    View full-size slide

  94. Don’t guess it, test it!

    View full-size slide

  95. Case study: Flickr
    with thanks to Scott Schiller @ Flickr

    View full-size slide

  96. Web seeing a trend of
    vertical parallax effects.

    View full-size slide

  97. inception-explained.com

    View full-size slide

  98. flickr.com (optimized)

    View full-size slide

  99. But scroll used to be significantly
    slower.

    View full-size slide

  100. For each Y pixels of vertical axis
    scrolling, move an absolutely positioned
    image in the same direction.

    View full-size slide

  101. For each Y pixels of vertical axis
    scrolling, move an absolutely positioned
    image in the same direction.
    window.onscroll()
    backgroundPosition
    marginTop
    or
    el

    View full-size slide

  102. window.onscroll = function(e) {
    var parallax = document.getElementById('parallax-background');
    parallax.style.marginTop = (window.scrollY/2) + 'px';
    }
    Minimal parallax example

    View full-size slide

  103. Neither marginTop or
    backgroundPosition alone perform well.
    They don’t use hardware compositing.

    View full-size slide

  104. Timeline view

    View full-size slide

  105. Have the GPU help with accelerating
    compositing of the expensive parts
    Trick

    View full-size slide

  106. Elements can be promoted to a layer
    using translateZ() or translate3D()
    Avoid expensive paints
    Reminder

    View full-size slide

  107. window.onscroll = function(e) {
    var parallax = document.getElementById('parallax-background');
    parallax.style.transform = 'translate3d(0px,' + (window.scrollY/2) +
    'px, 0px)';
    }
    Optimized parallax example

    View full-size slide

  108. Promoting the element to a
    new layer

    View full-size slide

  109. Timeline view

    View full-size slide

  110. Twitter Bootstrap 3

    View full-size slide

  111. background-
    image:
    linear-
    gradient(
    to bottom,
    #ffffff,
    #e6e6e6);

    View full-size slide

  112. 100% faster paint time.

    View full-size slide

  113. BS3 much more viable for sites
    that need to work well on
    under-powered mobile and
    tablet devices

    View full-size slide

  114. BS3 much more viable for sites
    that need to work well on
    under-powered mobile and
    tablet devices

    View full-size slide

  115. Why is scrolling in this Daft Punk site
    so slow?

    View full-size slide

  116. Image shipped (high-res)
    Size actually needed
    High image resize cost

    View full-size slide

  117. Pre-scale images where possible to
    avoid resize cost.

    View full-size slide

  118. Live case study:
    Pinterest

    View full-size slide

  119. Post-optimization
    Great scrolling performance

    View full-size slide

  120. Pre-optimization

    View full-size slide

  121. Sub-optimal position:fixed use causing
    unnecessarily large repaints
    Slow scrolling due to excessive use of styles
    (currently) expensive to paint
    Doing a lot during hover on scroll
    Main issues

    View full-size slide

  122. Case study: Google+
    with thanks to Steve Kobes @ Google+

    View full-size slide

  123. Perf went from 12fps to 60fps

    View full-size slide

  124. Jank bustin’

    View full-size slide

  125. Simplified G+ layout

    View full-size slide

  126. Simplified G+ layout
    position:fixed
    position:fixed

    View full-size slide

  127. A position:fixed element causes a
    repaint when moved within its layer.

    View full-size slide

  128. To avoid the repaint, put the element
    in its own layer.

    View full-size slide

  129. Simplified G+ layout
    translateZ(0)
    translateZ(0)

    View full-size slide

  130. Caveats of translateZ
    - more layers = more time compositing layers
    - text anti-aliasing requires an opaque background within the layer
    - triggers Safari positioning bugs inside iframes

    View full-size slide

  131. Too many layers?
    Sometimes a style creates compositing layers for all positioned descendants.

    View full-size slide

  132. Another problem.

    View full-size slide

  133. G+ styles for card-flip animation

    View full-size slide

  134. -webkit-backface-visibility: hidden

    View full-size slide

  135. Causes every descendent element
    to get its own layer

    View full-size slide

  136. Remove it, apply it through JS for
    duration of the card animation
    The Fix!

    View full-size slide

  137. one last problem

    View full-size slide

  138. Forced synchronous layouts
    Modifying the DOM invalidates layout.
    element.innerHTML = '...'; // Layout invalidated.

    View full-size slide

  139. Measuring the DOM
    depends on the layout
    If previously invalidated, this forces
    synchronous layout
    (since execution cannot continue until the correct value is obtained).
    alert(element.offsetHeight); // Layout forced.

    View full-size slide

  140. G+ reduced synchronous layouts
    cards.forEach(function(card){
    appendHTML(card);
    measure(card);
    });
    write
    read
    write
    read..
    cards.forEach(function(card){
    appendHTML(card);
    });
    cards.forEach(function(card){
    measure(card);
    });
    write
    write
    read
    read..
    They reduced them from O(n) to O(1) by refactoring a loop

    View full-size slide

  141. Forced Synchronous Layouts
    Timeline shows where your code is causing synchronous layouts
    Remember to scroll down for the second stack trace.

    View full-size slide

  142. Bonus optimization
    Animate with translate instead of left/top

    View full-size slide

  143. Paint performance tooling in
    other browsers

    View full-size slide

  144. There’s now lots of tooling to improve
    the responsiveness of your UIs.
    BROWSER SUPPORT CATS HAVE BEEN LISTENING

    View full-size slide

  145. IE F12 Developer Tools
    UI Responsiveness Tool shows frame rate

    View full-size slide

  146. Firefox DevTools: Paint flashing
    Highlight areas being painted

    View full-size slide

  147. WebKit Nightlies: Paint counts of layers

    View full-size slide

  148. WebKit Nightlies: Reasons for compositing

    View full-size slide

  149. Audience check

    View full-size slide

  150. In summary...

    View full-size slide

  151. Frame rate matters and
    can impact engagement

    View full-size slide

  152. Don’t over-do layout.
    Do reads before writes.

    View full-size slide

  153. Be mindful of paint
    costs. Use the DevTools.

    View full-size slide

  154. Check your perf on
    desktop and mobile.

    View full-size slide

  155. Mobile-first performance benchmarking
    Test on low-end hardware. Get 60fps there.

    View full-size slide

  156. DevTools Remote Debugging

    View full-size slide

  157. If you’re building something, set
    performance objectives up front.

    View full-size slide

  158. Hit those objectives, add tests to
    measure and then never regress!

    View full-size slide

  159. If all goes well, this could be you!

    View full-size slide

  160. To learn more checkout
    jankfree.org

    View full-size slide

  161. Use tools. not rules.

    View full-size slide

  162. Thank you.
    @addyosmani
    +AddyOsmani

    View full-size slide