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
810
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
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
980
Upgrading the Web: Boston Web Performance Meetup
jklein
1
300
Northeastern Lunch and Learn
jklein
0
260
Profiling PHP With XHProf
jklein
1
1k
HubSpot Tech Talk - DIY Synthetic
jklein
0
350
Other Decks in Technology
See All in Technology
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
570
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
260
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
490
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
110
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
420
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
VCC 2025 Write-up
bata_24
0
180
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
SOC2取得の全体像
shonansurvivors
1
400
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
680
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.2k
KATA
mclloyd
32
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Making Projects Easy
brettharned
119
6.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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