Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Empathy and Web Performance

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 sizeCreating performance videosWhat Does My Site Cost?All additional resources and links can be found at: designingforperformance.com

Lara Hogan

February 16, 2017
Tweet

More Decks by Lara Hogan

Other Decks in Technology

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