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
740
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
330
Demystifying SPDY and HTTP/2
jklein
1
550
Demystifying SPDY and HTTP/2
jklein
2
980
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
810
Upgrading the Web: Boston Web Performance Meetup
jklein
1
250
Northeastern Lunch and Learn
jklein
0
200
Profiling PHP With XHProf
jklein
1
970
HubSpot Tech Talk - DIY Synthetic
jklein
0
250
Other Decks in Technology
See All in Technology
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
アジャイルと契約 エッセンシャル版 / Agile Contracts Essential Edition
fkino
0
110
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
フルカイテン株式会社 採用資料
fullkaiten
0
36k
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
530
LLMアプリをRagasで評価して、Langfuseで可視化しよう!
minorun365
PRO
3
300
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.4k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
480
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
440
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
100
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.1k
BBQ
matthewcrist
85
9.3k
Being A Developer After 40
akosma
86
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Become a Pro
speakerdeck
PRO
24
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Designing for humans not robots
tammielis
249
25k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Code Reviewing Like a Champion
maltzj
519
39k
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