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

Anatomy of a responsive page load, Responsive Day Out 2013

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

Andy Hume

March 01, 2013
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. PAGE LOAD
    Andy Hume
    THE ANATOMY OF A
    Responsive Day Out, 2013
    RESPONSIVE

    View Slide

  2. Text

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  9. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  10. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  11. Content
    THREE STAGES
    Enhancement
    Leftovers

    View Slide

  12. Content Enhancement Leftovers

    View Slide

  13. Content Enhancement Leftovers

    View Slide

  14. Content Enhancement Leftovers

    View Slide

  15. Content Enhancement Leftovers

    View Slide

  16. Content Enhancement Leftovers
    DOMContentReady event

    View Slide

  17. Content Enhancement Leftovers
    DOMContentReady event Load event

    View Slide

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

    View Slide

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

    View Slide

  20. SCRIPT LOADING

    View Slide

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

    View Slide

  22. DOMContentReady event Load event
    Content Enhancement Leftovers

    View Slide

  23. DOMContentReady event Load event
    Content Enhancement Leftovers

    View Slide

  24. <br/>if (isModernBrowser()) {<br/>var s = document.createElement('script');<br/>s.src = "app.js";<br/>document.head.appendChild(script);<br/>}<br/>
    CUTTING THE MUSTARD

    View Slide

  25. DOMContentReady event Load event
    Content Enhancement Leftovers

    View Slide

  26. @if(isModernBrowser) {

    }
    CUTTING THE MUSTARD

    View Slide

  27. DOMContentReady event Load event
    Content Enhancement Leftovers

    View Slide

  28. DOMContentReady event Load event
    Content Enhancement Leftovers

    View Slide

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

    View Slide

  30. CSS DOWNLOAD



    View Slide

  31. CSS DOWNLOAD

    @if(isWideDevice()) {

    }

    View Slide

  32. RESPONSIVE SERVER

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. FONT LOADING
    Progressive enhancement

    View Slide

  37. FONT LOADING
    Progressive enhancement
    Cuts the mustard

    View Slide

  38. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF

    View Slide

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

    View Slide

  40. PRE-RENDER
    CUT THE
    MUSTARD?
    NO FONTS SHOW FONTS
    NO
    NO
    SUPPORT WOFF?
    FONTS IN
    STORAGE?
    NO

    View Slide

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

    View Slide

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

    View Slide

  43. http://www.flickr.com/photos/zigazou76/4412946911/
    Trade-off: Images

    View Slide

  44. RESPONSIVE IMAGES

    View Slide

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

    View Slide

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

    View Slide

  47. RESPONSIVE IMAGES




    View Slide

  48. RESPONSIVE IMAGES
    data-src="small.jpg"
    data-src-high="large.jpg"
    data-width="180"
    data-height="100"
    >

    View Slide

  49. View Slide

  50. View Slide

  51. PERFORMANCE
    RESPONSIVE

    View Slide

  52. PERFORMANCE

    View Slide

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

    View Slide