Designing for Performance

Transcript

1. Designing for
   Performance
   Lara Callender Hogan
   @lara_hogan
   

   View Slide

2. View Slide

3. Performance is
   user experience.
   

   View Slide

4. Users expect 2 seconds.
   

   View Slide

5. After 3 seconds,
   40% will abandon your site.
   

   View Slide

6. +160k to a page =
   +12% Etsy’s bounce rate 

   on mobile
   

   View Slide

7. When we eliminated jank: 

   people favorited more often
   and favorited more items
   

   View Slide

8. -1 redirect =
   +12% Double-Click 

   click-through rate
   

   View Slide

9. Performance + aesthetics =
   the user experience.
   

   View Slide

10. Our industry has not
    designed for performance.
    

    View Slide

11. Fast page load time builds
    trust in your website.
    

    View Slide

12. performance + beauty =
    overall user experience
    

    View Slide

13. Why is my site slow,
    especially on mobile?
    

    View Slide

14. A cellular device has 

    to establish a radio channel
    before it can send/get data.
    

    View Slide

15. View Slide

16. View Slide

17. Average round trip:
    source: Taming the Mobile Beast
    <50ms
    >300ms
    Desktop Wifi:
    Mobile Network:
    

    View Slide

18. So how can we optimize 

    for networks?
    

    View Slide

19. WebPagetest
    

    View Slide

20. Perceived performance
    

    View Slide

21. HTML
    CSS and JS in head
    Body images
    

    View Slide

22. Number of requests
    

    View Slide

23. 1 HTML file
    15 CSS files
    

    View Slide

24. Request Bytes
    http://www.etsy.com/ 15.2 KB
    http://site.etsystat...3.20131108201356.css 8.7 KB
    http://site.etsystat...e.20131112190040.css 26.8 KB
    http://img0.etsystat...ousel/largehero1.jpg 74.2 KB
    http://img1.etsystat...5.413394771_1md6.jpg 12.5 KB
    Size of requests
    

    View Slide

25. 1 HTML file
    1 CSS file
    1 image
    14kb
    30kb
    120kb
    

    View Slide

26. 1.Images
    2.Fonts
    3.Markup
    4.Culture
    

    View Slide

27. other
    images
    Images
    Average Bytes per Page
    by Content Type
    httparchive.org/interesting.php
    

    View Slide

28. Images
    Average Bytes per Page
    by Content Type
    httparchive.org/interesting.php
    other
    images (the nerdy parts)
    

    View Slide

29. JPEG
    Joint Photographic Experts Group
    Group began in 1986.

    First standard in 1992.
    

    View Slide

30. JPEG Best for: Photos, images with many colors.
    

    View Slide

31. JPEG
    JPEGs are lossy.
    Their algorithm is based loosely on how
    humans see and process information.
    

    View Slide

32. JPEG
    Good at: 

    Smooth gradients, low contrast.
    Bad at: 

    High contrast areas, edges.
    

    View Slide

33. JPEG
    Optimization options:
    Reduce noise and other complexity.
    Decrease export quality.
    Blur unimportant areas.
    

    View Slide

34. Quality: 25 (39KB) Quality: 100 (325KB)
    

    View Slide

35. Quality: 25 (39KB) Quality: 100 (325KB)
    

    View Slide

36. Before blur: 211KB After blur: 150KB
    responsivedesign.is/articles/reducing-image-sizes
    

    View Slide

37. Left crop: 50KB Right crop: 60KB
    Center crop: 57KB
    

    View Slide

38. GIF
    Graphics Interchange Format
    Introduced by CompuServe in 1987.

    Enhanced version (animation!) in 1989.
    

    View Slide

39. GIF Best for: Animations that can’t be 

    replaced with CSS.
    

    View Slide

40. GIF
    Contain up to 256 colors (per frame).
    Are lossless.
    Please don’t use them.
    

    View Slide

41. … if you must use a GIF…
    

    View Slide

42. GIF Dithering gives the appearance 

    of a smoother blend.
    

    View Slide

43. Dithering set to 0:
    4.8KB
    Dithering set to 100:
    9.7KB
    

    View Slide

