Building for performance and resilience

Building for performance and resilience

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

June 17, 2014
Tweet

Transcript

  1. 9.

    Measure http://www.flickr.com/photos/kayaker1204/4319542459/ We have a median page load me of

    seven seconds, and our primary compe tor has a median page load me of three seconds. Tell a story Tuesday, June 17, 14
  2. 14.

    What numbers?! http://www.flickr.com/photos/kayaker1204/4319542459/ Page load time? Total download size? Start

    render time? Time to first byte? Response time? Total HTTP requests? Document load time? Tuesday, June 17, 14
  3. 22.

    Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  4. 23.

    Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  5. 24.

    Load Time First Byte Start Render Fully Loaded Speed Index

    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  6. 30.

    Optimizing: First byte http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  7. 35.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp SSL Handshake Tuesday, June 17, 14
  8. 36.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
  9. 37.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
  10. 38.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
  11. 39.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
  12. 40.

    Optimizing: First byte DNS lookup TCP connect HTTP request Server

    time HTTP resp HTTP Redirect SSL Handshake Tuesday, June 17, 14
  13. 41.

    Eliminate redirects Just eleminate redirects Flush the document early? Prefetch

    DNS? But really, just eleminate redirects Optimizing: First byte Tuesday, June 17, 14
  14. 42.

    Optimizing: Start render http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  15. 45.
  16. 47.

    inline script waiting on remote CSS Optimizing: Start render HTML

    parser DOM tree Layout Paint Render tree Tuesday, June 17, 14
  17. 50.

    Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree fetching remote stylesheets Tuesday, June 17, 14
  18. 56.

    Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> Tuesday, June 17, 14
  19. 57.

    Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> BREAKS THE PRE-PARSER! Tuesday, June 17, 14
  20. 58.

    Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14
  21. 59.

    Remote JS Optimizing: Start render HTML parser DOM tree Layout

    Paint Render tree HTML pre- parser Tuesday, June 17, 14
  22. 60.

    Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14
  23. 61.

    Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser fetching remote stylesheets Tuesday, June 17, 14
  24. 62.

    Optimizing: Start render HTML parser DOM tree Layout Paint Render

    tree HTML pre- parser Tuesday, June 17, 14
  25. 63.

    Optimizing: Start render <script> var script = document.createElement('script'); script.src =

    "app.js"; document.head.appendChild(script); </script> BREAKS THE PRE-PARSER! Tuesday, June 17, 14
  26. 65.

    Avoid blocking scripts Optimizing: Start render Move script elements to

    end of <body> Or... add async attribute to script elements Inline critical CSS Tuesday, June 17, 14
  27. 66.

    Avoid blocking scripts Optimizing: Start render Move script elements to

    end of <body> Or... add async attribute to script elements Inline critical CSS https://github.com/pocketjoso/penthouse Tuesday, June 17, 14
  28. 67.

    Optimizing: Load time fully loaded http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte

    Start Render Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  29. 68.

    gzip compression (of course!) Far-future caching (of course!) Concatenate files

    (of course!) Optimizing: Load time fully loaded Tuesday, June 17, 14
  30. 69.

    Optimizing: Speed Index http://www.flickr.com/photos/freefoto/2231356418/ Load Time First Byte Start Render

    Fully Loaded Speed Index FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522 REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980 Tuesday, June 17, 14
  31. 77.

    Future: ServiceWorker this.addEventListener('fetch', function (e) { if (e.request.url.host === 'guardian.co.uk')

    { e.forwardTo('http://theguardian.com'); } } (Possibly not possible) Tuesday, June 17, 14
  32. 78.

    Future: ServiceWorker this.addEventListener('fetch', function (e) { if (window.innerWidth > 500)

    { e.forwardTo(e.request.url + '?width=large'); } } (Possibly not possible) Tuesday, June 17, 14