Empathy and Web Performance

245cee81a9c424266e5e401d844ea881?s=47 Lara Hogan
February 16, 2017

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 size
  • Creating performance videos
  • What Does My Site Cost?
  • All additional resources and links can be found at: designingforperformance.com
  • 245cee81a9c424266e5e401d844ea881?s=128

    Lara Hogan

    February 16, 2017
    Tweet

    Transcript

    1. Empathy and Web Performance designingforperformance.com @lara_hogan

    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
    3. Reasons that households do not have Internet Statistics New Zealand,

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

      income
    5. Low-income populations are much more likely to rely on cell

      phones exclusively for accessing the Internet. The Center for Media Justice, 2014
    6. • Updating a resume • Filling out an online job

      application • Finding cost savings • Having items delivered
    7. We often forget our privilege: using new devices and the

      fastest connections.
    8. Our industry has not designed for performance.

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

    10. A cellular device has 
 to establish a radio channel

      before it can send/get data.
    11. None
    12. None
    13. Mobile performance is terrible source: Taming the Mobile Beast <50ms

      >300ms Desktop Wifi: Mobile Network: Average round trip:
    14. So how can we optimize 
 for networks?

    15. WebPagetest

    16. Perceived performance

    17. HTML CSS and JS in head Body images

    18. Number of requests

    19. 1 HTML file 15 CSS files

    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
    21. 1 HTML file 1 CSS file 1 image 14kb 30kb

      120kb
    22. 1.Images 2.Fonts 3.Culture

    23. other images Images Average Bytes per Page by Content Type

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

      images (the nerdy parts)
    25. JPEG Joint Photographic Experts Group Group began in 1986.
 First

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

    27. JPEG JPEGs are lossy. Their algorithm is based loosely on

      how humans see and process information.
    28. JPEG Good at: 
 Smooth gradients, low contrast. Bad at:

      
 High contrast areas, edges.
    29. JPEG Optimization options: Reduce noise and other complexity. Decrease export

      quality. Blur unimportant areas.
    30. JPEG Quality Quality: 25 (39KB) Quality: 100 (325KB)

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

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

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

      57KB
    34. GIF Graphics Interchange Format Introduced by CompuServe in 1987.
 Enhanced

      version (animation!) in 1989.
    35. GIF Best for: Animations that can’t be 
 replaced with

      CSS.
    36. GIF Contain up to 256 colors (per frame). Are lossless.

      Please don’t use them.
    37. … if you must use a GIF…

    38. GIF Dithering gives the appearance 
 of a smoother blend.

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

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

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

      or noise, 
 the larger the file will be.
    42. GIF So seriously, folks: Replace GIF animations with CSS. Replace

      non-animated GIFs with PNG-8s. Replace movie GIFs with 
 asynchronously-loading videos.
    43. None
    44. GIF: 21KB PNG-8: 1.62KB

    45. PNG Portable Network Graphics Created as an improved, non-patented replacement

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

    47. PNG-8 Lossless (like GIFs!) 256 color palette (like GIFs!) Dither

      (like GIFs!) Recognize horizontal and vertical patterns.
    48. PNG-24 No restriction on color palette. Handles transparency differently.

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

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

    51. WebP Google announced WebPicture in 2010. Both lossless and lossy

      compression. Supports transparency and animation.
    52. WebP Predicts a value, then encodes the difference between the

      prediction and actual value.
    53. WebP Creation: there’s a Photoshop plugin, 
 and online conversion

      tools. Support: only Chrome, Opera, 
 and Android Browser.
    54. Save even more 
 bytes and requests

    55. Replace simple images 
 with SVG.

    56. SVG Scalable Vector Graphics XML-based vector image format, born out

      of competing standards submitted to W3C. Became a W3C recommendation in 2001.
    57. SVG Scales up beautifully for retina devices. If inline, eliminates

      an HTTP request. Not supported ≤IE8. Exports with a lot of cruft.
    58. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export

      Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke-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 "/> </svg>
    59. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 15.0.2, SVG Export

      Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke-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 "/> </svg>
    60. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke-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 "/> </svg>
    61. You can apply it as a background: .star {
 background:

      url(star.svg); 
 display: block;
 width: 83px;
 height: 83px; 
 background-size: 83px 83px; }
    62. Or inline the SVG into your HTML: <body> <svg version="1.1"

      xmlns="http://www.w3.org/2000/svg" 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"> <polygon fill="#FFFFFF" stroke="#000000" stroke- 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"/> </svg> </body>
    63. SVG Inlined SVG removes cacheability and makes your HTML file

      size larger. So, as with everything else, test it.
    64. Sprites

    65. None
    66. responsive images

    67. <img 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">
    68. <img 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">
    69. <picture> <source type="image/svg+xml" srcset="pic.svg"> <img src="pic.png" alt="Description"> </picture>

    70. Additional lossless compression

    71. None
    72. We ran all PNGs in Etsy’s templates through lossless compression.

      Average per-file space savings 19.76% Total space savings 44.34%
    73. Automate the extra compression.

    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
    75. None
    76. Fonts

    77. IE6-8 downloads all 
 @font-face files, even if they’re not

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

    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; 
 } }
    80. Optimize your character 
 subsetting.

    81. None
    82. None
    83. None
    84. Document subsetting so others can know and, if needed, edit

      it.
    85. None
    86. None
    87. None
    88. ⭐⭐⭐⭐

    89. None
    90. Consistency, clarity in patterns = better product and 
 brand

      alignment.
    91. None
    92. None
    93. 1 font weight for headlines. No more Guardian for body

      copy. Consistently across 
 Desktop and Apps.
    94. None
    95. None
    96. None
    97. Saved roughly 270KB of 
 page weight and 5 requests.

    98. Who is responsible for performance?

    99. No more performance  cops or janitors.

    100. Changing culture is hard.

    101. Help people “feel” your 
 site’s performance.

    102. None
    103. None
    104. None
    105. None
    106. None
    107. whatdoesmysitecost.com

    108. We need to have empathy.