Google IO 2013: Web Performance Matters

Google IO 2013

Web Performance Matters

Unispace 3D

Mitch

1

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

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 slow4. 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

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

4

We need Fast Rendering!

5

Rendering Performance

Style recalculation

Layout (aka Reflow)

Paint

Composite

6

The Rendering Cycle

Build the DOM

Calculate CSS property values

Build the rendering tree

Calculate layout

Paint

Composite

7

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

Rendering 101

Paint fast

Avoid accidental paints

Don’t paint at ALL

Eliminate layout

Minimize paint rectangles

Eliminate painting altogether

9

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

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

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

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

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

Layers: Great for AnimationWant to animate with “no layout” and “no painting”

15

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

Hands-Free layer promotion

3D Transform

Canvas

Video

Plugins (i.e. Flash)

17

Use Dev Tools

Timeline

Show paint rectangles

Show composited layer borders

chrome://tracing

Continuous painting mode

PageSpeed (Chrome Extension)

18

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