Vroom: Accelerating the Mobile Web with Server-Aided Dependency - - PowerPoint PPT Presentation

▶
vroom accelerating the mobile web with server aided
SMART_READER_LITE
LIVE PREVIEW

Vroom: Accelerating the Mobile Web with Server-Aided Dependency - - PowerPoint PPT Presentation

Dec 14, 2022 311 likes •760 views

Vroom: Accelerating the Mobile Web with Server-Aided Dependency Resolution Vaspol Ruamviboonsuk 1 , Ravi Netravali 2 , Muhammed Uluyol 1 , Harsha V. Madhyastha 1 1 University of Michigan, 2 MIT 1 Mobile Web Dominant ... but Slow... 9.85s to

slide-1
SLIDE 1

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

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

1

1University of Michigan, 2MIT

slide-2
SLIDE 2

Mobile Web Dominant ...

2

Ref: 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...

slide-3
SLIDE 3

Problem: Slow web page loads

3

Mobile Optimized Popular Pages, Nexus 6 Phone, Good LTE network

5 seconds 75th percentile 25th percentile Median

slide-4
SLIDE 4

Problem: Slow web page loads

4

Mobile Optimized Popular Pages, Nexus 6 Phone, Good LTE network

10 seconds

slide-5
SLIDE 5
  • 1. Why are page loads slow?
  • 2. Our solution: Vroom
  • 3. Implications of Vroom

Outline

5

slide-6
SLIDE 6
  • 1. Why are page loads slow?
  • 2. Our solution: Vroom
  • 3. Implications of Vroom

Outline

6

slide-7
SLIDE 7

Loading a Web Page

7

GET a.com HTML Parse HTML GET img.png

Client a.com

img.png

CPU Utilization Network Utilization

Neither CPU nor network is fully utilized

slide-8
SLIDE 8

CPU is the bottleneck

8

5 seconds

slide-9
SLIDE 9

Is the CPU bottleneck always?

  • Network may be the bottleneck in other settings
  • Trends:

○ Network: Higher bandwidth and lower latency ○ But, CPU only increases in no. of cores

9

slide-10
SLIDE 10

More CPU cores do not help much

10

slide-11
SLIDE 11

Is the CPU bottleneck always?

  • Network may be the bottleneck in other settings
  • Trends:

○ Network: Higher bandwidth and lower latency ○ But, CPU only increases in no. of cores

  • Browser’s processing on a page largely serial
  • Implication: CPU will be bottleneck in the long-term

11

slide-12
SLIDE 12

Rethinking how web pages are loaded

  • Browsers discover resources from parsing and execution
  • Rethink page load:

○ Have servers aid clients in resource discovery

12

slide-13
SLIDE 13
  • 1. Why are page loads slow?
  • 2. Our solution: Vroom
  • 3. Implications of Vroom

Outline

13

slide-14
SLIDE 14

Vroom

14

Client-side Scheduler Dependency Resolution

foo.com

Dependency Resolution

Domain B

GET https://foo.com

  • 1. HTTP Response
  • 2. HTTP/2 Push

Client Server

  • 3. Dependency Hints

(e.g., Link preload)

slide-15
SLIDE 15

Challenges to approach

  • 1. How can web servers discover dependencies?
  • 2. How should clients use input from servers?

15

slide-16
SLIDE 16

Challenges to approach

  • 1. How can web servers discover dependencies?
  • 2. How should clients use input from servers?

16

slide-17
SLIDE 17

Strawman Dependency Resolution

17

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

slide-18
SLIDE 18

Combined Offline-Online Discovery

18

Parse HTML Response

foo.com

GET https://foo.com

t0 t1 t2 ...

+

  • Stable dependencies: Intersection of offline loads

Response + Push and Hints

  • Dynamic content: Online parsing of HTML
slide-19
SLIDE 19

Challenges to approach

  • 1. How do web servers discover dependencies?
  • Combine offline and online resource discovery
  • 2. How do clients use input from servers?

19

slide-20
SLIDE 20

Vroom

20

Client-side Scheduler Dependency Resolution

foo.com

Dependency Resolution

Domain B

GET https://foo.com

  • 1. HTTP Response
  • 2. HTTP/2 Push and

Dependency Hints

slide-21
SLIDE 21

Push All + Fetch ASAP Approach

21

Client-side Scheduler Dependency Resolution