44. Horizontal pattern:
    9.7KB
    Vertical pattern:
    21KB
    

    View Slide

45. GIF
    Their compression algorithm removes
    horizontal redundancy.
    The more details or noise, 

    the larger the file will be.
    

    View Slide

46. GIF
    So seriously, folks:
    Replace GIF animations with CSS.
    Replace non-animated GIFs with PNG-8s.
    Replace movie GIFs with 

    asynchronously-loading videos.
    

    View Slide

47. View Slide

48. GIF:
    21KB
    PNG-8:
    1.62KB
    

    View Slide

49. PNG
    Portable Network Graphics
    Created as an improved, non-patented
    replacement for GIF in 1996.
    

    View Slide

50. PNG-8 Best for: Images with few colors.
    

    View Slide

51. PNG-8
    Lossless (like GIFs!)
    256 color palette (like GIFs!)
    Dither (like GIFs!)
    Recognize horizontal and vertical patterns.
    

    View Slide

52. PNG-24
    No restriction on color palette.
    Handles transparency differently.
    

    View Slide

53. PNG-24
    Optimization options:
    Decrease noise.
    Decrease number of colors.
    

    View Slide

54. PNG-8 PNG-24
    

    View Slide

55. View Slide

56. PNG-8 PNG-24
    

    View Slide

57. View Slide

58. PNG-24:
    1.28MB
    JPEG @ 75 Quality:
    288KB
    

    View Slide

59. WebP
    Google announced WebPicture in 2010.
    Both lossless and lossy compression.
    Supports transparency and animation.
    

    View Slide

60. WebP
    Predicts a value, then encodes the
    difference between the prediction and
    actual value.
    

    View Slide

61. WebP
    Creation: there’s a Photoshop plugin, 

    and online conversion tools.
    Support: only Chrome, Opera, 

    and Android Browser.
    

    View Slide

62. Save even more 

    bytes and requests
    

    View Slide

63. Replace simple images 

    with SVG.
    

    View Slide

64. SVG
    Scalable Vector Graphics
    XML-based vector image format, born out
    of competing standards submitted to W3C.
    Became a W3C recommendation in 2001.
    

    View Slide

65. SVG
    Scales up beautifully for retina devices.
    If inline, eliminates an HTTP request.
    Not supported ≤IE8.
    Exports with a lot of cruft.
    

    View Slide

66. 
    
    
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

    width="20px" height="20px" viewBox="0 0 20 20" enable-
    background="new 0 0 20 20" xml:space="preserve">
    points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887
    15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112
    8.015,8.112 "/>
    
    

    View Slide

67. 
    
    
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

    width="20px" height="20px" viewBox="0 0 20 20" enable-
    background="new 0 0 20 20" xml:space="preserve">
    points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887
    15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112
    8.015,8.112 "/>
    
    

    View Slide

68. xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

    width="20px" height="20px" viewBox="0 0 20 20" enable-
    background="new 0 0 20 20" xml:space="preserve">
    points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887
    15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592, 8.112
    8.015,8.112 "/>
    
    

    View Slide

69. You can apply it as a background:
    .star {

    background: url(star.svg); 

    display: block;

    width: 83px;

    height: 83px; 

    background-size: 83px 83px;
    }
    

    View Slide

70. Or inline the SVG into your HTML:
    
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" width="20px" height="20px" viewBox="0 0 20 20"
    enable-background="new 0 0 20 20" xml:space="preserve">
    miterlimit="10" points="10,2.003 11.985,8.112
    18.407,8.112 13.212,11.887 15.196,17.996 10,14.221
    4.803,17.996 6.789,11.887 1.592, 8.112 8.015,8.112"/>
    
    
    

    View Slide

71. SVG
    Inlined SVG removes cacheability and
    makes your HTML file size larger.
    So, as with everything else, test it.
    

    View Slide

72. Sprites
    

    View Slide

73. #main-nav a {

    background-image: url(sprite.png);

    }
    #main-nav #convos {

    background-position: -220px 0;

    }
    #main-nav #favorites {

    background-position: -340px 0;

    }
    

    View Slide

74. View Slide

75. Serve the right 

    amount of bytes.
    

    View Slide

