Performance beyond the page load

Slide 1

Slide 1 text

PERFORMANCE BEYOND THE PAGE LOAD Ryan Seddon

Slide 2

Slide 2 text

@RYANSEDDON Team Lead @ Zendesk

Slide 3

Slide 3 text

WORLDS LONGEST FLIGHT FROM MELBOURNE fact

Slide 4

Slide 4 text

PAGE LOAD DRILLED INTO US

Slide 5

Slide 5 text

SLOW SITES LOSE PEOPLE1 1 Webperformancetoday.com

Slide 6

Slide 6 text

PAGE LOAD SPEED still super !IMPORTANT

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

ONLY THE BEGINNING of the journey

Slide 9

Slide 9 text

HTTP/2

Slide 10

Slide 10 text

BEST PRACTICE HTTP/2 MAKES OBSOLETE

Slide 11

Slide 11 text

STORY FOR ANOTHER TALK

Slide 12

Slide 12 text

UI PERFORMANCE

Slide 13

Slide 13 text

aerotwist.com

Slide 14

Slide 14 text

httparchive.org

Slide 15

Slide 15 text

BROWSER RENDERING PIPELINE has 4 stages

Slide 16

Slide 16 text

1. STYLE RECALCULATION

Slide 17

Slide 17 text

2. LAYOUT/REFLOW

Slide 18

Slide 18 text

Reﬂow is the process by which the geometry of the layout engine's formatting objects are computed — Chris Waterson

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

3. PAINT/RASTERIZE PAINT

Slide 21

Slide 21 text

4. COMPOSITE

Slide 22

Slide 22 text

PHEW THAT WAS A LOT TO TAKE IN let's look at simple demo

Slide 23

Slide 23 text

ALWAYS BE COMPOSITING

Slide 24

Slide 24 text

TRANSFORM & OPACITY csstriggers.com

Slide 25

Slide 25 text

60FPS / 16.6MS REQUESTANIMATIONFRAME()

Slide 26

Slide 26 text

NON TRIVIAL DEMO

Slide 27

Slide 27 text

REMEMBER THIS?

Slide 28

Slide 28 text

CONTAINMENT It was isolated why does it affect the page?

Slide 29

Slide 29 text

Demo

Slide 30

Slide 30 text

CONTAINMENT SPEC A proposal to give authors control of what can be isolated

Slide 31

Slide 31 text

.modal { // Don't trigger costly layouts, // style recalcs for other elements // isolate this subtree contain: strict; ... }

Slide 32

Slide 32 text

...BUT On a static page this is ﬁne

Slide 33

Slide 33 text

60FPS IS A TARGET

Slide 34

Slide 34 text

REAL WORLD EXAMPLE

Slide 35

Slide 35 text

HOUDINI TASK FORCE

Slide 36

Slide 36 text

...develop features that explain the “magic” of Styling and Layout on the web

Slide 37

Slide 37 text

▸ Specifying the box model ▸ Improving the CSSOM ▸ Explaining CSS & Layout