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
440
Demystifying SPDY and HTTP/2
jklein
1
640
Demystifying SPDY and HTTP/2
jklein
2
1.1k
Cognitive Biases in Engineering Organizations
jklein
4
2k
Composer: From Beginner to Expert
jklein
1
1k
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
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
320
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
170
OSSで50の競合と戦うためにやったこと
yamadashy
3
950
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
130
Dify on AWS 環境構築手順
yosse95ai
0
110
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
160
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
710
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
410
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
170
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
130
初めてのDatabricks Apps開発
taka_aki
1
240
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
130
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
It's Worth the Effort
3n
187
28k
Thoughts on Productivity
jonyablonski
70
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Documentation Writing (for coders)
carmenintech
75
5.1k
Music & Morning Musume
bryan
46
6.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Producing Creativity
orderedlist
PRO
347
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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