76. responsive
    images
    

    View Slide

77. srcset="
    small.jpg 400w,
    medium.jpg 800w,
    full.jpg 1300w"
    sizes="
    (max-width: 480px) 75vw,
    (min-width: 960px) 95vw,
    60vw"
    src="medium.jpg"
    alt="image title"
    title="image title">
    

    View Slide

78. srcset="
    small.jpg 400w,
    medium.jpg 800w,
    full.jpg 1300w"
    sizes="
    (max-width: 480px) 75vw,
    (min-width: 960px) 95vw,
    60vw"
    src="medium.jpg"
    alt="image title"
    title="image title">
    

    View Slide

79. srcset="
    small.jpg 400w,
    medium.jpg 800w,
    full.jpg 1300w"
    sizes="
    (max-width: 480px) 75vw,
    (min-width: 960px) 95vw,
    60vw"
    src="medium.jpg"
    alt="image title"
    title="image title">
    

    View Slide

80. 
    
    
    
    

    View Slide

81. Additional lossless
    compression
    

    View Slide

82. View Slide

83. We ran all PNGs in Etsy’s templates through
    lossless compression.
    Average per-file space savings 19.76%
    Total space savings 44.34%
    

    View Slide

84. Automate the extra
    compression.
    

    View Slide

85. ImageOptim CLI

    github.com/JamieMason/ImageOptim-CLI
    Wordpress plugin

    wordpress.org/plugins/ewww-image-optimizer/
    SVG scrubber

    codedread.com/scour/ or github.com/svg/svgo
    

    View Slide

86. View Slide

87. Fonts
    

    View Slide

88. IE6-8 downloads all 

    @font-face files, even if
    they’re not used!
    

    View Slide

89. Only @import the font
    weights you absolutely need.
    

    View Slide

90. @font-face {
    font-family: 'FontName';
    src: url('fontname.woff') format('woff');
    }
    body {
    font-family: Georgia, serif;
    }
    @media (min-width: 1000px) { 

    body {
    font-family: 'FontName', Georgia, serif; 

    }
    }
    

    View Slide

91. Optimize your
    character 

    subsetting.
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. Document subsetting so
    others can know and, if
    needed, edit it.
    

    View Slide

96. View Slide

97. View Slide

98. View Slide

99. ⭐⭐⭐⭐
    

    View Slide

100. Semantics &
     Repurposability
     

     View Slide

101. Save development time 

     and page load time.
     

     View Slide

102. File size

     before cleanup
     File size

     after cleanup
     HTML CSS stylesheet images
     Effects of a semantics and
     repurposability template
     cleanup
     (not a redesign)
     

     View Slide

103. Create repurposable code.
     

     View Slide

104. Rename non-semantic elements.
     .blue { }

     .tags
     

     View Slide

105. Remove inefficient selectors.
     .wide #sidebar a.search { } 

     #sidebar .search { } or just .search { }
     

     View Slide

106. Remove unnecessary
     elements (divitis).
     

     View Slide

107. Before
     After
     

     View Slide

108. Create patterns.
     

     View Slide

109. View Slide

110. View Slide

111. Consistency, clarity in patterns =
     better product and 

     brand alignment.
     

     View Slide

112. View Slide

113. View Slide

114. 1 font weight for headlines.
     No more Guardian for body copy.
     Consistently across 

     Desktop and Apps.
     

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. Saved roughly 270KB of 

     page weight and 5 requests.
     

     View Slide

119. IN PROGRESS
     

     View Slide

120. Make performance part of
     everyone’s workflow.
     

     View Slide

121. Use a mobile-first workflow.
     

     View Slide

122. Create a performance budget.
     Measure Goal Notes
     Total page load time 2 seconds For all breakpoints
     Total page weight 500kb min-width: 900px
     Total page weight 300kb max-width: 640px
     Speed Index 1,000 For all breakpoints
     

     View Slide

123. Be deliberate about loading
     assets like images, fonts and
     JavaScript files.
     

     View Slide

124. View Slide

125. View Slide

126. At the outset of a project, you
     may find yourself weighing
     tough choices.
     

     View Slide

