Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Anatomy of a responsive page load, WhiskyWeb 2013

Andy Hume
April 12, 2013

Anatomy of a responsive page load, WhiskyWeb 2013

Longer version of performance talk for WhiskyWeb II in Edinburgh.

Andy Hume

April 12, 2013
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. PAGE LOAD Andy Hume THE ANATOMY OF A WhiskyWeb II,

    2013 RESPONSIVE Friday, 12 April 13
  2. page load time PERFORMANCE page load time bandwidth battery life

    server capacity fast interface reliability Friday, 12 April 13
  3. RESPONSE TIME Server-side response time? End-user response time? Time to

    last byte? ALWAYS DEFINE IT Friday, 12 April 13
  4. TIME TO FIRST BYTE Request to start of response Normally

    HTML Nothing displayed yet Includes network latency Includes server-side Friday, 12 April 13
  5. START RENDER Content begins to display Doesn’t mean it’s useful

    content Things can still block afterwards Friday, 12 April 13
  6. LOAD TIME Full page loaded Scripts, images, etc... Site might

    be usable before this Friday, 12 April 13
  7. RANGE OF METRICS Time to first byte Start render time

    Load time KNOW WHICH ONE Friday, 12 April 13
  8. WEBPAGETEST.ORG iPhone 4 / iOS 5.1 3G (2/1 Mbps, 150ms

    RTT) Dulles, Virginia 0.1930 Friday, 12 April 13
  9. LOADING CSS Compressed Long cache time One file Content-Encoding: gzip

    Cache-Control: max-age=315360000 Friday, 12 April 13
  10. LOADING CSS <html> <head> <link href="main.css" rel="stylesheet" /> </head> </body>

    <p>Content goes here</p> </body> </html> Friday, 12 April 13
  11. <html> <head> <link href="small.css" rel="stylesheet" /> <!-- For larger viewports

    --> <link href="larger.css" media="screen and (min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13
  12. <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For gallery pages

    --> <link href="gallery.css" rel="stylesheet" /> </head> </body> <p>Content goes here</p> </body> </html> NETWORK LOADING CSS Friday, 12 April 13
  13. LOADING JAVASCRIPT Compressed Long cache time One file Content-Encoding: gzip

    Cache-Control: max-age=315360000 Friday, 12 April 13
  14. JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger

    viewports --> <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> <script src="app.js"></script> </head> </body> <p>Content goes here</p> </body> </html> NETWORK NET Friday, 12 April 13
  15. JAVASCRIPT <html> <head> <link href="main.css" rel="stylesheet" /> <!-- For larger

    viewports --> <link href="larger.css" media="screen and min-width: 640px)" rel="stylesheet" /> </head> </body> <p>Content goes here</p> <script src="app.js"></script> </body> </html> NETWORK NET Friday, 12 April 13
  16. JAVASCRIPT LOADING <script> var s = document.createElement('script'); s.src = "app.js";

    document.head.appendChild(s); </script> Friday, 12 April 13
  17. @if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD

    http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/ Cutting the Mustard Friday, 12 April 13
  18. <script> if (isModernBrowser()) { var s = document.createElement('script'); s.src =

    "app.js"; document.head.appendChild(s); } </script> JAVASCRIPT LOADING Friday, 12 April 13
  19. JAVASCRIPT LOADING var isModernBrowser = function() { return ( ‘querySelector’

    in document && ‘addEventListener’ in window && ‘localStorage’ in window ); }; Friday, 12 April 13
  20. PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO

    SUPPORT WOFF? FONTS IN STORAGE? NO Friday, 12 April 13
  21. POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE Friday, 12 April 13
  22. IMAGES: NEW SPECS <img alt="Describes the image." src="medium.jpg" srcset="small.jpg 640w,

    small-hd.jpg 640w 2x, med-hd.jpg 2x" /> srcset attribute Friday, 12 April 13
  23. IMAGES: NEW SPECS <picture alt="Describes the image."> <source src="s.jpg"> <source

    media="(min-width:320px)" src="m.jpg"> </picture> Picture element Friday, 12 April 13