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 Stan...
Search
Jonathan Klein
June 25, 2014
Technology
1
780
Upgrading the Web: Driving Support For New Standards
A talk given at Velocity Santa Clara 2014
Jonathan Klein
June 25, 2014
Tweet
Share
More Decks by Jonathan Klein
See All by Jonathan Klein
Cognitive Biases in Engineering Organizations - Craft Conf
jklein
15
380
Demystifying SPDY and HTTP/2
jklein
1
610
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
920
Upgrading the Web: Boston Web Performance Meetup
jklein
1
280
Northeastern Lunch and Learn
jklein
0
230
Profiling PHP With XHProf
jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
jklein
0
290
Other Decks in Technology
See All in Technology
数百台のオンプレミスのサーバーをEKSに移行した話
yukiteraoka
0
680
OPENLOGI Company Profile for engineer
hr01
1
22k
銀行でDevOpsを進める理由と実践例 / 20250317 Masaki Iwama
shift_evolve
1
110
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
Medmain FACTBOOK
akinaootani
0
110
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.3k
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
0
390
ペアーズにおけるData Catalog導入の取り組み
hisamouna
0
180
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
990
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
560
年末調整プロダクトの内部品質改善活動について
kaomi_wombat
0
210
コンソールで学ぶ!AWS CodePipelineの機能とオプション
umekou
2
120
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Gamification - CAS2011
davidbonilla
81
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Documentation Writing (for coders)
carmenintech
69
4.7k
Designing for Performance
lara
606
69k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fireside Chat
paigeccino
37
3.3k
A Tale of Four Properties
chriscoyier
158
23k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Upgrading the Web Driving Support For New Standards Velocity Santa
Clara 2014 Jonathan Klein @jonathanklein
Slides, Links jkle.in/future
About Me
About Me • Performance Engineer At Etsy
About Me • Performance Engineer At Etsy • I write
the Etsy Site Performance Reports
About Me • Performance Engineer At Etsy • I write
the Etsy Site Performance Reports • Started Boston Web Perf Meetup Group
A Story
A Story From the Future
None
http://goo.gl/Uj3w9y
Things You Learned
Things You Learned • Origin Hints
Things You Learned • Origin Hints • Client Hints
Things You Learned • Origin Hints • Client Hints •
WebP
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
What Should I Implement?
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
HTTP Origin Hints
HTTP Origin Hints • IETF Draft
HTTP Origin Hints • IETF Draft • HTTP Response Header
HTTP Origin Hints • IETF Draft • HTTP Response Header
• Tells the browser about server capabilities
HTTP Origin Hints • IETF Draft • HTTP Response Header
• Tells the browser about server capabilities •OH: a,b=6,c
HTTP Origin Hints
HTTP Origin Hints • Small Request Headers
HTTP Origin Hints • Small Request Headers • Relative Referers
HTTP Origin Hints • Small Request Headers • Relative Referers
• Omitting Cookies
HTTP Origin Hints • Small Request Headers • Relative Referers
• Omitting Cookies • Sharing Connections
HTTP Origin Hints • Small Request Headers • Relative Referers
• Omitting Cookies • Sharing Connections • Pipeline Depth
Reduce Header Size
Optimize Transfer
No Content Changes
None
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
Client Hints
Client Hints • IETF Draft
Client Hints • IETF Draft • HTTP Request Header
Client Hints • IETF Draft • HTTP Request Header •
Tells the server about browser capabilities
Client Hints • IETF Draft • HTTP Request Header •
Tells the server about browser capabilities •CH-DPR: 2.0
None
Will Also Specify Height/Width
Simplifies Markup
None
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
None
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
WebP
WebP • New image format from Google
WebP • New image format from Google • 25-34% smaller
than JPEG
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option • Alpha Transparency
WebP • New image format from Google • 25-34% smaller
than JPEG • Lossless Option • Alpha Transparency • Animation
None
Now We Are Getting Somewhere...
None
None
Key Stats First Run Bytes 576KB Start Render 932ms Speed
Index 1269ms
Brief Aside: Speed Index
None
Convert JPEGs to WebP
None
Key Stats First Run WebP Difference Bytes 576KB 387KB -33%
Start Render 932ms 1019ms +9% Speed Index 1269ms 1278ms <1%
None
Its Future is Uncertain
None
Challenges with WebP
Challenges with WebP • Harder to share
Challenges with WebP • Harder to share • Increased decoding
time
Challenges with WebP • Harder to share • Increased decoding
time • Controversial studies around quality/size
Challenges with WebP • Harder to share • Increased decoding
time • Controversial studies around quality/size • No progressive decoding (yet)
Still a Big Bandwidth Win
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
SPDY/HTTP 2.0
SPDY/HTTP 2.0 • Next version of HTTP
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression (HPACK)
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression (HPACK) • Prioritization
SPDY/HTTP 2.0 • Next version of HTTP • HTTP Multiplexing
• Header Compression (HPACK) • Prioritization • Server Push
Recall Origin Hints…
Reducing Header Size vs. Header Compression
None
None
No More...
No More... • Domain Sharding
No More... • Domain Sharding • Spriting Images
No More... • Domain Sharding • Spriting Images • Concatenating
Files
No More... • Domain Sharding • Spriting Images • Concatenating
Files • DataURIs
None
Slides, Links jkle.in/future
Let’s See it in Action
None
None
Before SPDY
After SPDY
Key Stats First Run SPDY/ HTTP 2.0 Difference Bytes 387KB
387KB - Start Render 1019ms 972ms -5% Speed Index 1278ms 1108ms -14%
None
None
Sites Using SPDY Today
Sites Using SPDY Today • Most (all?) Google Properties
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook • Twitter
Sites Using SPDY Today • Most (all?) Google Properties •
Facebook • Twitter • You?
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
NOT talking about pre-render
Pre-fetching • Fetch assets for next page • Speeds up
navigation <link rel="prefetch" href="/foo.css">
WebPagetest Script ! logData 0 navigate https://velocity.jkle.in logData 1 navigate
https://velocity.jkle.in/product.html
None
Key Stats First Run Bytes 85KB Speed Index 479ms CSS
Files 2 JS Files 6
! ! ! ! ! <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">
None
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%
None
Things You Learned • Origin Hints • Client Hints •
WebP • SPDY/HTTP 2.0 • Pre-fetching
Browser Support
None
These Are Still Good Options
Convincing CDNs Would Be HUGE
Implementation Challenges
Action Steps
Action Steps • Implement as much as you can
Action Steps • Implement as much as you can •
Speak/blog about challenges
Action Steps • Implement as much as you can •
Speak/blog about challenges • Ask your CDN for support
Action Steps • Implement as much as you can •
Speak/blog about challenges • Ask your CDN for support • Report bugs
Other Talks at Velocity What Makes Mobile Websites Tick? 3:30
today Is TLS Fast Yet? 3:30 tomorrow Chasing Waterfalls 5:00 tomorrow
Office Hours at 3:30 today
Let’s Upgrade The Web
Thanks!
@jonathanklein !
[email protected]
! www.etsy.com/careers Get in Touch