1. Google IO 2013
Web Performance Matters
Unispace 3D
Mitch
1

2. Google IO 2013 Sessions
Jank Free: Chrome Rendering Performance
True Grit: Debugging CSS & Render Performance
Web Page Design with the GPU in mind
Automating Performance Best Practices with PageSpeed
2

3. 1. Focus on the user and all else will follow
2. It’s best to do one thing really, really well
3.Fast is better than slow
4. Democracy on the web works
5. You don’t need to be at your desk to need an answer
6. You can make money without doing evil
7. There’s always more information out there
8. The need for information crosses all borders
9. You can be serious without a suit
10.great just isn’t good enough
Google’s Ten Things
3

4. Freeing up the UI thread with
blisteringly-fast JS is key.
......but it’s not enough!
4

5. We need Fast Rendering!
5

6. Rendering Performance
Style recalculation
Layout (aka Reflow)
Paint
Composite
6

7. The Rendering Cycle
Build the DOM
Calculate CSS property values
Build the rendering tree
Calculate layout
Paint
Composite
7

8. The Rendering Cycle
Build the DOM
Calculate CSS property values
Build the rendering tree
Calculate layout
Paint
Composite
}Style Recalculation
}Layout
Painting
Compositing Layers
8

9. Rendering 101
Paint fast
Avoid accidental paints
Don’t paint at ALL
Eliminate layout
Minimize paint rectangles
Eliminate painting altogether
9

10. Visually complex CSS
Image decodes/resizes
Redundant large empty
layers
How to
position: fixed
overflow: scroll
hover effects
touch listeners
Unnecessary paints from:
Demo (hover effects)
Long paints from:
Demo (drag and drop)
10

11. How to
var newWidth = myDiv.offsetWidth+10; //Read
myDiv.style.width = newWidth+’px’; //Write
var newHeight = myDiv.offsetHeight+10; //Read
myDiv.style.height = newHeight+’px’; //Write
Unnecessary repaint & reflow:
11

12. How to
var newWidth = myDiv.offsetWidth+10; //Read
var newHeight = myDiv.offsetHeight+10; //Read
myDiv.style.width = newWidth+’px’; //Write
myDiv.style.height = newHeight+’px’; //Write
Better repaint & reflow:
12

13. How to
var div = document.getElementById(“box”);
lis = document.getElementByTagName(“li”);
i, len;
for(i=0; len=lis.length; i<len; i++) {
lis[i].style.width = div.offsetWidth+’px’;
}
Unnecessary repaint & reflow:
13

14. How to
var div = document.getElementById(“box”);
lis = document.getElementByTagName(“li”);
widthToSet = div.offsetWidth,
i, len;
for(i=0; len=lis.length; i<len; i++) {
lis[i].style.width = widthToSet+’px’;
}
Better repaint & reflow: Demo
14

15. Layers: Great for Animation
Want to animate with “no layout” and “no painting”
15

16. Layers
Painted independently, composited on the GPU
Can stretch, move, and fade without repainting
GPU + Layers = Faster Rendering
Too many layers = seriously bad time
Demo2Demo1
16

17. Hands-Free layer promotion
3D Transform
Canvas
Video
Plugins (i.e. Flash)
17

18. Use Dev Tools
Timeline
Show paint rectangles
Show composited layer borders
chrome://tracing
Continuous painting mode
PageSpeed (Chrome Extension)
18

19. Where to go from here
http://browserdiet.com/
http://coding.smashingmagazine.com/2012/11/05/
writing-fast-memory-efficient-javascript/
http://www.phpied.com/rendering-repaint-
reflowrelayout-restyle/
http://www.html5rocks.com/en/tutorials/speed/
layers/
http://updates.html5rocks.com/2013/02/Profiling-
19