127. Pro: Represents the brand well.
     Con: This could be a really large file, 

     and we want to minimize page weight.
     Can I put a large hero image 

     at the top of every article?
     

     View Slide

128. Compromise:
     We’ll make sure that few colors are used in the
     hero, and it’s compressed correctly.
     Can I put a large hero image 

     at the top of every article?
     

     View Slide

129. Pro: Lots of flexibility in typography.
     Con: More requests and page weight.
     Should I @font-face three display weights 

     and a text weight?
     

     View Slide

130. Compromise:
     We’ll use two display weights and a 

     system font for the body content.
     Should I @font-face three display weights 

     and a text weight?
     

     View Slide

131. Pro: A video or animated GIF will 

     clearly convey more information.
     Con: Videos and GIFs can be pretty heavy.
     How will I demonstrate how this product works?
     

     View Slide

132. Compromise:
     We’ll self-host a video that asynchronously loads.
     How will I demonstrate how this product works?
     

     View Slide

133. Make it easy for 

     non-developers 

     to do performance.
     

     View Slide

134. Automate compression.
     Utilize style guides.
     Automate performance tests.
     Automate image resizing.
     

     View Slide

135. View Slide

136. View Slide

137. View Slide

138. View Slide

139. A/B test to measure
     aesthetics vs.
     performance impact.
     

     View Slide

140. View Slide

141. Who is
     responsible
     for performance?
     

     View Slide

142. No more performance
     cops or janitors.
     

     View Slide

143. Changing culture is hard.
     

     View Slide

144. Help people “feel” your 

     site’s performance.
     

     View Slide

145. View Slide

146. View Slide

147. Publish 

     performance

     reports.
     

     View Slide

148. Forced us to iterate on 

     and improve our most
     important pages.
     

     View Slide

149. Reminded us that 

     page load times are 

     not secret.
     

     View Slide

150. Motivated our development
     teams to get better.
     

     View Slide

151. whoa, awesome
     

     View Slide

152. View Slide

153. View Slide

154. View Slide

155. View Slide

156. We need to have empathy.
     

     View Slide

157. Good performance
     is good design.
     

     View Slide

158. For plenty more on
     designing for performance:
     designingforperformance.com
     USER EXPERIENCE/USER INTERFACE DESIGN
     Designing for Performance
     ISBN: 978-1-491-90251-6
     US $29.99 CAN $31.99
     “ If you’ve ever wondered
     how aesthetic choices
     impact performance or
     how cellular networks
     degrade your site’s
     user experience—read
     this book. Designing
     for Performance gives
     you the tools to make
     and measure high
     impact performance
     improvements on
     your site, including
     actionable strategies
     to increase awareness
     of performance across
     your company. Great
     performance is good
     design.”
     —Jason Huff
     Product Design Manager, Etsy
     Twitter: @oreillymedia
     facebook.com/oreilly
     As a web designer, you encounter tough choices when
     it comes to weighing aesthetics and performance.
     Good content, layout, images, and interactivity are
     essential for engaging your audience, and each of these
     elements has an enormous impact on page load time
     and the end-user experience. In this practical book, Lara
     Hogan helps you approach projects with page speed in
     mind, showing you how to test and benchmark which
     design choices are most critical.
     To get started, all you need are basic HTML and CSS
     skills and Photoshop experience.
     Topics include:
     ■ The impact of page load time on your site,
     brand, and users
     ■ Page speed basics: how browsers retrieve
     and render content
     ■ Best practices for optimizing and loading
     images
     ■ How to clean up HTML and CSS, and
     optimize web fonts
     ■ Mobile-first design with performance goals
     by breakpoint
     ■ Using tools to measure performance as
     your site evolves
     ■ Methods for shaping an organization’s
     performance culture
     Lara Callender Hogan is the
     Senior Engineering Manager of
     Performance at Etsy. She champi-
     ons performance as a part of the
     overall user experience, striking a
     balance between aesthetics and
     speed, and building performance
     into company culture.
     Designing for Performance Hogan
     Lara Callender Hogan
     Designing for
     Performance
     WEIGHING AESTHETICS AND SPEED
     

     View Slide

159. View Slide