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

VelocityConf: Rendering Performance Case Studies

Addy Osmani
November 13, 2013
Programming
318
23k

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

See All by Addy Osmani
The Cost Of JavaScript in 2023
addyosmani
9
1.6k
Building Effective Engineering Teams - LeadDev
addyosmani
21
990
Communicating Effectively As A Tech Lead
addyosmani
3
3.7k
The Future Of Performance Tooling
addyosmani
1
410
Picture Perfect - How To Instantly Load Images
addyosmani
0
340
Polyfilling The Web Forward
addyosmani
1
230
Picture Perfect - An Image Optimization Talk
addyosmani
1
310
Learning Patterns
addyosmani
29
66k
Optimizing For Core Web Vitals
addyosmani
0
350

Other Decks in Programming

See All in Programming
コンポーネント設計のすゝめ__ベストプラクティスを学ぶLunch_LT_.pdf
sakurahigashi2
0
670
Befriending Kurtosis with R
bk_18
0
540
readonly class で作る堅牢なアプリケーション
shogogg
1
230
再考 Fourkeys メトリクス
eiel
0
210
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
210
CodeReviewerが求められること
onopon
0
200
[RailsWorld 2023] Untangling cables & demystifying twisted transistors
palkan
0
390
Ebitengine触ってみたぞい
eiei114
0
1.2k
最新のCompose Multiplatform を使うとiOSとAndroidアプリはどれくらい作れるのか
fujikinaga
2
190
OpenTelemetryのバックエンドを作ってparquetと戯れている話
mrasu
0
400
Hardware and its Concurrency Habits
ennael
PRO
0
440
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
440

Featured

See All Featured
Infographics Made Easy
chrislema
236
17k
Web Components: a chance to create the future
zenorocha
304
41k
The MySQL Ecosystem @ GitHub 2015
samlambert
241
11k
The Language of Interfaces
destraynor
149
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
For a Future-Friendly Web
brad_frost
168
8.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
271
12k
Building Flexible Design Systems
yeseniaperezcruz
317
36k
Git: the NoSQL Database
bkeepers
PRO
420
61k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
177
9.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
351
28k

