Slide 1
Slide 1 text
Designing for
Performance
Lara Callender Hogan
@lara_hogan
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Performance is
user experience.
Slide 4
Slide 4 text
Users expect 2 seconds.
Slide 5
Slide 5 text
After 3 seconds,
40% will abandon your site.
Slide 6
Slide 6 text
+160k to a page =
+12% Etsy’s bounce rate
on mobile
Slide 7
Slide 7 text
When we eliminated jank:
people favorited more often
and favorited more items
Slide 8
Slide 8 text
-1 redirect =
+12% Double-Click
click-through rate
Slide 9
Slide 9 text
Performance + aesthetics =
the user experience.
Slide 10
Slide 10 text
Our industry has not
designed for performance.
Slide 11
Slide 11 text
Fast page load time builds
trust in your website.
Slide 12
Slide 12 text
performance + beauty =
overall user experience
Slide 13
Slide 13 text
Why is my site slow,
especially on mobile?
Slide 14
Slide 14 text
A cellular device has
to establish a radio channel
before it can send/get data.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Average round trip:
source: Taming the Mobile Beast
<50ms
>300ms
Desktop Wifi:
Mobile Network:
Slide 18
Slide 18 text
So how can we optimize
for networks?
Slide 19
Slide 19 text
WebPagetest
Slide 20
Slide 20 text
Perceived performance
Slide 21
Slide 21 text
HTML
CSS and JS in head
Body images
Slide 22
Slide 22 text
Number of requests
Slide 23
Slide 23 text
1 HTML file
15 CSS files
Slide 24
Slide 24 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 25
Slide 25 text
1 HTML file
1 CSS file
1 image
14kb
30kb
120kb
Slide 26
Slide 26 text
1.Images
2.Fonts
3.Markup
4.Culture
Slide 27
Slide 27 text
other
images
Images
Average Bytes per Page
by Content Type
httparchive.org/interesting.php
Slide 28
Slide 28 text
Images
Average Bytes per Page
by Content Type
httparchive.org/interesting.php
other
images (the nerdy parts)
Slide 29
Slide 29 text
JPEG
Joint Photographic Experts Group
Group began in 1986.
First standard in 1992.
Slide 30
Slide 30 text
JPEG Best for: Photos, images with many colors.
Slide 31
Slide 31 text
JPEG
JPEGs are lossy.
Their algorithm is based loosely on how
humans see and process information.
Slide 32
Slide 32 text
JPEG
Good at:
Smooth gradients, low contrast.
Bad at:
High contrast areas, edges.
Slide 33
Slide 33 text
JPEG
Optimization options:
Reduce noise and other complexity.
Decrease export quality.
Blur unimportant areas.
Slide 34
Slide 34 text
Quality: 25 (39KB) Quality: 100 (325KB)
Slide 35
Slide 35 text
Quality: 25 (39KB) Quality: 100 (325KB)
Slide 36
Slide 36 text
Before blur: 211KB After blur: 150KB
responsivedesign.is/articles/reducing-image-sizes
Slide 37
Slide 37 text
Left crop: 50KB Right crop: 60KB
Center crop: 57KB
Slide 38
Slide 38 text
GIF
Graphics Interchange Format
Introduced by CompuServe in 1987.
Enhanced version (animation!) in 1989.
Slide 39
Slide 39 text
GIF Best for: Animations that can’t be
replaced with CSS.
Slide 40
Slide 40 text
GIF
Contain up to 256 colors (per frame).
Are lossless.
Please don’t use them.
Slide 41
Slide 41 text
… if you must use a GIF…
Slide 42
Slide 42 text
GIF Dithering gives the appearance
of a smoother blend.
Slide 43
Slide 43 text
Dithering set to 0:
4.8KB
Dithering set to 100:
9.7KB
Slide 44
Slide 44 text
Horizontal pattern:
9.7KB
Vertical pattern:
21KB
Slide 45
Slide 45 text
GIF
Their compression algorithm removes
horizontal redundancy.
The more details or noise,
the larger the file will be.
Slide 46
Slide 46 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 47
Slide 47 text
No content
Slide 48
Slide 48 text
GIF:
21KB
PNG-8:
1.62KB
Slide 49
Slide 49 text
PNG
Portable Network Graphics
Created as an improved, non-patented
replacement for GIF in 1996.
Slide 50
Slide 50 text
PNG-8 Best for: Images with few colors.
Slide 51
Slide 51 text
PNG-8
Lossless (like GIFs!)
256 color palette (like GIFs!)
Dither (like GIFs!)
Recognize horizontal and vertical patterns.
Slide 52
Slide 52 text
PNG-24
No restriction on color palette.
Handles transparency differently.
Slide 53
Slide 53 text
PNG-24
Optimization options:
Decrease noise.
Decrease number of colors.
Slide 54
Slide 54 text
PNG-8 PNG-24
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
PNG-8 PNG-24
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
PNG-24:
1.28MB
JPEG @ 75 Quality:
288KB
Slide 59
Slide 59 text
WebP
Google announced WebPicture in 2010.
Both lossless and lossy compression.
Supports transparency and animation.
Slide 60
Slide 60 text
WebP
Predicts a value, then encodes the
difference between the prediction and
actual value.
Slide 61
Slide 61 text
WebP
Creation: there’s a Photoshop plugin,
and online conversion tools.
Support: only Chrome, Opera,
and Android Browser.
Slide 62
Slide 62 text
Save even more
bytes and requests
Slide 63
Slide 63 text
Replace simple images
with SVG.
Slide 64
Slide 64 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 65
Slide 65 text
SVG
Scales up beautifully for retina devices.
If inline, eliminates an HTTP request.
Not supported ≤IE8.
Exports with a lot of cruft.
Slide 66
Slide 66 text
Slide 67
Slide 67 text
Slide 68
Slide 68 text
Slide 69
Slide 69 text
You can apply it as a background:
.star {
background: url(star.svg);
display: block;
width: 83px;
height: 83px;
background-size: 83px 83px;
}
Slide 70
Slide 70 text
Or inline the SVG into your HTML:
Slide 71
Slide 71 text
SVG
Inlined SVG removes cacheability and
makes your HTML file size larger.
So, as with everything else, test it.
Slide 72
Slide 72 text
Sprites
Slide 73
Slide 73 text
#main-nav a {
background-image: url(sprite.png);
}
#main-nav #convos {
background-position: -220px 0;
}
#main-nav #favorites {
background-position: -340px 0;
}
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Serve the right
amount of bytes.
Slide 76
Slide 76 text
responsive
images
Slide 77
Slide 77 text
Slide 78
Slide 78 text
Slide 79
Slide 79 text
Slide 80
Slide 80 text
Slide 81
Slide 81 text
Additional lossless
compression
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 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 84
Slide 84 text
Automate the extra
compression.
Slide 85
Slide 85 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 86
Slide 86 text
No content
Slide 87
Slide 87 text
Fonts
Slide 88
Slide 88 text
IE6-8 downloads all
@font-face files, even if
they’re not used!
Slide 89
Slide 89 text
Only @import the font
weights you absolutely need.
Slide 90
Slide 90 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 91
Slide 91 text
Optimize your
character
subsetting.
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
Document subsetting so
others can know and, if
needed, edit it.
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
⭐⭐⭐⭐
Slide 100
Slide 100 text
Semantics &
Repurposability
Slide 101
Slide 101 text
Save development time
and page load time.
Slide 102
Slide 102 text
File size
before cleanup
File size
after cleanup
HTML CSS stylesheet images
Effects of a semantics and
repurposability template
cleanup
(not a redesign)
Slide 103
Slide 103 text
Create repurposable code.
Slide 104
Slide 104 text
Rename non-semantic elements.
.blue { }
.tags
Slide 105
Slide 105 text
Remove inefficient selectors.
.wide #sidebar a.search { }
#sidebar .search { } or just .search { }
Slide 106
Slide 106 text
Remove unnecessary
elements (divitis).
Slide 107
Slide 107 text
Before
After
Slide 108
Slide 108 text
Create patterns.
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
Consistency, clarity in patterns =
better product and
brand alignment.
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
No content
Slide 114
Slide 114 text
1 font weight for headlines.
No more Guardian for body copy.
Consistently across
Desktop and Apps.
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Saved roughly 270KB of
page weight and 5 requests.
Slide 119
Slide 119 text
IN PROGRESS
Slide 120
Slide 120 text
Make performance part of
everyone’s workflow.
Slide 121
Slide 121 text
Use a mobile-first workflow.
Slide 122
Slide 122 text
Create a performance budget.
Measure Goal Notes
Total page load time 2 seconds For all breakpoints
Total page weight 500kb min-width: 900px
Total page weight 300kb max-width: 640px
Speed Index 1,000 For all breakpoints
Slide 123
Slide 123 text
Be deliberate about loading
assets like images, fonts and
JavaScript files.
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
At the outset of a project, you
may find yourself weighing
tough choices.
Slide 127
Slide 127 text
Pro: Represents the brand well.
Con: This could be a really large file,
and we want to minimize page weight.
Can I put a large hero image
at the top of every article?
Slide 128
Slide 128 text
Compromise:
We’ll make sure that few colors are used in the
hero, and it’s compressed correctly.
Can I put a large hero image
at the top of every article?
Slide 129
Slide 129 text
Pro: Lots of flexibility in typography.
Con: More requests and page weight.
Should I @font-face three display weights
and a text weight?
Slide 130
Slide 130 text
Compromise:
We’ll use two display weights and a
system font for the body content.
Should I @font-face three display weights
and a text weight?
Slide 131
Slide 131 text
Pro: A video or animated GIF will
clearly convey more information.
Con: Videos and GIFs can be pretty heavy.
How will I demonstrate how this product works?
Slide 132
Slide 132 text
Compromise:
We’ll self-host a video that asynchronously loads.
How will I demonstrate how this product works?
Slide 133
Slide 133 text
Make it easy for
non-developers
to do performance.
Slide 134
Slide 134 text
Automate compression.
Utilize style guides.
Automate performance tests.
Automate image resizing.
Slide 135
Slide 135 text
No content
Slide 136
Slide 136 text
No content
Slide 137
Slide 137 text
No content
Slide 138
Slide 138 text
No content
Slide 139
Slide 139 text
A/B test to measure
aesthetics vs.
performance impact.
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
Who is
responsible
for performance?
Slide 142
Slide 142 text
No more performance
cops or janitors.
Slide 143
Slide 143 text
Changing culture is hard.
Slide 144
Slide 144 text
Help people “feel” your
site’s performance.
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
Publish
performance
reports.
Slide 148
Slide 148 text
Forced us to iterate on
and improve our most
important pages.
Slide 149
Slide 149 text
Reminded us that
page load times are
not secret.
Slide 150
Slide 150 text
Motivated our development
teams to get better.
Slide 151
Slide 151 text
whoa, awesome
Slide 152
Slide 152 text
No content
Slide 153
Slide 153 text
No content
Slide 154
Slide 154 text
No content
Slide 155
Slide 155 text
No content
Slide 156
Slide 156 text
We need to have empathy.
Slide 157
Slide 157 text
Good performance
is good design.
Slide 158
Slide 158 text
For plenty more on
designing for performance:
designingforperformance.com
USER EXPERIENCE/USER INTERFACE DESIGN
Designing for Performance
ISBN: 978-1-491-90251-6
US $29.99 CAN $31.99
“ If you’ve ever wondered
how aesthetic choices
impact performance or
how cellular networks
degrade your site’s
user experience—read
this book. Designing
for Performance gives
you the tools to make
and measure high
impact performance
improvements on
your site, including
actionable strategies
to increase awareness
of performance across
your company. Great
performance is good
design.”
—Jason Huff
Product Design Manager, Etsy
Twitter: @oreillymedia
facebook.com/oreilly
As a web designer, you encounter tough choices when
it comes to weighing aesthetics and performance.
Good content, layout, images, and interactivity are
essential for engaging your audience, and each of these
elements has an enormous impact on page load time
and the end-user experience. In this practical book, Lara
Hogan helps you approach projects with page speed in
mind, showing you how to test and benchmark which
design choices are most critical.
To get started, all you need are basic HTML and CSS
skills and Photoshop experience.
Topics include:
■ The impact of page load time on your site,
brand, and users
■ Page speed basics: how browsers retrieve
and render content
■ Best practices for optimizing and loading
images
■ How to clean up HTML and CSS, and
optimize web fonts
■ Mobile-first design with performance goals
by breakpoint
■ Using tools to measure performance as
your site evolves
■ Methods for shaping an organization’s
performance culture
Lara Callender Hogan is the
Senior Engineering Manager of
Performance at Etsy. She champi-
ons performance as a part of the
overall user experience, striking a
balance between aesthetics and
speed, and building performance
into company culture.
Designing for Performance Hogan
Lara Callender Hogan
Designing for
Performance
WEIGHING AESTHETICS AND SPEED
Slide 159
Slide 159 text
No content