Slide 1
Slide 1 text
Rendering Performance
Case Studies
Gone in 60 frames per second
Slide 2
Slide 2 text
Addy Osmani - @addyosmani
Chrome Developer Relations
Google
Slide 3
Slide 3 text
Network Compute Render
3 Pillars Of Performance
Slide 4
Slide 4 text
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+
Slide 5
Slide 5 text
#perfmatters
Slide 6
Slide 6 text
What we build for the
web is evolving.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Users ❤ snappy
experiences.
Slide 9
Slide 9 text
Silky smooth scrolling
Buttery animation
Great performance everywhere.
High performance web apps have:
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Speed must be treated as an
essential design feature.
Slide 12
Slide 12 text
The fastest web page is..
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Everything we add increases
the work the browser has to
do to put pixels on the screen
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Rendering performance
impacts user experience.
Slide 19
Slide 19 text
"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
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
"We tested pre-fetching JS in search
results, which caused jank in our pages.
All business metrics got worse"
~ Jonathan Klein
Slide 22
Slide 22 text
Response rates matter.
Slide 23
Slide 23 text
See the flow of how Chrome
renders pages
Slide 24
Slide 24 text
DevTools
Timeline
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
drag here to filter
record/stop
30fps = 33ms per frame, 60fps = 16ms per frame
Slide 27
Slide 27 text
what do these records mean?
Slide 28
Slide 28 text
Let’s dive in!
Slide 29
Slide 29 text
Parse HTML
Slide 30
Slide 30 text
GET / HTTP /1.1
host: www.example.com
Make a request
Slide 31
Slide 31 text
MA RESPONSE
HTML wizaaaaard
I am teh HTML masterz.
Get a responseSlide 32
Slide 32 text
HTML wizaaaaard
I am teh HTML masterz.
Slide 33
Slide 33 text
<section>
<h1> <img> <p>
<head>
<title> <link>
Get a response
Slide 34
Slide 34 text
Recalculate Style
Slide 35
Slide 35 text
DOM CSS
+
Recalculate Style
Styling the DOM
Slide 36
Slide 36 text
Render tree
Styling the DOM
Slide 37
Slide 37 text
Styling the DOM
Slide 38
Slide 38 text
![]()
Styling the DOM
section p {
display: none;
}
Slide 39
Slide 39 text
![]()
Styling the DOM
section h1:after {
content: "<333 pseudo elemz"
}
Slide 40
Slide 40 text
Layout
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Rasterizer
Raster
Slide 43
Slide 43 text
drawPoints
drawOval
drawRectangle
drawRoundedRect
drawPath
drawBitmap
drawText
drawLine
drawArc
clear
translate
save
restore
clipPath
moveTo
lineTo
Rasterizer
Slide 44
Slide 44 text
Paint
Slide 45
Slide 45 text
Rasterizer
Slide 46
Slide 46 text
Instant replay
Slide 47
Slide 47 text
Image Resize
Slide 48
Slide 48 text
Image Decode + Resize
Draw Bitmap
Slide 49
Slide 49 text
Move Elements
Slide 50
Slide 50 text
Composite Layers
Slide 51
Slide 51 text
Composite Layers
Layers
Slide 52
Slide 52 text
Layer creation criteria
Slide 53
Slide 53 text
To the screen
Slide 54
Slide 54 text
To the screen
CPU GPU
Composite Layers
Slide 55
Slide 55 text
All together, you should
expect to see..
Slide 56
Slide 56 text
width
margin
border
left/top
box-shadow
border-radius
background
outline
transform
opacity
Slide 57
Slide 57 text
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
Slide 58
Slide 58 text
What about frame rate?
Slide 59
Slide 59 text
Frame rate
Rate at which a device produces
consecutive images to the screen
Slide 60
Slide 60 text
To see what’s impacting
rendering, look at FPS
Slide 61
Slide 61 text
A consistent frame rate is our ideal
Slide 62
Slide 62 text
Why target 60fps?
Slide 63
Slide 63 text
Match the refresh rate of the
devices you are targeting.
Slide 64
Slide 64 text
Jank
Disruption in consistent frame
rate that manifests itself visually
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
< 15fps
Your users will perceive jerkiness and jank
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
30fps
Smooth as long as it’s a constant 30fps
Slide 69
Slide 69 text
60fps
Smooth animations and transitions with no stutter
Slide 70
Slide 70 text
Frame budget
At 60fps, you have 16.7ms budget for
Logic processing
Compute processing
Rendering
Slide 71
Slide 71 text
Frame budget
It’s more like 8-10ms budget because
- Browser, JS engine, renderer processes
- Margin for slower devices like mobile.
Slide 72
Slide 72 text
What causes jank?
Slide 73
Slide 73 text
Properties that trigger layout (reflow)
Correct as of November, 2013.
Slide 74
Slide 74 text
Correct as of November, 2013.
Reading offsetTop in a loop
Slide 75
Slide 75 text
Correct as of November, 2013.
Cache that read outside loop
or don’t use offsetTop
Slide 76
Slide 76 text
Drop-shadows
Blurs
Linear-gradients
Fixed background images
Heavy styles can cause jank*
*Correct as of November, 2013. Likely to change!
Slide 77
Slide 77 text
CSS Styles
that affect
paint, layout
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
Recalculate style triggered when styles
are computed or changed.
Heavy use of JS to rearrange the page (e.g onscroll) is bad
Slide 80
Slide 80 text
Heavy onscroll() handlers
Doing shit inside of scroll is terrible
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
Long image decodes and resizes
Remember to pre-scale your images!
Slide 84
Slide 84 text
Should be pre-scaled. Instead using overly high-res sources
with more costly resizes.
Slide 85
Slide 85 text
DOM elements with measurably
high paint cost
Measure what elements might be slowing you down.
Slide 86
Slide 86 text
Too much inside your event handlers
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Heavy animation or data processing
Where possible rely on rAF or Web Workers
Slide 89
Slide 89 text
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
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Hardware acceleration
GPU compositing
Slide 93
Slide 93 text
Old-skool painting
All your elements get painted into one big bitmap
Slide 94
Slide 94 text
Old-skool painting
What if we had separate bitmaps, or "layers"? Click.
Slide 95
Slide 95 text
Old-skool painting
What if we had separate bitmaps, or "layers"? Click.
Slide 96
Slide 96 text
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
Slide 97
Slide 97 text
More: DevTools Settings
Slide 98
Slide 98 text
Useful Settings
red shaded rectangles
around repainted regions
orange borders around
composited layers
yellow border around
touch handler listeners
Slide 99
Slide 99 text
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)
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
New! Layers panel
Visualize elements promoted to a layer with the new layers panel (experimental)
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Layout thrashing
Slide 104
Slide 104 text
When JS violently writes, then
reads from the DOM repeatedly
causing reflow
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
The slow way
while (i--) {
var greenBlockWidth = sizer.offsetWidth;
ps[i].style.width = greenBlockWidth + 'px';
}
Slide 107
Slide 107 text
The right way
var greenBlockWidth = sizer.offsetWidth;
while (i--) {
ps[i].style.width = greenBlockWidth + 'px';
}
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
Writes to the DOM
invalidate layout
Browser wants to wait until the end of the current frame to reflow.
Slide 110
Slide 110 text
Querying geometric values
before a frame completes,
forces early layout.
Forced synchronous layout
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
It’s a performance killer.
Slide 113
Slide 113 text
FastDOM
Batches DOM reads/writes on the
next frame using rAF for scheduling.
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
~ Paul Irish
Slide 117
Slide 117 text
Case studies
Slide 118
Slide 118 text
Don’t guess it, test it!
Slide 119
Slide 119 text
Case study: Flickr
with thanks to Scott Schiller @ Flickr
Slide 120
Slide 120 text
Web seeing a trend of
vertical parallax effects.
Slide 121
Slide 121 text
inception-explained.com
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
flickr.com (optimized)
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
But scroll used to be significantly
slower.
Slide 126
Slide 126 text
For each Y pixels of vertical axis
scrolling, move an absolutely positioned
image in the same direction.
Slide 127
Slide 127 text
For each Y pixels of vertical axis
scrolling, move an absolutely positioned
image in the same direction.
window.onscroll()
backgroundPosition
marginTop
or
el
Slide 128
Slide 128 text
window.onscroll = function(e) {
var parallax = document.getElementById('parallax-background');
parallax.style.marginTop = (window.scrollY/2) + 'px';
}
Minimal parallax example
Slide 129
Slide 129 text
Neither marginTop or
backgroundPosition alone perform well.
They don’t use hardware compositing.
Slide 130
Slide 130 text
Demo (slow)
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
Timeline view
Slide 133
Slide 133 text
Have the GPU help with accelerating
compositing of the expensive parts
Trick
Slide 134
Slide 134 text
Elements can be promoted to a layer
using translateZ() or translate3D()
Avoid expensive paints
Reminder
Slide 135
Slide 135 text
window.onscroll = function(e) {
var parallax = document.getElementById('parallax-background');
parallax.style.transform = 'translate3d(0px,' + (window.scrollY/2) +
'px, 0px)';
}
Optimized parallax example
Slide 136
Slide 136 text
Promoting the element to a
new layer
Slide 137
Slide 137 text
Demo (fast)
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
Timeline view
Slide 140
Slide 140 text
Twitter Bootstrap 3
Slide 141
Slide 141 text
No content
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
background-
image:
linear-
gradient(
to bottom,
#ffffff,
#e6e6e6);
Slide 144
Slide 144 text
100% faster paint time.
Slide 145
Slide 145 text
BS3 much more viable for sites
that need to work well on
under-powered mobile and
tablet devices
Slide 146
Slide 146 text
BS3 much more viable for sites
that need to work well on
under-powered mobile and
tablet devices
Slide 147
Slide 147 text
Pitchfork
Slide 148
Slide 148 text
Why is scrolling in this Daft Punk site
so slow?
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
Image shipped (high-res)
Size actually needed
High image resize cost
Slide 151
Slide 151 text
Pre-scale images where possible to
avoid resize cost.
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
Live case study:
Pinterest
Slide 154
Slide 154 text
Post-optimization
Great scrolling performance
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
Pre-optimization
Slide 157
Slide 157 text
No content
Slide 158
Slide 158 text
No content
Slide 159
Slide 159 text
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
Slide 160
Slide 160 text
Case study: Google+
with thanks to Steve Kobes @ Google+
Slide 161
Slide 161 text
Perf went from 12fps to 60fps
Slide 162
Slide 162 text
No content
Slide 163
Slide 163 text
Jank bustin’
Slide 164
Slide 164 text
Simplified G+ layout
Slide 165
Slide 165 text
Simplified G+ layout
position:fixed
position:fixed
Slide 166
Slide 166 text
Problem.
Slide 167
Slide 167 text
A position:fixed element causes a
repaint when moved within its layer.
Slide 168
Slide 168 text
To avoid the repaint, put the element
in its own layer.
Slide 169
Slide 169 text
Simplified G+ layout
translateZ(0)
translateZ(0)
Slide 170
Slide 170 text
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
Slide 171
Slide 171 text
Too many layers?
Sometimes a style creates compositing layers for all positioned descendants.
Slide 172
Slide 172 text
Another problem.
Slide 173
Slide 173 text
G+ styles for card-flip animation
Slide 174
Slide 174 text
-webkit-backface-visibility: hidden
Slide 175
Slide 175 text
Causes every descendent element
to get its own layer
Slide 176
Slide 176 text
Remove it, apply it through JS for
duration of the card animation
The Fix!
Slide 177
Slide 177 text
one last problem
Slide 178
Slide 178 text
Forced synchronous layouts
Modifying the DOM invalidates layout.
element.innerHTML = '...'; // Layout invalidated.
Slide 179
Slide 179 text
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.
Slide 180
Slide 180 text
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
Slide 181
Slide 181 text
Forced Synchronous Layouts
Timeline shows where your code is causing synchronous layouts
Remember to scroll down for the second stack trace.
Slide 182
Slide 182 text
Bonus optimization
Animate with translate instead of left/top
Slide 183
Slide 183 text
Paint performance tooling in
other browsers
Slide 184
Slide 184 text
There’s now lots of tooling to improve
the responsiveness of your UIs.
BROWSER SUPPORT CATS HAVE BEEN LISTENING
Slide 185
Slide 185 text
IE F12 Developer Tools
UI Responsiveness Tool shows frame rate
Slide 186
Slide 186 text
Firefox DevTools: Paint flashing
Highlight areas being painted
Slide 187
Slide 187 text
WebKit Nightlies: Paint counts of layers
Slide 188
Slide 188 text
WebKit Nightlies: Reasons for compositing
Slide 189
Slide 189 text
Audience check
Slide 190
Slide 190 text
No content
Slide 191
Slide 191 text
In summary...
Slide 192
Slide 192 text
Frame rate matters and
can impact engagement
Slide 193
Slide 193 text
Don’t over-do layout.
Do reads before writes.
Slide 194
Slide 194 text
Be mindful of paint
costs. Use the DevTools.
Slide 195
Slide 195 text
Check your perf on
desktop and mobile.
Slide 196
Slide 196 text
Mobile-first performance benchmarking
Test on low-end hardware. Get 60fps there.
Slide 197
Slide 197 text
DevTools Remote Debugging
Slide 198
Slide 198 text
If you’re building something, set
performance objectives up front.
Slide 199
Slide 199 text
Hit those objectives, add tests to
measure and then never regress!
Slide 200
Slide 200 text
If all goes well, this could be you!
Slide 201
Slide 201 text
To learn more checkout
jankfree.org
Slide 202
Slide 202 text
Use tools. not rules.
Slide 203
Slide 203 text
Thank you.
@addyosmani
+AddyOsmani