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

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

      phones exclusively for accessing the Internet. The Center for Media Justice, 2014
    3. 6.

      • Updating a resume • Filling out an online job

      application • Finding cost savings • Having items delivered
    4. 11.
    5. 12.
    6. 13.

      Mobile performance is terrible source: Taming the Mobile Beast <50ms

      >300ms Desktop Wifi: Mobile Network: Average round trip:
    7. 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
    8. 27.

      JPEG JPEGs are lossy. Their algorithm is based loosely on

      how humans see and process information.
    9. 28.
    10. 42.

      GIF So seriously, folks: Replace GIF animations with CSS. Replace

      non-animated GIFs with PNG-8s. Replace movie GIFs with 
 asynchronously-loading videos.
    11. 43.
    12. 47.

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

      (like GIFs!) Recognize horizontal and vertical patterns.
    13. 51.

      WebP Google announced WebPicture in 2010. Both lossless and lossy

      compression. Supports transparency and animation.
    14. 53.

      WebP Creation: there’s a Photoshop plugin, 
 and online conversion

      tools. Support: only Chrome, Opera, 
 and Android Browser.
    15. 56.

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

      of competing standards submitted to W3C. Became a W3C recommendation in 2001.
    16. 57.

      SVG Scales up beautifully for retina devices. If inline, eliminates

      an HTTP request. Not supported ≤IE8. Exports with a lot of cruft.
    17. 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>
    18. 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>
    19. 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>
    20. 61.

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

      url(star.svg); 
 display: block;
 width: 83px;
 height: 83px; 
 background-size: 83px 83px; }
    21. 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>
    22. 63.

      SVG Inlined SVG removes cacheability and makes your HTML file

      size larger. So, as with everything else, test it.
    23. 64.
    24. 65.
    25. 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">
    26. 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">
    27. 71.
    28. 72.

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

      Average per-file space savings 19.76% Total space savings 44.34%
    29. 75.
    30. 76.
    31. 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; 
 } }
    32. 81.
    33. 82.
    34. 83.
    35. 85.
    36. 86.
    37. 87.
    38. 89.
    39. 91.
    40. 92.
    41. 93.

      1 font weight for headlines. No more Guardian for body

      copy. Consistently across 
 Desktop and Apps.
    42. 94.
    43. 95.
    44. 96.
    45. 102.
    46. 103.
    47. 104.
    48. 105.
    49. 106.