Pro Yearly is on sale from $80 to $50! »

Anatomy of a responsive page load, Responsive Day Out 2013

Ded01cdab114abe4ec13511e4c25b9bb?s=47 Andy Hume
March 01, 2013

Anatomy of a responsive page load, Responsive Day Out 2013

Make content appear fast on the screen. Presentation from Responsive Day Out 2013

Ded01cdab114abe4ec13511e4c25b9bb?s=128

Andy Hume

March 01, 2013
Tweet

Transcript

  1. PAGE LOAD Andy Hume THE ANATOMY OF A Responsive Day

    Out, 2013 RESPONSIVE
  2. Text

  3. Content-Encoding: gzip Cache-Control: max-age=315360000

  4. Content-Encoding: gzip Cache-Control: max-age=315360000 OK. NOW WE CAN TALK

  5. http://www.flickr.com/photos/freefoto/2231356418/ Performance

  6. page load time PERFORMANCE bandwidth use battery life server capacity

    fast interface reliability
  7. page load time PERFORMANCE page load time bandwidth use battery

    life server capacity fast interface reliability
  8. Content THREE STAGES Enhancement Leftovers

  9. Content THREE STAGES Enhancement Leftovers

  10. Content THREE STAGES Enhancement Leftovers

  11. Content THREE STAGES Enhancement Leftovers

  12. Content Enhancement Leftovers

  13. Content Enhancement Leftovers

  14. Content Enhancement Leftovers

  15. Content Enhancement Leftovers

  16. Content Enhancement Leftovers DOMContentReady event

  17. Content Enhancement Leftovers DOMContentReady event Load event

  18. NO. 1 TRADE OFF http://www.flickr.com/photos/funkypancake/477244177/ Trade-off: Script loading

  19. SCRIPT LOADING <script> var script = document.createElement('script'); script.src = "app.js";

    document.head.appendChild(script); </script>
  20. SCRIPT LOADING <script src="app.js" async defer></script>

  21. SCRIPT LOADING appendChild(script) <script async> HTML CSS JAVASCRIPT HTML CSS

    JAVASCRIPT
  22. DOMContentReady event Load event Content Enhancement Leftovers

  23. DOMContentReady event Load event Content Enhancement Leftovers

  24. <script> if (isModernBrowser()) { var s = document.createElement('script'); s.src =

    "app.js"; document.head.appendChild(script); } </script> CUTTING THE MUSTARD
  25. DOMContentReady event Load event Content Enhancement Leftovers

  26. @if(isModernBrowser) { <script src="app.js" async defer></script> } CUTTING THE MUSTARD

  27. DOMContentReady event Load event Content Enhancement Leftovers

  28. DOMContentReady event Load event Content Enhancement Leftovers

  29. http://www.flickr.com/photos/number10gov/4600963461/ Trade-off: CSS download

  30. CSS DOWNLOAD <link href="main.css" rel="stylesheet" /> <!-- For larger viewports

    --> <link href="larger.css" media="screen and (min-width: 350px)" rel="stylesheet" />
  31. CSS DOWNLOAD <link href="main.css" rel="stylesheet" /> @if(isWideDevice()) { <link href="larger.css"

    media="screen and (min-width: 350px)" rel="stylesheet" /> }
  32. RESPONSIVE SERVER

  33. RESPONSIVE SERVER Relies on device detection DeviceAtlas, WURFL RESS

  34. NO. 3 ( 4) TRADE OFF http://www.flickr.com/photos/harikrishnanb/4264996356/ Trade-off: Web fonts

  35. http://www.flickr.com/photos/spacemanbob/1084139169/ Web fonts

  36. FONT LOADING Progressive enhancement

  37. FONT LOADING Progressive enhancement Cuts the mustard

  38. FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF

  39. FONT LOADING Progressive enhancement Cuts the mustard Supports WOFF localStorage

    available
  40. PRE-RENDER CUT THE MUSTARD? NO FONTS SHOW FONTS NO NO

    SUPPORT WOFF? FONTS IN STORAGE? NO
  41. POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE
  42. POST-RENDER STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS:

    BASE64 ENCODED IN JSON CACHE FONTS IN STORAGE
  43. http://www.flickr.com/photos/zigazou76/4412946911/ Trade-off: Images

  44. RESPONSIVE IMAGES

  45. Why media queries? THE FUTURE Modules, patterns, systems, components, OOCSS,

    SMACSS, Standalone Viewport is irrelevant
  46. Why media queries? THE FUTURE Modules, patterns, systems, components, OOCSS,

    SMACSS, Standalone Viewport is irrelevant
  47. RESPONSIVE IMAGES <picture alt="Describes the image."> <source src="s.jpg"> <source media="(min-width:320px)"

    src="m.jpg"> </picture>
  48. RESPONSIVE IMAGES <div data-alt="Describes the image." data-src="small.jpg" data-src-high="large.jpg" data-width="180" data-height="100"

    > </div>
  49. None
  50. None
  51. PERFORMANCE RESPONSIVE

  52. PERFORMANCE

  53. Thank-you! http://lanyrd.com/scdtfx @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike

    cc