Accelerating the Mobile Web with Vroom: Server-Aided … · 2017. 10. 27. · Vroom: Accelerating...

Vroom: Accelerating the Mobile Web with Server-Aided Dependency Resolution

Vaspol Ruamviboonsuk1, Ravi Netravali2, Muhammed Uluyol1, Harsha V. Madhyastha1

1

1University of Michigan, 2MIT

Mobile Web Dominant ...

2Ref: http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide

“Average load time 14s on 4G” - DoubleClick

“9.85s to load median mobile retail sites” - Keynote Systems

but Slow...

Problem: Slow web page loads

3

Mobile Optimized Popular Pages, State of the Art Phone, Good LTE network

10s10s5s

Simple Example Page

4

<html> … <script src=”script.js”></script> … </html>

a.com/index.html

var img = new Image();

img.src = “b.com/img.jpg”;

document.body.appendChild(img);

a.com/script.js

index.html

script.js

img.jpg

Dependency Graph

Loading a Web Page

5

GET a.com HTML

Parse HTML

GET script.js

script.js

Execute script.js

GET img.jpg

img.jpg

Client

a.com

b.com

Onload

index.html script.js img.jpg

Dependency Graph

Waiting on CPU blocks network and vice versa

6

Parse HTML Execute script.jsClient

Onload

NetworkUtilization

CPUUtilization

Key to fast page loads: Fully utilize CPU/network

Proxy Based Solution

7

Client

a.com

Proxy

b.com

c.com

GET a.com/index.html

Stream downloaded resources

Shortcomings● Client must trust HTTPS content pushed by proxy● Proxy needs access to user’s cookies for all domains

Fetch resources

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



2. How do web servers inform clients of discovered dependencies?


9

Inefficient Page Load

10

GET a.com HTML

Parse HTML

GET script.js

script.js

Execute script.js

GET img.jpg

img.jpg

Client

a.com

b.com

Onload


Dependency Graph

HTTP/2 Push

11

GET a.com HTML

Parse HTML

GET script.js

script.js

Execute script.js

GET img.jpg

img.jpg

Client

a.com

b.com

Onload

script.js


Dependency Graph

Push Only Load

12

GET a.com HTML

Parse HTML Execute script.js

GET img.jpg

img.jpg

Client

a.com

b.com

Onload

script.js


Dependency Graph

GET img.jpg

Dependency Hints

13

GET a.com

HTML &b.com/img.jpg

Parse HTML Execute script.js

img.jpg

Client

a.com

b.com

Onload


Dependency Graph

GET img.jpg

img.jpg



2. How do web servers inform clients of discovered dependencies?● HTTP/2 Push + Dependency Hints


14

Strawman Dependency Resolution

15

foo.com

GET https://foo.com

Drawbacks● Back-to-back loads differ● Server cannot account for personalization

Response + Push and Hints a.com b.com c.com

Combined Offline-Online Discovery

16

ParseHTML Responsefoo.com

GET https://foo.com

t0 t1 t2

...+

● Stable dependencies: Intersection of offline loads

Response +Push and Hints

● Dynamic Content: Online Parsing of HTML

Personalized Dependencies from Third-party Domains

17

Start

Personalized Content?


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 Onload

Fetch all HTML, JS, CSS

Parse HTML and CSS, Execute JS

Fetch other dependencies

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

10s

Alexa top 50 news and 50 sports sites


25

7.5s 10s


26

7.5s 10s7.5s 10s5s


27

7.5s 10s5s


28

7.5s 10s5sVisual Improvement● Vroom also significantly reduces above-the-fold time

Incremental Deployment● 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

Accelerating the Mobile Web with Vroom: Server-Aided … · 2017. 10. 27. · Vroom: Accelerating...

Documents

Transcript of Accelerating the Mobile Web with Vroom: Server-Aided … · 2017. 10. 27. · Vroom: Accelerating...