Accelerating the Mobile Web with Server-Aided Dependency Resolution
Vroom:
Accelerating the Mobile Web with Server-
Aided Dependency Resolution
Vaspol Ruamviboonsuk
1
, Ravi Netravali
2
,
Muhammed Uluyol
1
, Harsha V. Madhyastha
1
1
1
University of Michigan,
2
MIT
Mobile Web Dominant ...
2
Ref: http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
“
A
v
e
r
a
g
e
l
o
a
d
t
i
m
e
1
4
s
o
n
4
G
”
-
D
o
u
b
l
e
C
l
i
c
k
“
9
.
8
5
s
t
o
l
o
a
d
m
e
d
i
a
n
m
o
b
i
l
e
r
e
t
a
i
l
s
i
t
e
s
”
-
K
e
y
n
o
t
e
S
y
s
t
e
m
s
but Slow...
Problem: Slow web page loads
3
Mobile Optimized Popular Pages,
State of the Art Phone, Good LTE network
Simple Example Page
4
Loading a Web Page
5
Client
a.com
b.com
Waiting on CPU blocks network and vice versa
6
Client
K
e
y
t
o
f
a
s
t
p
a
g
e
l
o
a
d
s
:
F
u
l
l
y
u
t
i
l
i
z
e
C
P
U
/
n
e
t
w
o
r
k
Proxy Based Solution
7
a.com
Proxy
b.com
c.com
Shortcomings
●
Client must trust HTTPS content pushed by proxy
●
Proxy needs access to user’s cookies for all domains
Web servers must aid client in
discovering resources
Challenges to approach
1.
How can web servers discover dependencies?
2.
How do web servers inform clients of discovered
dependencies?
3.
How should clients use input from servers?
8
Challenges to approach
1.
How can web servers discover dependencies?
2.
How do web servers inform clients of discovered
dependencies?
3.
How should clients use input from servers?
9
Inefficient Page Load
10
Client
a.com
b.com
HTTP/2 Push
11
Client
a.com
b.com
Push Only Load
12
Client
a.com
b.com
Dependency Hints
13
Client
a.com
b.com
Challenges to approach
1.
How can web servers discover dependencies?
2.
How do web servers inform clients of discovered
dependencies?
●
HTTP/2 Push + Dependency Hints
3.
How should clients use input from servers?
14
Strawman Dependency Resolution
15
Drawbacks
●
Back-to-back loads differ
●
Server cannot account for personalization
Combined Offline-Online Discovery
16
foo.com
GET https://foo.com
+
●
Stable dependencies
:
Intersection of offline loads
Response +
Push and Hints
●
Dynamic Content
:
Online Parsing of HTML
Personalized Dependencies from Third-party Domains
17
Challenges to approach
1.
How do web servers discover dependencies?
●
Combine offline and online + Defer to third parties
2.
How do web servers inform clients of discovered
dependencies?
●
HTTP/2 Push + Dependency Hints
3.
How do clients use input from servers?
18
Need for Scheduling
19
●
No speedup with “Push All + Fetch ASAP”
○
Contention for access link bandwidth stalls processing
●
Prioritize pushes and fetches of HTML, CSS, and JS
○
Schedule in order of processing
○
Account for 20% of bytes on average
Vroom scheduler in action
20
T
=
0
O
n
l
o
a
d
Results overview
●
Accuracy of dependency discovery
○
Median: 0% false positives and < 5% false negatives
●
Improvements in client perceived performance
○
Speedup over status quo
○
Simple strawmans don't suffice
○
Speedup even with warm caches
21
Results overview
●
Accuracy of dependency discovery
○
Median: 0% false positives and < 5% false negatives
●
Improvements in client perceived performance
○
Speedup over status quo
○
Simple strawmans don't suffice
○
Speedup even with warm caches
22
Evaluation Setup
23
Vroom makes page loads much faster
24
Alexa top 50 news and 50 sports sites
Vroom makes page loads much faster
25
7.5s
10s
Vroom makes page loads much faster
26
7.5s
10s
7.5s
10s
5s
Vroom makes page loads much faster
27
7.5s
10s
5s
Vroom makes page loads much faster
28
7.5s
10s
5s
V
i
s
u
a
l
I
m
p
r
o
v
e
m
e
n
t
●
V
r
o
o
m
a
l
s
o
s
i
g
n
i
f
i
c
a
n
t
l
y
r
e
d
u
c
e
s
a
b
o
v
e
-
t
h
e
-
f
o
l
d
t
i
m
e
I
n
c
r
e
m
e
n
t
a
l
D
e
p
l
o
y
m
e
n
t
●
Most of Vroom’s benefits achievable with first-party adoption
Conclusion
●
Vroom: End-to-end solution that fully utilizes CPU/Network
●
Decouples dependency discovery from parsing and execution
●
Decreases median page load time by 5s for popular sites
29
Summary of the work - Rethinking page load on phones and tablets to improve page load performance.
This research discusses the challenges of slow web page loads on mobile devices, presenting a solution utilizing server-aided dependency resolution. It covers the impact of slow loading times on mobile web dominance, the importance of efficient resource loading, and the key factors influencing fast page loads. The proposed proxy-based solution aims to streamline resource discovery and leverage server assistance for optimizing mobile web performance.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Vroom: Accelerating the Mobile Web with Server- Aided Dependency Resolution Vaspol Ruamviboonsuk1, Ravi Netravali2, Muhammed Uluyol1, Harsha V. Madhyastha1 1University of Michigan, 2MIT 1
Mobile Web Dominant ... but Slow... 9.85s to load median mobile retail sites - Keynote Systems Average load time 14s on 4G - DoubleClick 2 Ref: http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide
Problem: Slow web page loads 5s 10s 10s Mobile Optimized Popular Pages, State of the Art Phone, Good LTE network 3
Simple Example Page Dependency Graph a.com/index.html index.html <html> <script src= script.js ></script> </html> script.js a.com/script.js var img = new Image(); img.src = b.com/img.jpg ; document.body.appendChild(img); img.jpg 4
Dependency Graph Loading a Web Page index.html script.js img.jpg Onload Execute script.js Parse HTML Client GET script.js GET a.com HTML script.js GET img.jpg a.com img.jpg b.com 5
Waiting on CPU blocks network and vice versa Onload Execute script.js Parse HTML Client Key to fast page loads: Fully utilize CPU/network Network Utilization CPU Utilization 6
Proxy Based Solution a.com GET a.com/index.html b.com Stream downloaded resources Web servers must aid client in discovering resources Client Proxy c.com Shortcomings Client must trust HTTPS content pushed by proxy Proxy needs access to user s cookies for all domains 7
Challenges to approach 1. How can web servers discover dependencies? 2. How do web servers inform clients of discovered dependencies? 3. How should clients use input from servers? 8
Challenges to approach 1. How can web servers discover dependencies? 2. How do web servers inform clients of discovered dependencies? 3. How should clients use input from servers? 9
Dependency Graph Inefficient Page Load index.html script.js img.jpg Onload Execute script.js Parse HTML Client GET script.js GET a.com HTML script.js GET img.jpg a.com img.jpg b.com 10
Dependency Graph HTTP/2 Push index.html script.js img.jpg Onload Execute script.js Parse HTML Client GET script.js GET a.com script.js HTML script.js GET img.jpg a.com img.jpg b.com 11
Dependency Graph Push Only Load index.html script.js img.jpg Onload Execute script.js Parse HTML Client GET a.com script.js HTML GET img.jpg a.com img.jpg b.com 12
Dependency Graph Dependency Hints index.html script.js img.jpg Onload Execute script.js Parse HTML Client GET a.com HTML & b.com/img.jpg GET img.jpg a.com img.jpg img.jpg GET img.jpg b.com 13
Challenges to approach 1. How can web servers discover dependencies? 2. How do web servers inform clients of discovered dependencies? HTTP/2 Push + Dependency Hints 3. How should clients use input from servers? 14
Strawman Dependency Resolution GET https://foo.com Response + Push and Hints foo.com a.com b.com c.com Drawbacks Back-to-back loads differ Server cannot account for personalization 15
Combined Offline-Online Discovery GET https://foo.com + ... Parse HTML Response t0 t1 t2 Response + Push and Hints foo.com Stable dependencies: Intersection of offline loads Dynamic Content: Online Parsing of HTML 16
Personalized Dependencies from Third-party Domains Start Personalized Content? 17
Challenges to approach 1. How do web servers discover dependencies? Combine offline and online + Defer to third parties 2. How do web servers inform clients of discovered dependencies? HTTP/2 Push + Dependency Hints 3. How do clients use input from servers? 18
Need for Scheduling No speedup with Push All + Fetch ASAP Contention for access link bandwidth stalls processing Prioritize pushes and fetches of HTML, CSS, and JS Schedule in order of processing Account for 20% of bytes on average 19
Vroom scheduler in action Fetch all HTML, JS, CSS Fetch other dependencies Parse HTML and CSS, Execute JS T=0 Onload 20
Results overview Accuracy of dependency discovery Median: 0% false positives and < 5% false negatives Improvements in client perceived performance Speedup over status quo Simple strawmans don't suffice Speedup even with warm caches 21
Results overview Accuracy of dependency discovery Median: 0% false positives and < 5% false negatives Improvements in client perceived performance Speedup over status quo Simple strawmans don't suffice Speedup even with warm caches 22
Vroom makes page loads much faster 10s Alexa top 50 news and 50 sports sites 24
Vroom makes page loads much faster 7.5s 10s 25
Vroom makes page loads much faster 7.5s 7.5s 10s 10s 5s 26
Vroom makes page loads much faster 10s 5s 7.5s 27
Vroom makes page loads much faster Visual Improvement Vroom also significantly reduces above-the-fold time 10s 5s 7.5s Incremental Deployment Most of Vroom s benefits achievable with first-party adoption 28
Conclusion Vroom: End-to-end solution that fully utilizes CPU/Network Decouples dependency discovery from parsing and execution Decreases median page load time by 5s for popular sites 29
