Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Upgrading the Web - Driving Support For New Sta...
Search
Jonathan Klein
November 15, 2013
Technology
1
410
Upgrading the Web - Driving Support For New Standards
I gave this talk at Velocity London 2013.
Slides and links available at jkle.in/upgrade
Jonathan Klein
November 15, 2013
Tweet
Share
More Decks by Jonathan Klein
See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
jklein
15
430
Demystifying SPDY and HTTP/2
jklein
1
630
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
2k
Composer: From Beginner to Expert
jklein
1
970
Upgrading the Web: Boston Web Performance Meetup
jklein
1
300
Upgrading the Web: Driving Support For New Standards
jklein
1
810
Northeastern Lunch and Learn
jklein
0
260
Profiling PHP With XHProf
jklein
1
1k
Other Decks in Technology
See All in Technology
S3アクセス制御の設計ポイント
tommy0124
3
200
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
280
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
150
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
160
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
560
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
420
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
150
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.3k
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
We Have a Design System, Now What?
morganepeng
53
7.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Navigating Team Friction
lara
189
15k
The Invisible Side of Design
smashingmag
301
51k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Become a Pro
speakerdeck
PRO
29
5.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
Upgrading the Web Driving Support For New Standards Velocity London
2013 Jonathan Klein @jonathanklein Friday, November 15, 13
Slides, Links jkle.in/upgrade Friday, November 15, 13
About Me Friday, November 15, 13
About Me • Performance Engineer At Etsy Friday, November 15,
13
About Me • Performance Engineer At Etsy • I write
the Etsy Site Performance Reports Friday, November 15, 13
About Me • Performance Engineer At Etsy • I write
the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group Friday, November 15, 13
Etsy Stats Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
A Story Friday, November 15, 13
A Story From the Future Friday, November 15, 13
Friday, November 15, 13
http://goo.gl/Uj3w9y Friday, November 15, 13
Things You Learned Friday, November 15, 13
Things You Learned • Hop Hints Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints Friday,
November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
What Should You Implement? Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
HTTP Origin/Hop Hints Friday, November 15, 13
HTTP Origin/Hop Hints • IETF Draft Friday, November 15, 13
HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header
Friday, November 15, 13
HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header
•OH: a,b=6,c Friday, November 15, 13
HTTP Origin/Hop Hints • IETF Draft • HTTP Response Header
•OH: a,b=6,c • Tells the browser about server capabilities Friday, November 15, 13
HTTP Origin/Hop Hints Friday, November 15, 13
HTTP Origin/Hop Hints • Small Request Headers Friday, November 15,
13
HTTP Origin/Hop Hints • Small Request Headers • Relative Referers
Friday, November 15, 13
HTTP Origin/Hop Hints • Small Request Headers • Relative Referers
• Omitting Cookies Friday, November 15, 13
HTTP Origin/Hop Hints • Small Request Headers • Relative Referers
• Omitting Cookies • Sharing Connections Friday, November 15, 13
HTTP Origin/Hop Hints • Small Request Headers • Relative Referers
• Omitting Cookies • Sharing Connections • Pipeline Depth Friday, November 15, 13
Reduce Header Size Friday, November 15, 13
Optimize Transfer Friday, November 15, 13
No Content Changes Friday, November 15, 13
Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Client Hints Friday, November 15, 13
Client Hints • IETF Draft Friday, November 15, 13
Client Hints • IETF Draft • HTTP Request Header Friday,
November 15, 13
Client Hints • IETF Draft • HTTP Request Header •CH-DPR:
2.0 Friday, November 15, 13
Client Hints • IETF Draft • HTTP Request Header •CH-DPR:
2.0 • Tells the server about browser capabilities Friday, November 15, 13
Friday, November 15, 13
Will Also Specify Height/Width Friday, November 15, 13
Simplifies Markup Friday, November 15, 13
Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
WebP Friday, November 15, 13
WebP • New image format from Google Friday, November 15,
13
WebP • New image format from Google • 25-34% smaller
than JPEG Friday, November 15, 13
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option Friday, November 15, 13
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option • Alpha Transparency Friday, November 15, 13
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option • Alpha Transparency • Growing adoption Friday, November 15, 13
Friday, November 15, 13
Now We Are Getting Somewhere... Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
Key Stats First Run Bytes 576KB Start Render 932ms Speed
Index 1269ms Friday, November 15, 13
Brief Aside: Speed Index Friday, November 15, 13
Friday, November 15, 13
Convert JPEGs to WebP Friday, November 15, 13
Friday, November 15, 13
Key Stats First Run WebP Difference Bytes 576KB 387KB -33%
Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1% Friday, November 15, 13
Friday, November 15, 13
Its Future is Uncertain Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
Challenges with WebP Friday, November 15, 13
Challenges with WebP • Worse shareability Friday, November 15, 13
Challenges with WebP • Worse shareability • Increased decoding time
Friday, November 15, 13
Challenges with WebP • Worse shareability • Increased decoding time
• Controversial studies around quality/size Friday, November 15, 13
Challenges with WebP • Worse shareability • Increased decoding time
• Controversial studies around quality/size • No progressive decoding (yet) Friday, November 15, 13
Still a Big Bandwidth Win Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
SPDY/HTTP 2.0 Friday, November 15, 13
SPDY/HTTP 2.0 • Next version of HTTP Friday, November 15,
13
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
Friday, November 15, 13
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression Friday, November 15, 13
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression • Prioritization Friday, November 15, 13
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression • Prioritization • Wide support Friday, November 15, 13
Friday, November 15, 13
No More... Friday, November 15, 13
No More... • Domain Sharding Friday, November 15, 13
No More... • Domain Sharding • Spriting Images Friday, November
15, 13
No More... • Domain Sharding • Spriting Images • Concatenating
Files Friday, November 15, 13
No More... • Domain Sharding • Spriting Images • Concatenating
Files • DataURIs Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
Slides, Links jkle.in/upgrade Friday, November 15, 13
Let’s See it in Action Friday, November 15, 13
Friday, November 15, 13
Friday, November 15, 13
Before SPDY Friday, November 15, 13
After SPDY Friday, November 15, 13
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
Friday, November 15, 13
Friday, November 15, 13
Sites Using SPDY Today Friday, November 15, 13
Sites Using SPDY Today • Most (all?) Google Properties Friday,
November 15, 13
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook Friday, November 15, 13
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook • Twitter Friday, November 15, 13
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook • Twitter • You? Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Pre-fetching • Fetch assets for next page • Speeds up
navigation <link rel="prefetch" href="/foo.css"> Friday, November 15, 13
WebPagetest Script logData 0 navigate https://velocity.jkle.in logData 1 navigate https://velocity.jkle.in/product.html
Friday, November 15, 13
Friday, November 15, 13
Key Stats First Run Bytes 85KB Speed Index 479ms CSS
Files 2 JS Files 6 Friday, November 15, 13
Prefetch <link rel="prefetch" href="/prestashop/themes/default/css/product.css"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.css"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/fancybox/jquery.fancybox.js">
<link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.idTabs.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.scrollTo.js"> <link rel="prefetch" href="/prestashop/js/jquery/plugins/jquery.serialScroll.js"> <link rel="prefetch" href="/prestashop/themes/default/js/tools.js"> <link rel="prefetch" href="/prestashop/themes/default/js/product.js"> Friday, November 15, 13
Friday, November 15, 13
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
Friday, November 15, 13
Things You Learned • Hop Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching Friday, November 15, 13
Browser Support Friday, November 15, 13
Friday, November 15, 13
These Are Still Good Options Friday, November 15, 13
Convincing CDNs Would Be HUGE Friday, November 15, 13
Action Steps Friday, November 15, 13
Action Steps • Implement as much as you can Friday,
November 15, 13
Action Steps • Implement as much as you can •
Speak/blog about challenges Friday, November 15, 13
Action Steps • Implement as much as you can •
Speak/blog about challenges • Ask your CDN for support Friday, November 15, 13
Action Steps • Implement as much as you can •
Speak/blog about challenges • Ask your CDN for support • Report bugs Friday, November 15, 13
Let’s Upgrade The Web Friday, November 15, 13
Thanks! Friday, November 15, 13
@jonathanklein
[email protected]
www.etsy.com/careers Get in Touch Friday, November 15, 13