Anatomy of a responsive page load, Responsive Day Out 2013

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

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