Upgrading the Web - Driving Support For New Standards

Slide 1

Slide 1 text

Upgrading the Web Driving Support For New Standards Velocity London 2013 Jonathan Klein @jonathanklein Friday, November 15, 13

Slide 2

Slide 2 text

Slides, Links jkle.in/upgrade Friday, November 15, 13

Slide 3

Slide 3 text

About Me Friday, November 15, 13

Slide 4

Slide 4 text

About Me • Performance Engineer At Etsy Friday, November 15, 13

Slide 5

Slide 5 text

About Me • Performance Engineer At Etsy • I write the Etsy Site Performance Reports Friday, November 15, 13

Slide 6

Slide 6 text

About Me • Performance Engineer At Etsy • I write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group Friday, November 15, 13

Slide 7

Slide 7 text

Etsy Stats Friday, November 15, 13

Slide 8

Slide 8 text

Friday, November 15, 13

Slide 9

Slide 9 text

Friday, November 15, 13

Slide 10

Slide 10 text

Friday, November 15, 13

Slide 11

Slide 11 text

A Story Friday, November 15, 13

Slide 12

Slide 12 text

A Story From the Future Friday, November 15, 13

Slide 13

Slide 13 text

Friday, November 15, 13

Slide 14

Slide 14 text

http://goo.gl/Uj3w9y Friday, November 15, 13

Slide 15

Slide 15 text

Things You Learned Friday, November 15, 13

Slide 16

Slide 16 text

Things You Learned • Hop Hints Friday, November 15, 13

Slide 17

Slide 17 text

Things You Learned • Hop Hints • Client Hints Friday, November 15, 13

Slide 18

Slide 18 text

Things You Learned • Hop Hints • Client Hints • WebP Friday, November 15, 13

Slide 19

Slide 19 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 Friday, November 15, 13

Slide 20

Slide 20 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 21

Slide 21 text

What Should You Implement? Friday, November 15, 13

Slide 22

Slide 22 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 23

Slide 23 text

HTTP Origin/Hop Hints Friday, November 15, 13

Slide 24

Slide 24 text

HTTP Origin/Hop Hints • IETF Draft Friday, November 15, 13

Slide 25

Slide 25 text

HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header Friday, November 15, 13

Slide 26

Slide 26 text

HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header •OH: a,b=6,c Friday, November 15, 13

Slide 27

Slide 27 text

HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header •OH: a,b=6,c • Tells the browser about server capabilities Friday, November 15, 13

Slide 28

Slide 28 text

HTTP Origin/Hop Hints Friday, November 15, 13

Slide 29

Slide 29 text

HTTP Origin/Hop Hints • Small Request Headers Friday, November 15, 13

Slide 30

Slide 30 text

HTTP Origin/Hop Hints • Small Request Headers • Relative Referers Friday, November 15, 13

Slide 31

Slide 31 text

HTTP Origin/Hop Hints • Small Request Headers • Relative Referers • Omitting Cookies Friday, November 15, 13

Slide 32

Slide 32 text

HTTP Origin/Hop Hints • Small Request Headers • Relative Referers • Omitting Cookies • Sharing Connections Friday, November 15, 13

Slide 33

Slide 33 text

HTTP Origin/Hop Hints • Small Request Headers • Relative Referers • Omitting Cookies • Sharing Connections • Pipeline Depth Friday, November 15, 13

Slide 34

Slide 34 text

Reduce Header Size Friday, November 15, 13

Slide 35

Slide 35 text

Optimize Transfer Friday, November 15, 13

Slide 36

Slide 36 text

No Content Changes Friday, November 15, 13

Slide 37

Slide 37 text

Friday, November 15, 13

Slide 38

Slide 38 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 39

Slide 39 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 40

Slide 40 text

Client Hints Friday, November 15, 13

Slide 41

Slide 41 text

Client Hints • IETF Draft Friday, November 15, 13

Slide 42

Slide 42 text

Client Hints • IETF Draft • HTTP Request Header Friday, November 15, 13

Slide 43

Slide 43 text

Client Hints • IETF Draft • HTTP Request Header •CH-DPR: 2.0 Friday, November 15, 13

Slide 44

Slide 44 text

