Performance as design: doing responsive responsibly

Transcript

1. Performance as design doing responsive responsibly @14islands

2. This talk is not about Flat design. Media queries. Style

   guides. Typography.

3. This talk is about Performance as design.

4. Responsive web design?

5. None

6. This is not the web.

7. This is the web.

8. This will be the web.

9. Thanks Brad!

10. Thanks Brad! You’re welcome!

11. More people have access to mobile than to running water

    and toothbrushes. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets “
12. None

13. 87% of mobile users expect sites to load at least

    as fast, or faster than on their desktop. http://www.strangeloopnetworks.com/web-performance-infographics/ “

14. Hej! We are 14islands.

15. Sites are getting fatter https://speakerdeck.com/tkadlec/deliberate-performance

16. At this rate, the average page will hit 2 MB

    by 2015. http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “

17. http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000

18. None
19. None

20. RWD may make your pages look better on a variety

    of devices, but it doesn’t automatically make your pages load better on a variety of devices. It’s all about implementation. http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/ “

21. RWD may make your pages look better on a variety

    of devices, but it doesn’t automatically make your pages load better on a variety of devices. It’s all about implementation. http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/ “
22. None

23. Performance should be priority

24. None

25. 75% of mobile users will leave the site if it

    takes more than 5 seconds. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/ “

26. Performance as priority Set expectations

27. Performance as priority Test early with prototyping

28. Performance as priority Collaborate

29. Performance as priority Iterate

30. Tip: webpagetest.org

31. Start with a budget

32. None

33. Example: Less than 3 seconds to see something.

34. Example: Not bigger than 1MB.

35. Example: No more than 20 requests.

36. Now try to stick to it. (good luck!)

37. Mobile first is crucial

38. None

39. You get real pretty early.

40. Designing for mobile isn’t just about embracing limitations — it’s

    also about extending what you can do. - Luke Wroblewski “

41. Also known as Progressive Enhancement

42. 3 issues to pick a fight with

43. None

44. 1/3 Responsive images

45. Biggest performance hit 69% of mobile web traffic is images.

46. First things first One less image, please

47. Question Which one of these sites loads faster?

48. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768

49. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183

50. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643

51. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284

52. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284 1 372 900 3 902 6 38 269

53. http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images

    Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284 1 372 900 3 902 6 38 269
54. None
55. None

56. Serve the correct images to the correct devices

57. background-images with media queries

58. Note not for user generated content

59. @media (max-width: 600px) { .module { background-image: url('images/image-600.png'); } }

    @media (min-width: 600px) { .module { background-image: url('images/image-min600.png'); } }

60. The proposed <picture> element

61. <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big- hd.jpg 2x"> <source

    srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture>

62. The <img> attribute srcset

63. <img src="fallback.jpg" alt="" srcset="small.jpg 640w 1x, small- hd.jpg 640w 2x,

    med.jpg 1x, med-hd.jpg 2x ">

64. The flag-enabled client hints

65. Client Hints can be used as input to proactive content

    negotiation; just as the Accept header allowed clients to indicate what formats they prefer, Client Hints allow clients to indicate a list of device and agent specific preferences. http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/ “

66. (request) GET /img.jpg HTTP/1.1 User-Agent: Awesome Browser Accept: image/webp, image/jpg

    CH: dpr=2.0 (response) HTTP/1.1 200 OK Server: Awesome Server Content-Type: image/jpg Content-Length: 124523 Vary: CH (image data) http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/

67. Try it: --enable-client-hints

68. Using a service like responsive.io

69. <img data-src="http://path/to/image.jpg" alt="My responsive image" />

70. How can a front-end + back-end service work?

71. Javascript crawls the page

72. Javascript crawls the page Check browser for size and capabilities

73. Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN

74. Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN Do we have this image?

75. Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN Return the image Do we have this image?

76. Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN Return the image Prepare the image Return the image Do we have this image?

77. And by the way... SVGs are pretty awesome.

78. <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke- width="2"

    fill="red" /> </svg>

79. For more information responsiveimages.org

80. 2/3 Prioritize loading of core content.

81. Load me first! Not yet! Not yet!

82. Load me first! Not yet! Not yet!

83. Load me first! Load me! Load me!

84. The useful matchMedia

85. // maybe make sure there’s a polyfill loaded before this?

    if (matchMedia("only screen and (max- width: 480px)").matches) { // load some JS templates // append them in the page } https://github.com/paulirish/matchMedia.js/

86. How about YepNope + matchMedia

87. // cool syntax :) yepnope({ test: window.matchMedia("(orientation: landscape)").matches, yep: "landscape.js",

    nope: "portrait.js" }); http://yepnopejs.com/

88. Our own approach Breakpoints.js

89. @media ( min-width: 600px ) { body { @include defineBreakpoint("GENERIC_BIG_SCREEN_BREAKPOINT");

    // generic breakpoint styles } } .element { @media ( min-width: 320px ) { @include defineBreakpoint("SPECIFIC_CONTENT_BREAKPOINT"); // specific styles for this element } } https://github.com/14islands/js-breakpoints

90. Breakpoints.on({ name: "GENERIC_BIG_SCREEN_BREAKPOINT", matched: function(){ /* some js logic to

    activate*/ }, exit: function(){ /* disable some js logic*/ }, }); Breakpoints.on({ name: "SPECIFIC_CONTENT_BREAKPOINT", el: document.getElementById("myElement"), matched: function(){ /* some js logic to activate*/ }, exit: function(){ /* disable some js logic*/ }, }); https://github.com/14islands/js-breakpoints

91. 3/3 Be aware of Javascript.

92. Separating concerns Mind your JS

93. By keeping your client side code small and lightweight, you

    can literally open up your product to new markets. https://speakerdeck.com/tkadlec/deliberate-performance “

94. Old-school Progressive Enhancement isn’t dead!

95. http://www.flickr.com/photos/not-so-much/2819702177/

96. To improve the twitter.com experience for everyone, we’ve been working

    to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers. https://blog.twitter.com/2012/improving-performance-twittercom “

97. To improve the twitter.com experience for everyone, we’ve been working

    to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers. https://blog.twitter.com/2012/improving-performance-twittercom “

98. (...) It looks exactly the same as the app it

    replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/ “

99. (...) It looks exactly the same as the app it

    replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/ “

100. Remember to Keep it simple

101. None

102. http://www.slideshare.net/nzakas/enough-withthejavascriptalready Value Bytes Profit! Ok. Bad! Ok.

103. None

104. Psst! Check the source Almost no javascript. Fewer requests.

105. #perfmatters

106. Think and prioritize performance from day one.

107. Measure. Treat performance as a core part of your website’s

     quality, and don’t ship without understanding and accepting its performance. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/ “

108. There are techniques.

109. We need to care more.

110. None

111. The internet appreciates it!

112. Questions?

113. Tack! http://14islands.com hello@14islands.com http://twitter.com/14islands https://twitter.com/responsive_io https://www.facebook.com/14islands

114. Some good references http://dribbble.com/shots/1099303-Flat-Apple-Devices-Mockup http://dribbble.com/shots/1126404-Flat-Chrome http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/ http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ https://speakerdeck.com/tkadlec/responsive-responsive-design-tutorial-at-velocity-ny https://speakerdeck.com/tkadlec/deliberate-performance