RESILIENT FRONT- ENDS @andyhume ARCHITECTING jQuery UK, 2015

waiting for fonts.com

Unreliable network

http://

Resilient web

http://

Progressive enhancement Progressive enhancement

http://www.flickr.com/photos/8040811@N06/3167877765

Content THREE STAGES Enhancement Leftovers

Content Enhancement Leftovers

Time to screen Key performance metric Aiming for 1s on mobile Understand the network

Understand the browser

Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp

Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp SSL Handshake

Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake

Eliminate redirects Flush the document early Prefetch DNS But mostly, eli minate redirects Time to screen: The network

Time to screen: The browser Single threaded event loop 1. Construct DOM tree from HTML 2. Construct render tree from DOM tree and

stylesheets 3. Layout ! paint

Time to screen: Start render HTML parser DOM tree Layout Paint Render tree

Blocking: remote script < script

src

"app.js"

</ script

Blocking: inline script waiting on remote CSS < style

rel

"stylesheet" href

"app.css" />

< script

var rules = window . styleSheets [ 0 ].cssRules;

</ script

Blocking: remote script (solution 1)

</ div

< script

src

"app.js"

</ script

</ body

</ html

Blocking: remote script (solution 2) < script

var script = document.createElement('script'); script. src = "app.js"; document.head.appendChild(script); </ script

Blocking: remote script (solution 2) < script

var script = document.createElement('script'); script. src = "app.js"; document.head.appendChild(script); </ script

HIDDEN FROM PRE-PARSER!

Blocking: remote script (solution 3) < script

src

“app.js" async

</ script

Time to screen: Start render HTML parser DOM tree Layout Paint Render tree

Blocking: fetching stylesheets < style

rel

"stylesheet" href

"app.css" />

Blocking: fetching stylesheets (solution) < head

< style

// Core styles in the head of the document.

body {

background : grey ;

color : #3A2FDE ; } </ style

</ head

< body

Blocking: critical CSS generators https://github.com/pocketjoso/penthouse

http://jonassebastianohlsson.com/ criticalpathcssgenerator/

https://github.com/filamentgroup/criticalcss

Recap: What blocks render? Remote scripts that need to be executed synchronously Inline script waiting on stylesheet fetch

Stylesheet fetch for relevant media type/query

Recap: Fault isolation …or swimlaning Avoid synchronous dependencies Uptime is not binary

Blocking web fonts

Blocking web fonts HTML CSS FONT FONT FONT START RENDER

Blocking web fonts HTML CSS FONT FONT FONT START RENDER TEXT RENDER

Blocking web fonts FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto)

Web font loader Provide control over font loading Remove fonts from the critical path Make cross-browser behaviour consistent

Web font loader < style

rel

"stylesheet" href

"myfonts.css" />

Web font loader < style

rel

"stylesheet" href

"myfonts.css" />

Web font loader < style

rel

"stylesheet" href

"myfonts.css" />

var WebFontConfig

{ custom: { families: [ 'Clarendon' , 'Clarendon Bold' ],
urls: [ '/myfonts.css' ]

} }; < script

src

“//ajax.googleapis.com/webfonts.js" async

</ script

Web font loader < body class

"clarendon-loading"

< body class

"clarendon-loaded"

Web font loader < body class

"clarendon-loading"

< body class

"clarendon-loaded"

h1 {

font-family : georgia, serif ; } .clarendon-loaded h1 {

font-family : Clarendon, georgia, serif ;

}

CSS Font Loading Module document .fonts.load( ‘Clarendon’ ).then( function () {

document .documentElement.className += ‘clarendon-loaded';

} h1 {

font-family : georgia, serif ; } .clarendon-loaded h1 {

font-family : Clarendon, georgia, serif ;

}

http://

Median of nine test runs http://www.webpagetest.org/result/130908_K2_796/

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

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

Thank-you! lanyrd.com/sddxxk

@andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc