Architecting resilient front-ends, jQuery UK, 2015

RESILIENT FRONT-ENDS @andyhume jQuery UK, 2015 ARCHITECTING

waiting for fonts.com

http:// Unreliable network

http:// Resilient web

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

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

request Server time HTTP resp SSL Handshake

request Server time HTTP resp HTTP Redirect SSL Handshake

Eliminate redirects Flush the document early Prefetch DNS But mostly,
eliminate 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" /> 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://

http://www.webpagetest.org/result/130908_K2_796/ 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

Thank-you! lanyrd.com/sddxxk @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc

Architecting resilient front-ends, jQuery UK, 2015

Architecting resilient front-ends, jQuery UK, 2015

More Decks by Andy Hume

Other Decks in Technology

Featured

Transcript