Client Hints • IETF Draft • HTTP Request Header •CH-DPR: 2.0 • Tells the server about browser capabilities Friday, November 15, 13

Slide 45

Slide 45 text

Friday, November 15, 13

Slide 46

Slide 46 text

Will Also Specify Height/Width Friday, November 15, 13

Slide 47

Slide 47 text

Simplifies Markup Friday, November 15, 13

Slide 48

Slide 48 text

Friday, November 15, 13

Slide 49

Slide 49 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 50

Slide 50 text

Friday, November 15, 13

Slide 51

Slide 51 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 52

Slide 52 text

WebP Friday, November 15, 13

Slide 53

Slide 53 text

WebP • New image format from Google Friday, November 15, 13

Slide 54

Slide 54 text

WebP • New image format from Google • 25-34% smaller than JPEG Friday, November 15, 13

Slide 55

Slide 55 text

WebP • New image format from Google • 25-34% smaller than JPEG • Lossless Option Friday, November 15, 13

Slide 56

Slide 56 text

WebP • New image format from Google • 25-34% smaller than JPEG • Lossless Option • Alpha Transparency Friday, November 15, 13

Slide 57

Slide 57 text

WebP • New image format from Google • 25-34% smaller than JPEG • Lossless Option • Alpha Transparency • Growing adoption Friday, November 15, 13

Slide 58

Slide 58 text

Friday, November 15, 13

Slide 59

Slide 59 text

Now We Are Getting Somewhere... Friday, November 15, 13

Slide 60

Slide 60 text

Friday, November 15, 13

Slide 61

Slide 61 text

Friday, November 15, 13

Slide 62

Slide 62 text

Key Stats First Run Bytes 576KB Start Render 932ms Speed Index 1269ms Friday, November 15, 13

Slide 63

Slide 63 text

Brief Aside: Speed Index Friday, November 15, 13

Slide 64

Slide 64 text

Friday, November 15, 13

Slide 65

Slide 65 text

Convert JPEGs to WebP Friday, November 15, 13

Slide 66

Slide 66 text

Friday, November 15, 13

Slide 67

Slide 67 text

Key Stats First Run WebP Difference Bytes 576KB 387KB -33% Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1% Friday, November 15, 13

Slide 68

Slide 68 text

Friday, November 15, 13

Slide 69

Slide 69 text

Its Future is Uncertain Friday, November 15, 13

Slide 70

Slide 70 text

Friday, November 15, 13

Slide 71

Slide 71 text

Friday, November 15, 13

Slide 72

Slide 72 text

Challenges with WebP Friday, November 15, 13

Slide 73

Slide 73 text

Challenges with WebP • Worse shareability Friday, November 15, 13

Slide 74

Slide 74 text

Challenges with WebP • Worse shareability • Increased decoding time Friday, November 15, 13

Slide 75

Slide 75 text

Challenges with WebP • Worse shareability • Increased decoding time • Controversial studies around quality/size Friday, November 15, 13

Slide 76

Slide 76 text

Challenges with WebP • Worse shareability • Increased decoding time • Controversial studies around quality/size • No progressive decoding (yet) Friday, November 15, 13

Slide 77

Slide 77 text

Still a Big Bandwidth Win Friday, November 15, 13

Slide 78

Slide 78 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 79

Slide 79 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 80

Slide 80 text

SPDY/HTTP 2.0 Friday, November 15, 13

Slide 81

Slide 81 text

SPDY/HTTP 2.0 • Next version of HTTP Friday, November 15, 13

Slide 82

Slide 82 text

SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing Friday, November 15, 13

Slide 83

Slide 83 text

SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing • Header Compression Friday, November 15, 13

Slide 84

Slide 84 text

SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing • Header Compression • Prioritization Friday, November 15, 13

Slide 85

Slide 85 text

SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing • Header Compression • Prioritization • Wide support Friday, November 15, 13

Slide 86

Slide 86 text

Friday, November 15, 13

Slide 87

Slide 87 text

No More... Friday, November 15, 13

Slide 88

Slide 88 text

No More... • Domain Sharding Friday, November 15, 13

Slide 89

Slide 89 text

No More... • Domain Sharding • Spriting Images Friday, November 15, 13