foo.com

Dependency Resolution

Domain B

GET https://foo.com

  • 1. HTTP Response
  • 2. HTTP/2 Push and

Dependency Hints

Every server pushes all resources it could Client fetches immediately upon receiving hint

slide-22
SLIDE 22

Need for Scheduling

22

  • 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

slide-23
SLIDE 23

Vroom scheduler in action

23

T=0 Onload

Fetch all HTML, JS, CSS Parse HTML and CSS, Execute JS Fetch other hinted dependencies

slide-24
SLIDE 24

Vroom

24

Client-side Scheduler Dependency Resolution

foo.com

Dependency Resolution

Domain B

GET https://foo.com

  • 1. HTTP Response
  • 2. HTTP/2 Push

Client Server

  • 3. Dependency Hints

(e.g., Link preload)

Prioritize pushes and fetches of HTML, CSS, and JS Combined Offline + Online Resource Discovery

slide-25
SLIDE 25

Results overview

  • Vroom’s dependency resolution is accurate

○ Median: 0% false positives and < 5% false negatives

  • Vroom speeds up page loads

○ Speedup over status quo ○ Simple strawmans don't suffice ○ Speedup even with warm caches

25

slide-26
SLIDE 26

Results overview

  • Vroom’s dependency resolution is accurate

○ Median: 0% false positives and < 5% false negatives

  • Vroom speeds up page loads

○ Speedup over status quo

○ Simple strawmans don't suffice ○ Speedup even with warm caches

26

slide-27
SLIDE 27

Evaluation Setup

27

Nexus 6 4G Network

Attribution Server Icon: mungang kim

Web Record & Replay Environment

slide-28
SLIDE 28

Vroom makes page loads much faster

28

Alexa top 50 news and 50 sports sites 10 seconds 75th percentile 25th percentile Median

slide-29
SLIDE 29

Vroom makes page loads much faster

29

Alexa top 50 news and 50 sports sites 7.5 seconds

slide-30
SLIDE 30

Vroom makes page loads much faster

30

Alexa top 50 news and 50 sports sites 5 seconds

slide-31
SLIDE 31

Vroom makes page loads much faster

31

Alexa top 50 news and 50 sports sites 5 seconds

slide-32
SLIDE 32

Vroom also improves page loads visually

32

Alexa top 50 news and 50 sports sites 12 seconds

slide-33
SLIDE 33

Vroom also improves page loads visually

33

Alexa top 50 news and 50 sports sites 8 seconds

slide-34
SLIDE 34

Incrementally Deploying Vroom

34

Client-side Scheduler Dependency Resolution

foo.com

Dependency Resolution

Domain B

GET https://foo.com

Client Server

  • 1. HTTP Response
  • 2. HTTP/2 Push and

Dependency Hints

slide-35
SLIDE 35

Incrementally Deploying Vroom

35

Client-side Scheduler Dependency Resolution

foo.com Domain B

GET https://foo.com

Client Server

  • 1. HTTP Response

Most benefits is still achievable from incremental deployment

  • 2. HTTP/2 Push and

Dependency Hints

slide-36
SLIDE 36
  • 1. Why are page loads slow?
  • 2. Our solution: Vroom
  • 3. Implications of Vroom

Outline

36

slide-37
SLIDE 37

Making Vroom Practical

  • H2 Push and Link Preload enable server-aided resource discovery
  • Requires offline discovery of stable resources on pages

○ Consumes CPU and network at servers

  • Crowdsource offline dependency resolution

○ Browsers could upload URLs of resources seen in page loads

37

slide-38
SLIDE 38

Client Aiding Offline Dependency Resolution

38

Personalized Content?

slide-39
SLIDE 39
  • Do not fetch all dependencies at the same time
  • Group dependencies into different priorities
  • Perform fetch in stages based on dependency priorities
  • Include priority with Link preload e.g.

<link rel=”preload” href=”...” priority=”high”></link>

Prioritizing Preloads

39

slide-40
SLIDE 40

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

40

slide-41
SLIDE 41

Backup

41

slide-42
SLIDE 42

Personalized Dependencies from Third-party Domains

42

Start Personalized Content?

slide-43
SLIDE 43

Evaluation Setup

43

slide-44
SLIDE 44

Vroom makes page loads much faster

44

10s Alexa top 50 news and 50 sports sites