Design Decisions Through The Lens of a Performance Budget

Slide 1

Slide 1 text

An Event Apart DC Design Decisions   through the Lens of Performance @yeseniaa

Slide 2

Slide 2 text

Yesenia Perez-Cruz  Philadelphia, PA

Slide 3

Slide 3 text

How I designed a   very slow, very heavy site without knowing it

Slide 4

Slide 4 text

Hand-done Weathered Layered Textures

Slide 5

Slide 5 text

Encourage Voting Sharing

Slide 6

Slide 6 text

Required ads Video stream Social plug-ins

Slide 7

Slide 7 text

“We need more texture”

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

“…and a parallax background.”

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Sorry everybody.  :’(

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

I’m a   designer.

Slide 16

Slide 16 text

“The designer added 5 carousels again.” —a sad, angry developer

Slide 17

Slide 17 text

“…and the client   loved it!” —a sad, angry developer

Slide 18

Slide 18 text

“Stupid designer!!!” —a sad, angry developer

Slide 19

Slide 19 text

Here’s the thing…

Slide 20

Slide 20 text

“I’m going to design a super slow site that will be a pain to code and no one will want to use!” —no one (I hope)

Slide 21

Slide 21 text

Development Design Research Biz dev Launch Development Design Research Biz dev

Slide 22

Slide 22 text

Development Design Biz dev Launch Development Design Research Biz dev

Slide 23

Slide 23 text

Development Design Biz dev Launch Development Design Research Biz dev

Slide 24

Slide 24 text

Slow, heavy sites are a result of…

Slide 25

Slide 25 text

Poor   planning

Slide 26

Slide 26 text

Poor communication

Slide 27

Slide 27 text

Poor   awareness

Slide 28

Slide 28 text

Design is a balancing act

Slide 29

Slide 29 text

Business goals User needs

Slide 30

Slide 30 text

How will this navigation structure help guide users?

Slide 31

Slide 31 text

Does the team have the internal resources to support this illustrative art direction?

Slide 32

Slide 32 text

How will this content help drive conversions?

Slide 33

Slide 33 text

Fast Functional Light-weight Beautiful Memorable On-brand vs

Slide 34

Slide 34 text

“Our new branding has 12 typefaces.”

Slide 35

Slide 35 text

“We need a carousel to make the design pop.”

Slide 36

Slide 36 text

How many requests will this carousel add?

Slide 37

Slide 37 text

How will perceived performance be impacted if we add a new font?

Slide 38

Slide 38 text

“ –Steve Souders It’s time to discuss design and performance together… http://designingforperformance.com/foreword-souders/

Slide 39

Slide 39 text

“ –Steve Souders …not as a debate, but as a collaboration that results in a beautiful user experience. http://designingforperformance.com/foreword-souders/

Slide 40

Slide 40 text

What will be the   best user experience   overall?

Slide 41

Slide 41 text

How quickly your web pages load on your users’ screens. Performance is…

Slide 42

Slide 42 text

How quickly you can deliver your sites and services to your audience.   Performance is…

Slide 43

Slide 43 text

Your audience wants content fast.

Slide 44

Slide 44 text

Online shoppers expected pages to load in   2 seconds — and at 3 seconds,   a large share abandon the site. “For Impatient Web Users, an Eye Blink Is Just Too Long to Wait,” New York Times, February 29, 2012 http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0

Slide 45

Slide 45 text

If we don’t respect our users’ time and bandwidth,   we’ll lose them.

Slide 46

Slide 46 text

Global network speeds vary greatly. http://www.ericsson.com/res/docs/2014/ericsson-mobility-report-june-2014.pdf

Slide 47

Slide 47 text

…but sites keep getting larger

Slide 48

Slide 48 text

2.16MB Average size of websites

Slide 49

Slide 49 text

Images Custom web fonts Interactions Stylesheets Third-party scripts Impacted by…

Slide 50

Slide 50 text

http://httparchive.org/interesting.php

Slide 51

Slide 51 text

http://httparchive.org/interesting.php

Slide 52

Slide 52 text

Design for Performance

Slide 53

Slide 53 text

Think about performance from the beginning 1

Slide 54

Slide 54 text

Set a performance budget 2

Slide 55

Slide 55 text

Communicate 3

Slide 56

Slide 56 text

Share work constantly 4

Slide 57

Slide 57 text

Performance   as a project goal

Slide 58

Slide 58 text

Development Design Research Biz dev Think about performance? Development Design Research Biz dev

Slide 59

Slide 59 text

“ –Tim Kadlec …deciding a page can’t exceed 500kB when a mock-up containing three carousels and a full-screen high-resolution background image has already been approved isn’t going to do you much good.

Slide 60

Slide 60 text

Performance is a design feature Not a technical concern

Slide 61

Slide 61 text

Development Design Research Biz dev Think about performance!

Slide 62

Slide 62 text

Create a UX Assessment

Slide 63

Slide 63 text

Identify strengths and weaknesses of the current user experience, including ‣ Usability ‣ Content ‣ Navigation ‣ Information architecture ‣ Performance ‣ Workflow ‣ Brand

Slide 64

Slide 64 text

Share Case Studies

Slide 65

Slide 65 text

Amazon observed a 1% decrease in revenue for every 100ms added to page load.

Slide 66

Slide 66 text

For every 1 second that page load time decreased, Walmart saw up to a 2% increase in conversions.

Slide 67

Slide 67 text

Meet the Obama campaign's $250 million fundraising platform http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/

Slide 68

Slide 68 text

Meet the Obama campaign's $250 million fundraising platform http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ We made the new platform 60% faster and this resulted in a 14% increase in donation conversions.

Slide 69

Slide 69 text

Performance budgets

Slide 70

Slide 70 text

“ –Charles Eames Design depends largely on constraints.

Slide 71

Slide 71 text

A performance budget is a tangible way to start talking about performance.

Slide 72

Slide 72 text

“ –Mark Perkins Having a pre-defined ‘budget’ is a clear, tangible way to frame decisions about what can and can’t be be included, and at a suitably early stage in the project.

Slide 73

Slide 73 text

“ –Mark Perkins The important point is to look at every decision, right through the design/build process, as something that has consequence…

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

Overall CSS Images JS

Slide 76

Slide 76 text

Overall CSS Images JS

Slide 77

Slide 77 text

Overall CSS Images JS

Slide 78

Slide 78 text

Defining a Performance Budget

Slide 79

Slide 79 text

ie. Our pages should weigh no more than 400kb, and make no more than 15 requests. Browser Experience

Slide 80

Slide 80 text

ie. Our pages should take no more than 10 seconds to load over a sub-3G connection. User Experience Budget

Slide 81

Slide 81 text

Setting Your Budget

Slide 82

Slide 82 text

Look to your pages

Slide 83

Slide 83 text

webpagetest.org

Slide 84

Slide 84 text

webpagetest.org

Slide 85

Slide 85 text

1. Page weight 2. Start Render 3. Fully Loaded

Slide 86

Slide 86 text

Look to your competitors

Slide 87

Slide 87 text

WebPagetest - Visual Comparison

Slide 88

Slide 88 text

WebPagetest - Visual Comparison

Slide 89

Slide 89 text

WebPagetest - Visual Comparison

Slide 90

Slide 90 text

“ –Dan Mall One byte = 8 bits, so 3G translates roughly to about   96 kilobytes per second. http://danielmall.com/articles/how-to-make-a-performance-budget/

Slide 91

Slide 91 text

Start render: 2 seconds Weight: 192kb

Slide 92

Slide 92 text

Weight: 192kb IMGS JS CSS HTML WEBFONTS

Slide 93

Slide 93 text

Weight: 192kb IMGS JS CSS HTML WEBFONTS

Slide 94

Slide 94 text

Weight: 192kb IMGS JS CSS HTML

Slide 95

Slide 95 text

Delivering pizza… https://www.ﬂickr.com/photos/camknows

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

Performance is a   marketable feature.

Slide 98

Slide 98 text

WebPagetest - Visual Comparison

Slide 99

Slide 99 text

1.3MB 926 KB 7.1MB 587.7 KB (191.6 KB for JS) 1.2MB Home Page Weight—Initial Load

Slide 100

Slide 100 text

To order a medium 2 topping pizza... 20.1 MB 11.6 MB 6.9MB 1231 1661 411 DATA TRANSFERRED REQUESTS

Slide 101

Slide 101 text

Customer   Goals

Slide 102

Slide 102 text

“We need to give our customers a quality experience.”

Slide 103

Slide 103 text

“Quality is stability, performance & reliability.”

Slide 104

Slide 104 text

Business Goals

Slide 105

Slide 105 text

Higher Customer Check/order Increased Online Ordering Decreased Call Center Volume

Slide 106

Slide 106 text

Performance Mission

Slide 107

Slide 107 text

“The goal of this project is to create a beautiful, flexible, lightning-fast experience…”

Slide 108

Slide 108 text

Performance budget:  600kb per page

Slide 109

Slide 109 text

Challenges…

Slide 110

Slide 110 text

Branding changes during project

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

My font budget* 100kb 600kb Fonts *desktop

Slide 113

Slide 113 text

You have 100kb to “spend” on web fonts.

Slide 114

Slide 114 text

+ Option A is 3 weights of Whitney   for body copy 1 weight of Knockout   for headings

Slide 115

Slide 115 text

Option B is 3 weights of Knockout   for headings System   fonts  for body copy +

Slide 116

Slide 116 text

with  CSS Mask- Image

Slide 117

Slide 117 text

Which is a better translation of your brand?

Slide 118

Slide 118 text

.Alpha (56/60) .Beta (43/45) .Gamma (28/30) .DELTA (19/22) paragraph (17) .Alpha (56/60) .Beta (43/45) .Gamma (28/30) .DELTA (19/22) paragraph (17)

Slide 119

Slide 119 text

Unexpected Feedback

Slide 120

Slide 120 text

Secondary carousel Static hero image 1 2 Images JS 1 2 600kb Budget Video

Slide 121

Slide 121 text

“We NEED a carousel   at the top.”

Slide 122

Slide 122 text

Secondary carousel 1 2 Images JS 1 2 600kb Budget Video Top carousel (4 slides): 700kb

Slide 123

Slide 123 text

700kb   in images and JS This carousel alone will cost…

Slide 124

Slide 124 text

1. Optimize an existing feature or asset on the page. 2.Remove an existing feature or asset from the page. 3.Don’t add the new feature or asset.

Slide 125

Slide 125 text

1. Don’t add the carousel. 2. Lazy load images that are not in the viewport on page load. 3. Load the video on click instead of on page load. Some options are

Slide 126

Slide 126 text

http://httparchive.org/interesting.php#bytesperpage

Slide 127

Slide 127 text

ImageOptim

Slide 128

Slide 128 text

Delivering   the news…

Slide 129

Slide 129 text

USA Today

Slide 130

Slide 130 text

NY Times

Slide 131

Slide 131 text

Washington   Post

Slide 132

Slide 132 text

“…articles load instantly, as much as 10 times faster than the standard mobile web.”

Slide 133

Slide 133 text

Goal: Deliver the news quickly, esp. to mobile audiences.

Slide 134

Slide 134 text

Challenges: Required ads Image heavy Slower bandwidths

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

Required Ads

Slide 137

Slide 137 text

Initial ad load size on mobile:  ~160kb

Slide 138

Slide 138 text

Designing on a Budget

Slide 139

Slide 139 text

No content

Slide 140

Slide 140 text

Re-usable patterns

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

Don’t add a style you don’t need.

Slide 143

Slide 143 text

Alpha Alpha with ‘live’ ﬂag Alpha sponsored

Slide 144

Slide 144 text

Get designs into   code earlier

Slide 145

Slide 145 text

Filament Group

Slide 146

Slide 146 text

“ –Scott Jehl We can often deliver a usable representation of a web page’s content very quickly, even if that page is quite large and asset-heavy as a whole.

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

No content

Slide 149

Slide 149 text

Adaptive Responsive

Slide 150

Slide 150 text

Grunt Perfbudget

Slide 151

Slide 151 text

“ –Cat Farman This wonderful Grunt task uses the WebPageTest.org API to measure your site against a ton of useful metrics like page weight, image sizes, script weight, and rendering time.

Slide 152

Slide 152 text

Communicate & Document

Slide 153

Slide 153 text

Create a   Style Guide

Slide 154

Slide 154 text

“ –Lara Hogan Style guides showcase the best way to implement code & request assets.

Slide 155

Slide 155 text

Create a   Style Guide Yelp Style Guide

Slide 156

Slide 156 text

Create a   Style Guide Trulia Style Guide

Slide 157

Slide 157 text

• Their HTML is 48% smaller • 21% faster load time • 60% faster time to first byte • Reduced unused CSS by 135kb http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/