Tweet
Tweet

Slide 1

Slide 1 text

FRONT ENDS @andyhume Codefront.io, 2014 RESILIENT Sunday, May 11, 14

Slide 2

Slide 2 text

Sunday, May 11, 14

Slide 3

Slide 3 text

Sunday, May 11, 14

Slide 4

Slide 4 text

Sunday, May 11, 14

Slide 5

Slide 5 text

Sunday, May 11, 14

Slide 6

Slide 6 text

Sunday, May 11, 14

Slide 7

Slide 7 text

Sunday, May 11, 14

Slide 8

Slide 8 text

Sunday, May 11, 14

Slide 9

Slide 9 text

waiting for fonts.com Sunday, May 11, 14

Slide 10

Slide 10 text

http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Sunday, May 11, 14

Slide 11

Slide 11 text

http://www.flickr.com/photos/vpickering/6824364286/ Resilient Sunday, May 11, 14

Slide 12

Slide 12 text

Progressive enhancement So, the conclusion is that this is the best way to deal with this. Yay us. Next, how do we do that. http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement Sunday, May 11, 14

Slide 13

Slide 13 text

Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14

Slide 14

Slide 14 text

Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14

Slide 15

Slide 15 text

Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14

Slide 16

Slide 16 text

Content THREE STAGES Enhancement Leftovers Sunday, May 11, 14

Slide 17

Slide 17 text

Content Enhancement Leftovers Sunday, May 11, 14

Slide 18

Slide 18 text

Content Enhancement Leftovers Sunday, May 11, 14

Slide 19

Slide 19 text

Content Enhancement Leftovers Sunday, May 11, 14

Slide 20

Slide 20 text

Time to screen Sunday, May 11, 14

Slide 21

Slide 21 text

The network Sunday, May 11, 14

Slide 22

Slide 22 text

The network DNS lookup time Connect time Redirect time SSL handshake time Time to first byte Sunday, May 11, 14

Slide 23

Slide 23 text

The browser Sunday, May 11, 14

Slide 24

Slide 24 text

The browser Single threaded event loop Construct DOM tree from HTML Construct render tree from DOM tree and stylesheets Sunday, May 11, 14

Slide 25

Slide 25 text

What blocks DOM construction? Except: Sunday, May 11, 14

Slide 26

Slide 26 text

What blocks DOM construction? Fetch of remote scripts that need to be executed synchronously Inline script node that is waiting on relevant stylesheet fetch Except: Sunday, May 11, 14

Slide 27

Slide 27 text

What blocks DOM construction? Fetch of remote scripts that need to be executed synchronously Inline script node that is waiting on relevant stylesheet fetch Except: Scripts with async/defer attributes Stylesheets with non-matching media Sunday, May 11, 14

Slide 28

Slide 28 text

What blocks render tree? Sunday, May 11, 14

Slide 29

Slide 29 text

What blocks render tree? Blocked by fetching stylesheets Sunday, May 11, 14

Slide 30

Slide 30 text

HTML pre-parser HTML JS HTML Sunday, May 11, 14

Slide 31

Slide 31 text

HTML pre-parser HTML JS HTML Sunday, May 11, 14

Slide 32

Slide 32 text

Blocking JavaScript var script = document.createElement('script'); script.src = "app.js"; document.head.appendChild(script); Sunday, May 11, 14

Slide 33

Slide 33 text

Blocking JavaScript var script = document.createElement('script'); script.src = "app.js"; document.head.appendChild(script); NO PRE-PARSER! Sunday, May 11, 14

Slide 34

Slide 34 text

Blocking JavaScript Sunday, May 11, 14

Slide 35

Slide 35 text

Blocking web fonts Sunday, May 11, 14

Slide 36

Slide 36 text

HTML CSS Blocking web fonts FONT FONT FONT START RENDER Sunday, May 11, 14

Slide 37

Slide 37 text

HTML CSS Blocking web fonts FONT FONT FONT START RENDER TEXT RENDER Sunday, May 11, 14

Slide 38

Slide 38 text

HTML CSS Blocking web fonts FONT FONT FONT START RENDER TEXT RENDER Sunday, May 11, 14

Slide 39

Slide 39 text

FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto) Blocking web fonts Sunday, May 11, 14

Slide 40

Slide 40 text

Web font loader Provide control over font loading Remove fonts from the critical path Make cross-browser behaviour consistent Sunday, May 11, 14

Slide 41

Slide 41 text

Web font loader Sunday, May 11, 14

Slide 42

Slide 42 text

Web font loader Sunday, May 11, 14

Slide 43

Slide 43 text

Web font loader var WebFontConfig = { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; Sunday, May 11, 14

Slide 44

Slide 44 text

Web font loader var WebFontConfig = { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; var s = document.createElement('script'); s.src = '//ajax.googleapis.com/webfonts.js'; document.head.appendChild(s); Sunday, May 11, 14

Slide 45

Slide 45 text

Web font loader Sunday, May 11, 14

Slide 46

Slide 46 text

Web font loader h1 { font-family: georgia, serif; } .clarendon-loaded h1 { font-family: Clarendon, georgia, serif; } Sunday, May 11, 14

Slide 47

Slide 47 text

Blocking CSS Sunday, May 11, 14

Slide 48

Slide 48 text

http://www.webpagetest.org/result/130908_K2_796/7/details/ Sunday, May 11, 14

Slide 49

Slide 49 text

http://www.webpagetest.org/result/130908_K2_796/ Sunday, May 11, 14

Slide 50

Slide 50 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs Sunday, May 11, 14

Slide 51

Slide 51 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs iPhone 4, iOS 5.1 Sunday, May 11, 14

Slide 52

Slide 52 text

http://www.webpagetest.org/result/130908_K2_796/ Median of nine test runs 3G (1.6Mps, 300ms RTT) iPhone 4, iOS 5.1 Sunday, May 11, 14

Slide 53

Slide 53 text

Sunday, May 11, 14

Slide 54

Slide 54 text

Thank-you! http://lanyrd.com/scyqxd @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc Sunday, May 11, 14