A presentation at jQuery UK in in Oxford, UK by Andy Hume
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 THREE STAGES Enhancement Leftovers
Content THREE STAGES Enhancement Leftovers
Content THREE STAGES Enhancement Leftovers
Content 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
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
Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake
Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect SSL Handshake
Time to screen: The network DNS lookup TCP connect HTTP request Server time HTTP resp HTTP Redirect 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
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Blocking: remote script < script
"app.js"
</ script
Blocking: inline script waiting on remote CSS < style
"app.css" />
< script
var rules = window . styleSheets [ 0 ].cssRules;
</ script
Blocking: remote script (solution 1)
</ div
< script
"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
“app.js" async
</ script
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Time to screen: Start render HTML parser DOM tree Layout Paint Render tree
Blocking: fetching stylesheets < style
"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
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 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
"myfonts.css" />
Web font loader < style
"myfonts.css" />
Web font loader < style
"myfonts.css" />
{
custom: {
families: [
'Clarendon'
,
'Clarendon Bold'
],
urls: [
'/myfonts.css'
]
} }; < script
“//ajax.googleapis.com/webfonts.js" async
</ script
"clarendon-loading"
"clarendon-loaded"
"clarendon-loading"
"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
Companies spend hundreds of thousands of dollars on the uptime of their server infrastructure. And yet, web sites in the real world are slow to load and failing all the time. User experiences that are blocked by slow-loading JavaScript or never-loading web fonts are all too common, and undermine the cost of sustaining high availability web servers. In this session we’ll talk about how to architect client-side code for resilience. When things go wrong how can we still deliver a useful and timely experience to users?
for free. You
can too.