Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and...
Transcript of Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and...
![Page 1: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/1.jpg)
Google Confidential and Proprietary
Browser Enhancements to Help Improve Page Load Performance Using Delta DeliveryW3C Performance Working GroupNovember 8th, 2012
Robert Hundt ([email protected])Mark Heffernan ([email protected])Ian Flanigan ([email protected])
![Page 2: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/2.jpg)
Google Confidential and Proprietary
Every day Gmail subjects users to a combined 61 years of this...
![Page 3: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/3.jpg)
Google Confidential and Proprietary
Initial Load
Initial load latency: Time from the user starting to navigating to App to rendering complete.
Gmail, Docs, Sheets---------------------------------------- Median: Low seconds 90%'ile: Low 10's of seconds 99%'ile: Low minutes (in slow geographies)
Initial load is by far the slowest action our users commonly perform.
![Page 4: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/4.jpg)
Google Confidential and Proprietary
Initial Load
Robert's Goals● Bring initial load to < 1 sec at median● Stretch: Bring initial load to < 1 sec at 90%-tile
![Page 5: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/5.jpg)
Google Confidential and Proprietary
Initial Load
Robert's Goals● Bring initial load to < 1 sec at median● Stretch: Bring initial load to < 1 sec at 90%-tile
Ideas in this presentation won't quite get us there, but it'll be a big improvement.
![Page 6: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/6.jpg)
Google Confidential and Proprietary
Basics of Initial Load (Gmail)
Initial load sequence is complicated!
![Page 7: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/7.jpg)
Google Confidential and Proprietary
Basics of Initial Load
Three phases:
Phase 1Redirects, establish connection
Phase 2Bootstrap, download resources
Phase 3Execute JS, build view
![Page 8: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/8.jpg)
Google Confidential and Proprietary
Initial load: Phase 1
Phase 1Redirects, establish connection
Phase 2Bootstrap, download resources
Phase 3Execute JS, build view
![Page 9: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/9.jpg)
Google Confidential and Proprietary
Initial load: Phase 1
From navigation start to execution of first byte of JS.
Includes redirects, establishing connection(s).
Median <2s90%-tile a few seconds99%-tile a couple of tens of seconds
Measured with W3C Navigation Timing API.
![Page 10: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/10.jpg)
Google Confidential and Proprietary
Initial load: Phase 2
Phase 1Redirects, establish connections
Phase 2Bootstrap, download resources
Phase 3Execute JS, build view
![Page 11: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/11.jpg)
Google Confidential and Proprietary
Initial load: Phase 2
Primarily three components:● Main page: bootstrap and userdata (100kB), not cacheable● Main Javascript (1.1MB), cacheable● Stylesheet (300kB), cacheable
![Page 12: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/12.jpg)
Google Confidential and Proprietary
Initial load: Phase 2
Main Page<html>...<iframe src="..."><script>...</script>...USER DATA...</html>
Javascript<html>...<script>XMLHttpRequest(...)</script><script>...</script></html>
JSON Stylesheet['6rwewc438gq3', 4,[".G-M5{font-size:70%;font-family:arial..."],[...]]
Three resources are downloaded in a cascade:
Files are partitioned into script tags to enable pipelined parsing and execution.
![Page 13: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/13.jpg)
Google Confidential and Proprietary
Where is the bottleneck?
fast ~1s ~5s ~60s slow
● Main page dominates faster initial loads.● Javascript and stylesheet dominate slower initial loads.
![Page 14: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/14.jpg)
Google Confidential and Proprietary
Reducing size of Javascript and Stylesheet
● Server doesn't send the entire resource.
● Instead, sends only the difference (delta) between what the client
has (in cache or local storage) and the latest version.
● Delta is encoded with fast, efficient scheme called VCDIFF.
● Delta can be much smaller than the entire resource
We looked at:
RFC3229, SDCH, Bunch of internal implementations, proposals.
![Page 15: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/15.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Client has Javascript of version X from previous session.
// Version Xfunction(){var b=null;;function g(){return h.nav
![Page 16: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/16.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Client starts initial load with request to server.
// Version Xfunction(){var b=null;;function g(){return h.nav
https://mail.google.com/...
![Page 17: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/17.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Server response includes the latest version number (Y).
// Version Xfunction(){var b=null;;function g(){return h.nav
<html><script>LATEST="Y";...</script></html>
![Page 18: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/18.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Client requests delta from X to Y.
// Version Xfunction(){var b=null;;function g(){return h.nav
/mail/u/0/?base=X&ver=Y...
![Page 19: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/19.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Server computes and returns encoded delta between version X and Y which is much smaller than Y itself.
// Version Xfunction(){var b=null;;function g(){return h.nav
Delta_X_Y="cQegGXra9W7L2OPCXp0cQegGXra9W7L2OPCXp0cQegGXra9W7L2OPCXp0..."
![Page 20: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/20.jpg)
Google Confidential and Proprietary
DeltaJS Basics
Client applies delta updating version X to Y and starts executing version Y.
// Version Yfunction(){var c=null;;function f(){return h.nav
![Page 21: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/21.jpg)
Google Confidential and Proprietary
Or... Speculative All-In-One
Initial server response includes the latest version number (Y), as well as the Delta to Last Used (X).
// Version Xfunction(){var b=null;;function g(){return h.nav
<html><script>LATEST="Y";...</script></html>
+
Delta_X_Y= "...."
![Page 22: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/22.jpg)
Google Confidential and Proprietary
DeltaJS for Gmail
● Version-to-versions deltas are ~2% original size (20kB).● A whole month's worth of changes is <9% of original size.
![Page 23: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/23.jpg)
Google Confidential and Proprietary
DeltaJS for Gmail: Impact
Can we estimate the potential benefit?
Model:● Assume one of the three major
resources (main page, JS, SS) is always on critical path.
● Simulate reduced download time* of JS and SS for a large sample of initial loads.
* Time from first byte received to last byte received.
![Page 24: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/24.jpg)
Google Confidential and Proprietary
DeltaJS for Gmail: Impact
Estimate is conservative: doesn't account for faster main page downloading by no longer sharing bandwidth with JS and SS.
![Page 25: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/25.jpg)
Google Confidential and Proprietary
DeltaJS for Gmail: Impact
What if JS and SS download times are reduced by 95%?
improvement
Median 11%
90%-tile 30%
90%-tile India 48%
99%-tile 42%
99%-tile India 52%
Initial load latency could be reduced by about half for high percentiles!
![Page 26: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/26.jpg)
Google Confidential and Proprietary
Initial load: Phase 3
Phase 1Redirects, establish connections
Phase 2Bootstrap, download resources
Phase 3Execute JS, build view
![Page 27: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/27.jpg)
Google Confidential and Proprietary
Browser Platform Enhancements
Challenge: Avoid regressions on Fast Path
We're thinking of 4 key enhancements
1. Sha256, VCDiff in browser2. Pre-Heat JS engine3. Protocol Change4. Streaming VCDiff
![Page 28: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/28.jpg)
Google Confidential and Proprietary
Browser/Platform Enhancements - 1 / 4
Sha256 in Chrome
● Hashing 1.1MB JS: ~300ms
● Hashing 1.1MB C++: ~10ms, 30x faster
Proposal:
● Expose JS interface to Sha256 (crypto API?)
● Same thing for VCDIFF
![Page 29: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/29.jpg)
Google Confidential and Proprietary
Browser/Platform Enhancements - 2 / 4
Pre-Heat Storage / JS engine during connection wait time:
● Pre-Load - "all" of LocalStorage
● Pre-Parse - load and pre-parse JS (find function start/end points)
● Pre-Compile - load, pre-parse, and pre-compile JS
And maybe even:
● Pre-Run - load, compile, and run. Might introduce fantastically complicated side-effects.
![Page 30: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/30.jpg)
Google Confidential and Proprietary
Browser/Platform Enhancements - 3 / 4
Delta-Application via HTTP protocol change (vague idea):
● Server tells browser to explicitly cache/retain resource, e.g., via response header X-Delta-Version: 12345abc
● When requesting (cached) resource, browser adds: X-Delta-Previous-Version: 12345abc
● Server returns full resource, or Delta marked as: Content-Type: delta/x-vcdiffwith additional headers, e.g.: C-Delta-Version: 1ontuhno X-Delta-SHA256: a3498249ebbeec23
● Big Benefit: Transparent to users (client code)
![Page 31: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/31.jpg)
Google Confidential and Proprietary
Browser/Platform Enhancements - 4 / 4
Streaming Delta Application
● Pipeline parallelism between○ JS download○ VCDIFF○ and parsing
● Modify delta format and add "safe points": "it is safe to parse/execute up to this point in the original/modified resource"
![Page 32: Using Delta Delivery Improve Page Load Performance Browser ... · Google Confidential and Proprietary Browser/Platform Enhancements - 4 / 4 Streaming Delta Application Pipeline parallelism](https://reader036.fdocuments.us/reader036/viewer/2022062916/5ec6de982dfa263589407fd7/html5/thumbnails/32.jpg)
Google Confidential and Proprietary
Thanks. Q / A
4 key proposed enhancements
1. Sha256, VCDiff in browser2. Pre-Heat JS engine3. Protocol Change (vague)4. Streaming VCDiff