Slide 90

Slide 90 text

No More... • Domain Sharding • Spriting Images • Concatenating Files Friday, November 15, 13

Slide 91

Slide 91 text

No More... • Domain Sharding • Spriting Images • Concatenating Files • DataURIs Friday, November 15, 13

Slide 92

Slide 92 text

Friday, November 15, 13

Slide 93

Slide 93 text

Friday, November 15, 13

Slide 94

Slide 94 text

Slides, Links jkle.in/upgrade Friday, November 15, 13

Slide 95

Slide 95 text

Let’s See it in Action Friday, November 15, 13

Slide 96

Slide 96 text

Friday, November 15, 13

Slide 97

Slide 97 text

Friday, November 15, 13

Slide 98

Slide 98 text

Before SPDY Friday, November 15, 13

Slide 99

Slide 99 text

After SPDY Friday, November 15, 13

Slide 100

Slide 100 text

Key Stats First Run SPDY/ HTTP 2.0 Difference Bytes 387KB 387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14% Friday, November 15, 13

Slide 101

Slide 101 text

Friday, November 15, 13

Slide 102

Slide 102 text

Friday, November 15, 13

Slide 103

Slide 103 text

Sites Using SPDY Today Friday, November 15, 13

Slide 104

Slide 104 text

Sites Using SPDY Today • Most (all?) Google Properties Friday, November 15, 13

Slide 105

Slide 105 text

Sites Using SPDY Today • Most (all?) Google Properties • Facebook Friday, November 15, 13

Slide 106

Slide 106 text

Sites Using SPDY Today • Most (all?) Google Properties • Facebook • Twitter Friday, November 15, 13

Slide 107

Slide 107 text

Sites Using SPDY Today • Most (all?) Google Properties • Facebook • Twitter • You? Friday, November 15, 13

Slide 108

Slide 108 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 109

Slide 109 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 110

Slide 110 text

Pre-fetching • Fetch assets for next page • Speeds up navigation Friday, November 15, 13

Slide 111

Slide 111 text

WebPagetest Script logData 0 navigate https://velocity.jkle.in logData 1 navigate https://velocity.jkle.in/product.html Friday, November 15, 13

Slide 112

Slide 112 text

Friday, November 15, 13

Slide 113

Slide 113 text

Key Stats First Run Bytes 85KB Speed Index 479ms CSS Files 2 JS Files 6 Friday, November 15, 13

Slide 114

Slide 114 text

Prefetch Friday, November 15, 13

Slide 115

Slide 115 text

Friday, November 15, 13

Slide 116

Slide 116 text

Key Stats First Run Pre-fetching Difference Bytes 85KB 50KB -40% Speed Index 479ms 290ms -40% CSS Files 2 0 -100% JS Files 6 0 -100% Friday, November 15, 13

Slide 117

Slide 117 text

Friday, November 15, 13

Slide 118

Slide 118 text

Things You Learned • Hop Hints • Client Hints • WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13

Slide 119

Slide 119 text

Browser Support Friday, November 15, 13

Slide 120

Slide 120 text

Friday, November 15, 13

Slide 121

Slide 121 text

These Are Still Good Options Friday, November 15, 13

Slide 122

Slide 122 text

Convincing CDNs Would Be HUGE Friday, November 15, 13

Slide 123

Slide 123 text

Action Steps Friday, November 15, 13

Slide 124

Slide 124 text

Action Steps • Implement as much as you can Friday, November 15, 13

Slide 125

Slide 125 text

Action Steps • Implement as much as you can • Speak/blog about challenges Friday, November 15, 13

Slide 126

Slide 126 text

Action Steps • Implement as much as you can • Speak/blog about challenges • Ask your CDN for support Friday, November 15, 13

Slide 127

Slide 127 text

Action Steps • Implement as much as you can • Speak/blog about challenges • Ask your CDN for support • Report bugs Friday, November 15, 13

Slide 128

Slide 128 text

Let’s Upgrade The Web Friday, November 15, 13

Slide 129

Slide 129 text

Thanks! Friday, November 15, 13

Slide 130

Slide 130 text

@jonathanklein jonathan@etsy.com www.etsy.com/careers Get in Touch Friday, November 15, 13