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
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>
51. PERFORMANCE RESPONSIVE
52. PERFORMANCE
53. Thank-you! http://lanyrd.com/scdtfx @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc