Deliberate Performance - Speaker Deck

Slide 1

Slide 1 text

Deliberate Performance Smashing Conference | September 9th, 2013 | @tkadlec | timkadlec.com Monday, September 9, 13

Slide 2

Slide 2 text

http://ﬂic.kr/p/96ryj6 http://ﬂic.kr/p/5MWEMo Monday, September 9, 13

Slide 3

Slide 3 text

http://ﬂic.kr/p/z268 Monday, September 9, 13

Slide 4

Slide 4 text

http://ﬂic.kr/p/492m2p Monday, September 9, 13

Slide 5

Slide 5 text

http://ﬂic.kr/p/69SUZW Monday, September 9, 13

Slide 6

Slide 6 text

we weren’t deliberate Monday, September 9, 13

Slide 7

Slide 7 text

the web is getting fat Monday, September 9, 13

Slide 8

Slide 8 text

Monday, September 9, 13

Slide 9

Slide 9 text

1.5mb Monday, September 9, 13

Slide 10

Slide 10 text

21% Monday, September 9, 13

Slide 11

Slide 11 text

Monday, September 9, 13

Slide 12

Slide 12 text

Minimize JS & CSS Optimize images GZip JS at bottom Async scripts Browser caching Avoid redirects Monday, September 9, 13

Slide 13

Slide 13 text

it’s a cultural issue Monday, September 9, 13

Slide 14

Slide 14 text

lack of performance lack of planning = Monday, September 9, 13

Slide 15

Slide 15 text

I doubt anyone really wants to release a site that doesn't perform well, it's just a product of not being aﬀorded the luxury of time and top-down pressure. — a friend. Monday, September 9, 13

Slide 16

Slide 16 text

beautiful. Monday, September 9, 13

Slide 17

Slide 17 text

beautiful. robust. fast. Monday, September 9, 13

Slide 18

Slide 18 text

beautiful. Monday, September 9, 13

Slide 19

Slide 19 text

beautiful. done on time. Monday, September 9, 13

Slide 20

Slide 20 text

pre-optimization is the root of all evil Monday, September 9, 13

Slide 21

Slide 21 text

post-optimization is the root of all evil Monday, September 9, 13

Slide 22

Slide 22 text

Monday, September 9, 13

Slide 23

Slide 23 text

death by a thousand cuts http://ﬂic.kr/p/6DFYyo Monday, September 9, 13

Slide 24

Slide 24 text

http://ﬂic.kr/p/5pp76g Monday, September 9, 13

Slide 25

Slide 25 text

http://ﬂic.kr/p/9roSGx Monday, September 9, 13

Slide 26

Slide 26 text

http://ﬂic.kr/p/9roSGx Hint: This is not juice Monday, September 9, 13

Slide 27

Slide 27 text

http://bit.ly/18pBjPK Only a problem if it’s broken Monday, September 9, 13

Slide 28

Slide 28 text

we can can be better Monday, September 9, 13

Slide 29

Slide 29 text

make friends early Monday, September 9, 13

Slide 30

Slide 30 text

make it visual Monday, September 9, 13

Slide 31

Slide 31 text

Monday, September 9, 13

Slide 32

Slide 32 text

Monday, September 9, 13

Slide 33

Slide 33 text

make it personal Monday, September 9, 13

Slide 34

Slide 34 text

http://bit.ly/1c7O9Gf 100ms Monday, September 9, 13

Slide 35

Slide 35 text

http://bit.ly/1c7O9Gf 100ms 1% revenue Monday, September 9, 13

Slide 36

Slide 36 text

$15.7 billion http://yhoo.it/17aFlLh Monday, September 9, 13

Slide 37

Slide 37 text

1% = $157,000,000 http://yhoo.it/17aFlLh Monday, September 9, 13

Slide 38

Slide 38 text

One second 11% page views http://bit.ly/oTg5ts Monday, September 9, 13

Slide 39

Slide 39 text

