Anatomy of a responsive page load, Responsive Day Out 2013

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