Performance as design: doing responsive responsibly

Addressing performance importance and some concerns to when it comes to responsive web design.

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?
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 “
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
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/ “
23. Performance should be priority
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
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
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
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
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
102. http://www.slideshare.net/nzakas/enough-withthejavascriptalready Value Bytes Profit! Ok. Bad! Ok.
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.
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