http://bit.ly/oTg5ts 16% customer satisfaction One second Monday, September 9, 13

Slide 40

Slide 40 text

http://bit.ly/oTg5ts 7% conversions One second Monday, September 9, 13

Slide 41

Slide 41 text

$2,500,000 http://yhoo.it/17aFlLh Monday, September 9, 13

Slide 42

Slide 42 text

vs Monday, September 9, 13

Slide 43

Slide 43 text

Monday, September 9, 13

Slide 44

Slide 44 text

Time to display Monday, September 9, 13

Slide 45

Slide 45 text

2990ms Time to display Monday, September 9, 13

Slide 46

Slide 46 text

2990ms Time to display 6034ms Monday, September 9, 13

Slide 47

Slide 47 text

Time to interact Monday, September 9, 13

Slide 48

Slide 48 text

Time to interact 3588ms Monday, September 9, 13

Slide 49

Slide 49 text

Time to interact 3588ms 7222ms Monday, September 9, 13

Slide 50

Slide 50 text

Speed is the most important feature. If your application is slow, people won’t use it....If something is slow, they’re just gone. — Fred Wilson http://bit.ly/csL5ck Monday, September 9, 13

Slide 51

Slide 51 text

There is real empirical evidence that substantiates the fact that speed is more than a feature. It’s a requirement. — Fred Wilson http://bit.ly/csL5ck Monday, September 9, 13

Slide 52

Slide 52 text

There is real empirical evidence that substantiates the fact that speed is more than a feature. It’s a requirement. — Fred Wilson http://bit.ly/csL5ck It’s a requirement. Monday, September 9, 13

Slide 53

Slide 53 text

bad performance is bad business Monday, September 9, 13

Slide 54

Slide 54 text

get concrete get concrete Monday, September 9, 13

Slide 55

Slide 55 text

http://ﬂic.kr/p/4CEdvf set a budget Monday, September 9, 13

Slide 56

Slide 56 text

< 3 seconds DSL Monday, September 9, 13

Slide 57

Slide 57 text

300kb - 350kb Monday, September 9, 13

Slide 58

Slide 58 text

how fast is fast enough? Monday, September 9, 13

Slide 59

Slide 59 text

1 second: Uninterrupted ﬂow Monday, September 9, 13

Slide 60

Slide 60 text

performance of your site Monday, September 9, 13

Slide 61

Slide 61 text

performance of competitors Monday, September 9, 13

Slide 62

Slide 62 text

20% rule Monday, September 9, 13

Slide 63

Slide 63 text

10 seconds Monday, September 9, 13

Slide 64

Slide 64 text

8 seconds 10 x 1.2 Monday, September 9, 13

Slide 65

Slide 65 text

5 seconds Monday, September 9, 13

Slide 66

Slide 66 text

4 seconds 5 x 1.2 Monday, September 9, 13

Slide 67

Slide 67 text

let’s add a carousel Monday, September 9, 13

Slide 68

Slide 68 text

Monday, September 9, 13

Slide 69

Slide 69 text

Brad hates carousels. Monday, September 9, 13

Slide 70

Slide 70 text

1. Optimize Monday, September 9, 13

Slide 71

Slide 71 text

1. Optimize 2. Remove Monday, September 9, 13

Slide 72

Slide 72 text

1. Optimize 2. Remove 3. Don’t add Monday, September 9, 13

Slide 73

Slide 73 text

Monday, September 9, 13

Slide 74

Slide 74 text

Performance is a fundamental component of User Experience Monday, September 9, 13

Slide 75

Slide 75 text

Being a Web designer & not considering speed/ performance is like being a print designer & not considering how your colors will print. — Luke Wroblewski http://bit.ly/yRvfu8 Monday, September 9, 13

Slide 76

Slide 76 text

Interactive & Dynamic Monday, September 9, 13

Slide 77

Slide 77 text

it’s about respect Monday, September 9, 13

Slide 78

Slide 78 text

