Architecting resilient front-ends, jQuery UK, 2015

Architecting resilient front-ends, jQuery UK, 2015

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?

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

March 09, 2015
Tweet

Transcript

  1. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 6.
  6. 17.

    Time to screen Key performance metric Aiming for 1s on

    mobile Understand the network Understand the browser
  7. 21.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp SSL Handshake
  8. 22.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp HTTP Redirect SSL Handshake
  9. 23.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp HTTP Redirect SSL Handshake
  10. 24.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp HTTP Redirect SSL Handshake
  11. 25.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp HTTP Redirect SSL Handshake
  12. 26.

    Time to screen: The network DNS lookup TCP connect HTTP

    request Server time HTTP resp HTTP Redirect SSL Handshake
  13. 27.

    Eliminate redirects Flush the document early Prefetch DNS But mostly,

    eliminate redirects Time to screen: The network
  14. 28.

    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
  15. 34.

    Blocking: inline script waiting on remote CSS <style rel="stylesheet" href="app.css"

    /> <script> var rules = window.styleSheets[0].cssRules; </script>
  16. 36.

    Blocking: remote script (solution 2) <script> var script = document.createElement('script');

    script.src = "app.js"; document.head.appendChild(script); </script>
  17. 37.

    Blocking: remote script (solution 2) <script> var script = document.createElement('script');

    script.src = "app.js"; document.head.appendChild(script); </script> HIDDEN FROM PRE-PARSER!
  18. 44.

    Blocking: fetching stylesheets (solution) <head> <style> // Core styles in

    the head of the document. body { background: grey; color: #3A2FDE; } </style> </head> <body>
  19. 46.

    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
  20. 53.

    Blocking web fonts FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer

    Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto)
  21. 54.

    Web font loader Provide control over font loading Remove fonts

    from the critical path Make cross-browser behaviour consistent
  22. 57.

    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>
  23. 59.

    Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> h1 { font-family:

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

    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; }
  25. 61.
  26. 65.