Performance as design: doing responsive responsibly

D34efae5a5bdbb00ce3b300c78cf359a?s=47 14islands
October 25, 2013

Performance as design: doing responsive responsibly

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

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

October 25, 2013
Tweet

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