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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  8. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  9. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  10. Content
    THREE STAGES
    Enhancement
    Leftovers

    View full-size slide

  11. Content Enhancement Leftovers

    View full-size slide

  12. Content Enhancement Leftovers

    View full-size slide

  13. Content Enhancement Leftovers

    View full-size slide

  14. Content Enhancement Leftovers

    View full-size slide

  15. Content Enhancement Leftovers
    DOMContentReady event

    View full-size slide

  16. Content Enhancement Leftovers
    DOMContentReady event Load event

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. SCRIPT LOADING

    View full-size slide

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

    View full-size slide

  21. DOMContentReady event Load event
    Content Enhancement Leftovers

    View full-size slide

  22. DOMContentReady event Load event
    Content Enhancement Leftovers

    View full-size slide

  23. <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 full-size slide

  24. DOMContentReady event Load event
    Content Enhancement Leftovers

    View full-size slide

  25. @if(isModernBrowser) {

    }
    CUTTING THE MUSTARD

    View full-size slide

  26. DOMContentReady event Load event
    Content Enhancement Leftovers

    View full-size slide

  27. DOMContentReady event Load event
    Content Enhancement Leftovers

    View full-size slide

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

    View full-size slide

  29. CSS DOWNLOAD



    View full-size slide

  30. CSS DOWNLOAD

    @if(isWideDevice()) {

    }

    View full-size slide

  31. RESPONSIVE SERVER

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. FONT LOADING
    Progressive enhancement

    View full-size slide

  36. FONT LOADING
    Progressive enhancement
    Cuts the mustard

    View full-size slide

  37. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. RESPONSIVE IMAGES

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. RESPONSIVE IMAGES




    View full-size slide

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

    View full-size slide

  48. PERFORMANCE
    RESPONSIVE

    View full-size slide

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

    View full-size slide