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. 5.
  2. 11.

    More people have access to mobile than to running water

    and toothbrushes. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets “
  3. 12.
  4. 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/ “
  5. 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/ “
  6. 18.
  7. 19.
  8. 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/ “
  9. 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/ “
  10. 22.
  11. 24.
  12. 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/ “
  13. 32.
  14. 38.
  15. 40.

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

    also about extending what you can do. - Luke Wroblewski “
  16. 43.
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 54.
  23. 55.
  24. 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'); } }
  25. 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>
  26. 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/ “
  27. 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/
  28. 74.

    Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN Do we have this image?
  29. 75.

    Javascript crawls the page Check browser for size and capabilities

    Request responsive.io CDN Return the image Do we have this image?
  30. 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?
  31. 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/
  32. 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
  33. 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
  34. 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 “
  35. 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 “
  36. 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 “
  37. 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/ “
  38. 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/ “
  39. 101.
  40. 103.
  41. 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/ “
  42. 110.
  43. 112.