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
   

   View Slide

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

   View Slide

3. This talk is about
   Performance as design.
   

   View Slide

4. Responsive web design?
   

   View Slide

5. View Slide

6. This is not the web.
   

   View Slide

7. This is the web.
   

   View Slide

8. This will be the web.
   

   View Slide

9. Thanks Brad!
   

   View Slide

10. Thanks Brad!
    You’re welcome!
    

    View Slide

11. More people have
    access to mobile than
    to running water and
    toothbrushes.
    http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets
    “
    

    View Slide

12. View Slide

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/
    “
    

    View Slide

14. Hej! We are 14islands.
    

    View Slide

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

    View Slide

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/
    “
    

    View Slide

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

    View Slide

18. View Slide

19. View Slide

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/
    “
    

    View Slide

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/
    “
    

    View Slide

22. View Slide

23. Performance should be
    priority
    

    View Slide

24. View Slide

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/
    “
    

    View Slide

26. Performance as priority
    Set expectations
    

    View Slide

27. Performance as priority
    Test early with
    prototyping
    

    View Slide

28. Performance as priority
    Collaborate
    

    View Slide

29. Performance as priority
    Iterate
    

    View Slide

30. Tip:
    webpagetest.org
    

    View Slide

31. Start with a
    budget
    

    View Slide

32. View Slide

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

    View Slide

34. Example:
    Not bigger than 1MB.
    

    View Slide

35. Example:
    No more than
    20 requests.
    

    View Slide

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

    View Slide

37. Mobile first is
    crucial
    

    View Slide

38. View Slide

39. You get real
    pretty early.
    

    View Slide

40. Designing for mobile isn’t just about
    embracing limitations — it’s also
    about extending what you can do.
    - Luke Wroblewski
    “
    

    View Slide

41. Also known as
    Progressive Enhancement
    

    View Slide

42. 3 issues
    to pick a fight with
    

    View Slide

43. View Slide

44. 1/3
    Responsive images
    

    View Slide

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

    View Slide

46. First things first
    One less image, please
    

    View Slide

47. Question
    Which one of these sites
    loads faster?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

54. View Slide

55. View Slide

56. Serve the correct images
    to the correct devices
    

    View Slide

57. background-images with
    media queries
    

    View Slide

58. Note
    not for user generated
    content
    

    View Slide

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');
    }
    }
    

    View Slide

60. The proposed
    element
    

    View Slide

61. 
    
    
    
    
    

    View Slide

62. The attribute
    srcset
    

    View Slide

63. 
    

    View Slide

64. The flag-enabled
    client hints
    

    View Slide

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/
    “
    

    View Slide

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/
    

    View Slide

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

    View Slide

68. Using a service like
    responsive.io
    

    View Slide

69. 
    

    View Slide

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

    View Slide

71. Javascript crawls the page
    

    View Slide

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

    View Slide

73. Javascript crawls the page
    Check browser for size and capabilities
    Request responsive.io CDN
    

    View Slide

74. Javascript crawls the page
    Check browser for size and capabilities
    Request responsive.io CDN
    Do we have this image?
    

    View Slide

75. Javascript crawls the page
    Check browser for size and capabilities
    Request responsive.io CDN
    Return the image
    Do we have this image?
    

    View Slide

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?
    

    View Slide

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

    View Slide

78. 
    width="2" fill="red" />
    
    

    View Slide

79. For more information
    responsiveimages.org
    

    View Slide

80. 2/3
    Prioritize loading of
    core content.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

84. The useful
    matchMedia
    

    View Slide

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/
    

    View Slide

86. How about
    YepNope + matchMedia
    

    View Slide

87. // cool syntax :)
    yepnope({
    test: window.matchMedia("(orientation:
    landscape)").matches,
    yep: "landscape.js",
    nope: "portrait.js"
    });
    http://yepnopejs.com/
    

    View Slide

88. Our own approach
    Breakpoints.js
    

    View Slide

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
    

    View Slide

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
    

    View Slide

91. 3/3
    Be aware
    of Javascript.
    

    View Slide

92. Separating concerns
    Mind your JS
    

    View Slide

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
    “
    

    View Slide

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

    View Slide

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

    View Slide

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
    “
    

    View Slide

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
    “
    

    View Slide

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/
    “
    

    View Slide

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/
    “
    

    View Slide

100. Remember to
     Keep it simple
     

     View Slide

101. View Slide

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

     View Slide

103. View Slide

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

     View Slide

105. #perfmatters
     

     View Slide

106. Think and prioritize
     performance
     from day one.
     

     View Slide

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/
     “
     

     View Slide

108. There are techniques.
     

     View Slide

109. We need to care more.
     

     View Slide

110. View Slide

111. The internet
     appreciates it!
     

     View Slide

112. Questions?
     

     View Slide

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

     View Slide

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
     

     View Slide