Empathy and Web Performance

Website performance issues can disproportionately affect low-income households, folks with disabilities, rural and elderly populations. What can we do about it?

Studies from this talk (mostly PDFs):

Center for Media Justice: #righttoconnect, Media Action Grassroots Network (2015)Statistics New Zealand: Household Use of Information and Communication Technology (2012)World Internet Project: New Zealand (2015)Center for Media Justice: Cell Phones and the Digital Divide (2014)

Technical resources:
Using blur to reduce JPEG file sizeCreating performance videosWhat Does My Site Cost?All additional resources and links can be found at: designingforperformance.com

Transcript

1. Empathy and
   Web Performance
   designingforperformance.com
   @lara_hogan
   

   View Slide

2. There are 100 million
   people in the US who lack an
   Internet connection at home
   because it’s too expensive.
   Center for Media Justice, 2015
   

   View Slide

3. Reasons that households do not have Internet
   Statistics New Zealand, 2012
   

   View Slide

4. World Internet Project, New Zealand, 2015
   Devices in household by income
   

   View Slide

5. Low-income populations are much
   more likely to rely on cell phones
   exclusively for accessing the Internet.
   The Center for Media Justice, 2014
   

   View Slide

6. • Updating a resume
   • Filling out an online job application
   • Finding cost savings
   • Having items delivered
   

   View Slide

7. We often forget our privilege:
   using new devices and the
   fastest connections.
   

   View Slide

8. Our industry has not
   designed for performance.
   

   View Slide

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

   View Slide

10. A cellular device has 

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

    View Slide

11. View Slide

12. View Slide

13. Mobile performance is terrible
    source: Taming the Mobile Beast
    <50ms
    >300ms
    Desktop Wifi:
    Mobile Network:
    Average round trip:
    

    View Slide

14. So how can we optimize 

    for networks?
    

    View Slide

15. WebPagetest
    

    View Slide

16. Perceived performance
    

    View Slide

17. HTML
    CSS and JS in head
    Body images
    

    View Slide

18. Number of requests
    

    View Slide

19. 1 HTML file
    15 CSS files
    

    View Slide

20. 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

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

    View Slide

22. 1.Images
    2.Fonts
    3.Culture
    

    View Slide

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

    View Slide

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

    View Slide

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

    First standard in 1992.
    

    View Slide

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

    View Slide

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

    View Slide

28. JPEG
    Good at: 

    Smooth gradients, low contrast.
    Bad at: 

    High contrast areas, edges.
    

    View Slide

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

    View Slide

30. JPEG Quality
    Quality: 25 (39KB) Quality: 100 (325KB)
    

    View Slide

31. JPEG Quality
    Quality: 25 (39KB) Quality: 100 (325KB)
    

    View Slide

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

    View Slide

33. JPEG crop
    Left crop: 50KB Right crop: 60KB
    Center crop: 57KB
    

    View Slide

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

    Enhanced version (animation!) in 1989.
    

    View Slide

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

    replaced with CSS.
    

    View Slide

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

    View Slide

37. … if you must use a GIF…
    

    View Slide

38. GIF Dithering gives the appearance 

    of a smoother blend.
    

    View Slide

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

    View Slide

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

    View Slide

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

    the larger the file will be.
    

    View Slide

42. 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

43. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    and Android Browser.
    

    View Slide

54. Save even more 

    bytes and requests
    

    View Slide

55. Replace simple images 

    with SVG.
    

    View Slide

56. 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

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

    View Slide

58. 
    
    
    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

59. 
    
    
    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

60. 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

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

    background: url(star.svg); 

    display: block;

    width: 83px;

    height: 83px; 

    background-size: 83px 83px;
    }
    

    View Slide

62. 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

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

    View Slide

64. Sprites
    

    View Slide

65. View Slide

66. responsive
    images
    

    View Slide

67. 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

68. 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

69. 
    
    
    
    

    View Slide

70. Additional lossless
    compression
    

    View Slide

71. View Slide

72. 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

73. Automate the extra
    compression.
    

    View Slide

74. 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

75. View Slide

76. Fonts
    

    View Slide

77. IE6-8 downloads all 

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

    View Slide

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

    View Slide

79. @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

80. Optimize your
    character 

    subsetting.
    

    View Slide

81. View Slide

82. View Slide

83. View Slide

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

    View Slide

85. View Slide

86. View Slide

87. View Slide

88. ⭐⭐⭐⭐
    

    View Slide

89. View Slide

90. Consistency, clarity in patterns =
    better product and 

    brand alignment.
    

    View Slide

91. View Slide

92. View Slide

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

    Desktop and Apps.
    

    View Slide

94. View Slide

95. View Slide

96. View Slide

97. Saved roughly 270KB of 

    page weight and 5 requests.
    

    View Slide

98. Who is
    responsible
    for performance?
    

    View Slide

99. No more performance
    cops or janitors.
    

    View Slide

100. Changing culture is hard.
     

     View Slide

101. Help people “feel” your 

     site’s performance.
     

     View Slide

102. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. whatdoesmysitecost.com
     

     View Slide

108. We need to have empathy.
     

     View Slide