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
770
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
370
Demystifying SPDY and HTTP/2
jklein
1
590
Demystifying SPDY and HTTP/2
jklein
2
1k
Cognitive Biases in Engineering Organizations
jklein
4
1.9k
Composer: From Beginner to Expert
jklein
1
860
Upgrading the Web: Boston Web Performance Meetup
jklein
1
270
Northeastern Lunch and Learn
jklein
0
220
Profiling PHP With XHProf
jklein
1
990
HubSpot Tech Talk - DIY Synthetic
jklein
0
280
Other Decks in Technology
See All in Technology
The Future of SEO: The Impact of AI on Search
badams
0
190
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
24
7k
2.5Dモデルのすべて
yu4u
2
840
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
720
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
560
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
240
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2k
Larkご案内資料
customercloud
PRO
0
650
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.7k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
1.1k
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
For a Future-Friendly Web
brad_frost
176
9.5k
Music & Morning Musume
bryan
46
6.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Rails Girls Zürich Keynote
gr2m
94
13k
How to train your dragon (web standard)
notwaldorf
91
5.8k
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