Slide 1
Slide 1 text
Empathy and
Web Performance
designingforperformance.com
@lara_hogan
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Reasons that households do not have Internet
Statistics New Zealand, 2012
Slide 4
Slide 4 text
World Internet Project, New Zealand, 2015
Devices in household by income
Slide 5
Slide 5 text
Low-income populations are much
more likely to rely on cell phones
exclusively for accessing the Internet.
The Center for Media Justice, 2014
Slide 6
Slide 6 text
• Updating a resume
• Filling out an online job application
• Finding cost savings
• Having items delivered
Slide 7
Slide 7 text
We often forget our privilege:
using new devices and the
fastest connections.
Slide 8
Slide 8 text
Our industry has not
designed for performance.
Slide 9
Slide 9 text
Why is my site slow,
especially on mobile?
Slide 10
Slide 10 text
A cellular device has
to establish a radio channel
before it can send/get data.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
Mobile performance is terrible
source: Taming the Mobile Beast
<50ms
>300ms
Desktop Wifi:
Mobile Network:
Average round trip:
Slide 14
Slide 14 text
So how can we optimize
for networks?
Slide 15
Slide 15 text
WebPagetest
Slide 16
Slide 16 text
Perceived performance
Slide 17
Slide 17 text
HTML
CSS and JS in head
Body images
Slide 18
Slide 18 text
Number of requests
Slide 19
Slide 19 text
1 HTML file
15 CSS files
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
1 HTML file
1 CSS file
1 image
14kb
30kb
120kb
Slide 22
Slide 22 text
1.Images
2.Fonts
3.Culture
Slide 23
Slide 23 text
other
images
Images
Average Bytes per Page
by Content Type
httparchive.org/interesting.php
Slide 24
Slide 24 text
Images
Average Bytes per Page
by Content Type
httparchive.org/interesting.php
other
images (the nerdy parts)
Slide 25
Slide 25 text
JPEG
Joint Photographic Experts Group
Group began in 1986.
First standard in 1992.
Slide 26
Slide 26 text
JPEG Best for: Photos, images with many colors.
Slide 27
Slide 27 text
JPEG
JPEGs are lossy.
Their algorithm is based loosely on how
humans see and process information.
Slide 28
Slide 28 text
JPEG
Good at:
Smooth gradients, low contrast.
Bad at:
High contrast areas, edges.
Slide 29
Slide 29 text
JPEG
Optimization options:
Reduce noise and other complexity.
Decrease export quality.
Blur unimportant areas.
Slide 30
Slide 30 text
JPEG Quality
Quality: 25 (39KB) Quality: 100 (325KB)
Slide 31
Slide 31 text
JPEG Quality
Quality: 25 (39KB) Quality: 100 (325KB)
Slide 32
Slide 32 text
JPEG blur
Before blur: 211KB After blur: 150KB
responsivedesign.is/articles/reducing-image-sizes
Slide 33
Slide 33 text
JPEG crop
Left crop: 50KB Right crop: 60KB
Center crop: 57KB
Slide 34
Slide 34 text
GIF
Graphics Interchange Format
Introduced by CompuServe in 1987.
Enhanced version (animation!) in 1989.
Slide 35
Slide 35 text
GIF Best for: Animations that can’t be
replaced with CSS.
Slide 36
Slide 36 text
GIF
Contain up to 256 colors (per frame).
Are lossless.
Please don’t use them.
Slide 37
Slide 37 text
… if you must use a GIF…
Slide 38
Slide 38 text
GIF Dithering gives the appearance
of a smoother blend.
Slide 39
Slide 39 text
Dithering set to 0:
4.8KB
Dithering set to 100:
9.7KB
Slide 40
Slide 40 text
Horizontal pattern:
9.7KB
Vertical pattern:
21KB
Slide 41
Slide 41 text
GIF
Their compression algorithm removes
horizontal redundancy.
The more details or noise,
the larger the file will be.
Slide 42
Slide 42 text
GIF
So seriously, folks:
Replace GIF animations with CSS.
Replace non-animated GIFs with PNG-8s.
Replace movie GIFs with
asynchronously-loading videos.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
GIF:
21KB
PNG-8:
1.62KB
Slide 45
Slide 45 text
PNG
Portable Network Graphics
Created as an improved, non-patented
replacement for GIF in 1996.
Slide 46
Slide 46 text
PNG-8 Best for: Images with few colors.
Slide 47
Slide 47 text
PNG-8
Lossless (like GIFs!)
256 color palette (like GIFs!)
Dither (like GIFs!)
Recognize horizontal and vertical patterns.
Slide 48
Slide 48 text
PNG-24
No restriction on color palette.
Handles transparency differently.
Slide 49
Slide 49 text
PNG-24
Optimization options:
Decrease noise.
Decrease number of colors.
Slide 50
Slide 50 text
PNG-24:
1.28MB
JPEG @ 75 Quality:
288KB
Slide 51
Slide 51 text
WebP
Google announced WebPicture in 2010.
Both lossless and lossy compression.
Supports transparency and animation.
Slide 52
Slide 52 text
WebP
Predicts a value, then encodes the
difference between the prediction and
actual value.
Slide 53
Slide 53 text
WebP
Creation: there’s a Photoshop plugin,
and online conversion tools.
Support: only Chrome, Opera,
and Android Browser.
Slide 54
Slide 54 text
Save even more
bytes and requests
Slide 55
Slide 55 text
Replace simple images
with SVG.
Slide 56
Slide 56 text
SVG
Scalable Vector Graphics
XML-based vector image format, born out
of competing standards submitted to W3C.
Became a W3C recommendation in 2001.
Slide 57
Slide 57 text
SVG
Scales up beautifully for retina devices.
If inline, eliminates an HTTP request.
Not supported ≤IE8.
Exports with a lot of cruft.
Slide 58
Slide 58 text
Slide 59
Slide 59 text
Slide 60
Slide 60 text
Slide 61
Slide 61 text
You can apply it as a background:
.star {
background: url(star.svg);
display: block;
width: 83px;
height: 83px;
background-size: 83px 83px;
}
Slide 62
Slide 62 text
Or inline the SVG into your HTML:
Slide 63
Slide 63 text
SVG
Inlined SVG removes cacheability and
makes your HTML file size larger.
So, as with everything else, test it.
Slide 64
Slide 64 text
Sprites
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
responsive
images
Slide 67
Slide 67 text
Slide 68
Slide 68 text
Slide 69
Slide 69 text
Slide 70
Slide 70 text
Additional lossless
compression
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
We ran all PNGs in Etsy’s templates through
lossless compression.
Average per-file space savings 19.76%
Total space savings 44.34%
Slide 73
Slide 73 text
Automate the extra
compression.
Slide 74
Slide 74 text
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
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Fonts
Slide 77
Slide 77 text
IE6-8 downloads all
@font-face files, even if
they’re not used!
Slide 78
Slide 78 text
Only @import the font
weights you absolutely need.
Slide 79
Slide 79 text
@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;
}
}
Slide 80
Slide 80 text
Optimize your
character
subsetting.
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
Document subsetting so
others can know and, if
needed, edit it.
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
⭐⭐⭐⭐
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
Consistency, clarity in patterns =
better product and
brand alignment.
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
1 font weight for headlines.
No more Guardian for body copy.
Consistently across
Desktop and Apps.
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
Saved roughly 270KB of
page weight and 5 requests.
Slide 98
Slide 98 text
Who is
responsible
for performance?
Slide 99
Slide 99 text
No more performance
cops or janitors.
Slide 100
Slide 100 text
Changing culture is hard.
Slide 101
Slide 101 text
Help people “feel” your
site’s performance.
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
No content
Slide 104
Slide 104 text
No content
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
No content
Slide 107
Slide 107 text
whatdoesmysitecost.com
Slide 108
Slide 108 text
We need to have empathy.