Transcript

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

    View Slide

  2. Addy Osmani - @addyosmani
    Chrome Developer Relations
    Google

    View Slide

  3. Network Compute Render
    3 Pillars Of Performance

    View 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 Slide

  5. #perfmatters

    View Slide

  6. What we build for the
    web is evolving.

    View Slide

  7. View Slide

  8. Users ❤ snappy
    experiences.

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

  12. The fastest web page is..

    View Slide

  13. View Slide

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

    View Slide

  15. View Slide

  16. 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 Slide

  17. 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 Slide

  18. Rendering performance
    impacts user experience.

    View Slide

  19. "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 Slide

  20. View Slide

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

    View Slide

  22. Response rates matter.

    View Slide

  23. See the flow of how Chrome
    renders pages

    View Slide

  24. DevTools
    Timeline

    View Slide

  25. View Slide

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

    View Slide

  27. what do these records mean?

    View Slide

  28. Let’s dive in!

    View Slide

  29. Parse HTML

    View Slide

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

    View Slide






  31. MA RESPONSE






    HTML wizaaaaard
    I am teh HTML masterz.



    Get a response

    View Slide









  32. HTML wizaaaaard
    I am teh HTML masterz.





    View Slide



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

    View Slide

  34. Recalculate Style

    View Slide

  35. DOM CSS
    +
    Recalculate Style
    Styling the DOM

    View Slide

  36. Render tree
    Styling the DOM

    View Slide





  37. Styling the DOM

    View Slide





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

    View Slide





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

    View Slide

  40. Layout

    View Slide

  41. 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 Slide

  42. Rasterizer
    Raster

    View Slide

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

    View Slide

  44. Paint

    View Slide

  45. Rasterizer

    View Slide

  46. Instant replay

    View Slide

  47. Image Resize

    View Slide

  48. Image Decode + Resize
    Draw Bitmap

    View Slide

  49. Move Elements

    View Slide

  50. Composite Layers

    View Slide

  51. Composite Layers
    Layers

    View Slide

  52. Layer creation criteria

    View Slide

  53. To the screen

    View Slide

  54. To the screen
    CPU GPU
    Composite Layers

    View Slide

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

    View Slide

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

    View Slide

  57. 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 Slide

  58. What about frame rate?

    View Slide

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

    View Slide

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

    View Slide

  61. A consistent frame rate is our ideal

    View Slide

  62. Why target 60fps?

    View Slide

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

    View Slide

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

    View Slide

  65. View Slide

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

    View Slide

  67. View Slide

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

    View Slide

  69. 60fps
    Smooth animations and transitions with no stutter

    View Slide

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

    View Slide

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

    View Slide

  72. What causes jank?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. CSS Styles
    that affect
    paint, layout

    View Slide

  78. View Slide

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

    View Slide

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

    View Slide

  81. View Slide

  82. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  86. Too much inside your event handlers

    View Slide

  87. View Slide

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

    View Slide

  89. 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 Slide

  90. View Slide

  91. View Slide

  92. Hardware acceleration
    GPU compositing

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. 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 Slide

  97. More: DevTools Settings

    View Slide

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

    View Slide

  99. 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 Slide

  100. View Slide

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

    View Slide

  102. View Slide

  103. Layout thrashing

    View Slide

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

    View Slide

  105. View Slide

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

    View Slide

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

    View Slide

  108. View Slide

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

    View Slide

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

    View Slide

  111. View Slide

  112. It’s a performance killer.

    View Slide

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

    View Slide

  114. View Slide

  115. View Slide

  116. ~ Paul Irish

    View Slide

  117. Case studies

    View Slide

  118. Don’t guess it, test it!

    View Slide

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

    View Slide

  120. Web seeing a trend of
    vertical parallax effects.

    View Slide

  121. inception-explained.com

    View Slide

  122. View Slide

  123. flickr.com (optimized)

    View Slide

  124. View Slide

  125. But scroll used to be significantly
    slower.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  130. Demo (slow)

    View Slide

  131. View Slide

  132. Timeline view

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  136. Promoting the element to a
    new layer

    View Slide

  137. Demo (fast)

    View Slide

  138. View Slide

  139. Timeline view

    View Slide

  140. Twitter Bootstrap 3

    View Slide

  141. View Slide

  142. View Slide

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

    View Slide

  144. 100% faster paint time.

    View Slide

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

    View Slide

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

    View Slide

  147. Pitchfork

    View Slide

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

    View Slide

  149. View Slide

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

    View Slide

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

    View Slide

  152. View Slide

  153. Live case study:
    Pinterest

    View Slide

  154. Post-optimization
    Great scrolling performance

    View Slide

  155. View Slide

  156. Pre-optimization

    View Slide

  157. View Slide

  158. View Slide

  159. 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 Slide

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

    View Slide

  161. Perf went from 12fps to 60fps

    View Slide

  162. View Slide

  163. Jank bustin’

    View Slide

  164. Simplified G+ layout

    View Slide

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

    View Slide

  166. Problem.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  170. 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 Slide

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

    View Slide

  172. Another problem.

    View Slide

  173. G+ styles for card-flip animation

    View Slide

  174. -webkit-backface-visibility: hidden

    View Slide

  175. Causes every descendent element
    to get its own layer

    View Slide

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

    View Slide

  177. one last problem

    View Slide

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

    View Slide

  179. 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 Slide

  180. 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 Slide

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

    View Slide

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

    View Slide

  183. Paint performance tooling in
    other browsers

    View Slide

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

    View Slide

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

    View Slide

  186. Firefox DevTools: Paint flashing
    Highlight areas being painted

    View Slide

  187. WebKit Nightlies: Paint counts of layers

    View Slide

  188. WebKit Nightlies: Reasons for compositing

    View Slide

  189. Audience check

    View Slide

  190. View Slide

  191. In summary...

    View Slide

  192. Frame rate matters and
    can impact engagement

    View Slide

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

    View Slide

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

    View Slide

  195. Check your perf on
    desktop and mobile.

    View Slide

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

    View Slide

  197. DevTools Remote Debugging

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  201. To learn more checkout
    jankfree.org

    View Slide

  202. Use tools. not rules.

    View Slide

  203. Thank you.
    @addyosmani
    +AddyOsmani

    View Slide