respecting time Monday, September 9, 13

Slide 79

Slide 79 text

Monday, September 9, 13

Slide 80

Slide 80 text

Monday, September 9, 13

Slide 81

Slide 81 text

Monday, September 9, 13

Slide 82

Slide 82 text

Monday, September 9, 13

Slide 83

Slide 83 text

Monday, September 9, 13

Slide 84

Slide 84 text

60% less likely to return Monday, September 9, 13

Slide 85

Slide 85 text

40% will visit a competitor Monday, September 9, 13

Slide 86

Slide 86 text

bad experiences linger http://ﬂic.kr/p/2uSm6 Monday, September 9, 13

Slide 87

Slide 87 text

respecting money Monday, September 9, 13

Slide 88

Slide 88 text

Monday, September 9, 13

Slide 89

Slide 89 text

Monday, September 9, 13

Slide 90

Slide 90 text

Monday, September 9, 13

Slide 91

Slide 91 text

thenextweb.com $44 Monday, September 9, 13

Slide 92

Slide 92 text

vogue.co.uk $65 Monday, September 9, 13

Slide 93

Slide 93 text

Monday, September 9, 13

Slide 94

Slide 94 text

respecting desire for content Monday, September 9, 13

Slide 95

Slide 95 text

Now more than ever, we’re designing work meant to be viewed along a gradient of diﬀerent experiences. — Ethan Marcotte http://bit.ly/Wi0xvw Monday, September 9, 13

Slide 96

Slide 96 text

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. — Ethan Marcotte http://bit.ly/Wi0xvw Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. gradient of different experiences Monday, September 9, 13

Slide 97

Slide 97 text

Slide 98

Slide 98 text

embrace constraints Monday, September 9, 13

Slide 99

Slide 99 text

Monday, September 9, 13

Slide 100

Slide 100 text

Monday, September 9, 13

Slide 101

Slide 101 text

By keeping your client side code small and lightweight, you can literally open your product up to new markets. — Chris Zacharias http://bit.ly/Vl1sqy Monday, September 9, 13

Slide 102

Slide 102 text

http://ﬂic.kr/p/cfoupQ Monday, September 9, 13

Slide 103

Slide 103 text

Monday, September 9, 13

Slide 104

Slide 104 text

Make it hurt http://ﬂic.kr/p/yTjQS Monday, September 9, 13

Slide 105

Slide 105 text

channel your inner performance masochist Monday, September 9, 13

Slide 106

Slide 106 text

http://ﬂic.kr/p/6MgMoG Pour salt on our performance wounds. Monday, September 9, 13

Slide 107

Slide 107 text

Monday, September 9, 13

Slide 108

Slide 108 text

Monday, September 9, 13

Slide 109

Slide 109 text

talk to Dan Monday, September 9, 13

Slide 110

Slide 110 text

perception = reality Monday, September 9, 13

Slide 111

Slide 111 text

http://ﬂic.kr/p/7DXqvK Monday, September 9, 13

Slide 112

Slide 112 text

Monday, September 9, 13

Slide 113

Slide 113 text

Monday, September 9, 13

Slide 114

Slide 114 text

performance by design Monday, September 9, 13

Slide 115

Slide 115 text

http://ﬂic.kr/p/96ryj6 http://ﬂic.kr/p/5MWEMo Monday, September 9, 13

Slide 116

Slide 116 text

the web is getting fat Monday, September 9, 13

Slide 117

Slide 117 text

bake it into the process Monday, September 9, 13

Slide 118

Slide 118 text

channel your inner performance masochist Monday, September 9, 13

Slide 119

Slide 119 text

involve everyone Monday, September 9, 13

Slide 120

Slide 120 text

create awesome Monday, September 9, 13

Slide 121

Slide 121 text

Monday, September 9, 13

Slide 122

Slide 122 text

thank you Smashing Conference | September 9th, 2013 | @tkadlec | timkadlec.com Monday, September 9, 13