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