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

image title

Slide 78

Slide 78 text

image title

Slide 79

Slide 79 text

image title

Slide 80

Slide 80 text

Description

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