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 load median mobile “Average load time 14s on retail sites” - Keynote Systems 4G” - DoubleClick Ref: http://gs.statcounter.com/press/mobile-and-tablet-internet-usage-exceeds-desktop-for-first-time-worldwide 2
Problem: Slow web page loads 75th percentile Median 5 seconds 25th percentile Mobile Optimized Popular Pages, Nexus 6 Phone, Good LTE network 3
Problem: Slow web page loads 10 seconds Mobile Optimized Popular Pages, Nexus 6 Phone, Good LTE network 4
Outline 1. Why are page loads slow? 2. Our solution: Vroom 3. Implications of Vroom 5
Outline 1. Why are page loads slow? 2. Our solution: Vroom 3. Implications of Vroom 6
Neither CPU nor network Loading a Web Page is fully utilized Parse HTML Client GET GET img.png HTML img.png a.com a.com Network Utilization CPU Utilization 7
CPU is the bottleneck 5 seconds 8
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
More CPU cores do not help much 10
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
Rethinking how web pages are loaded ● Browsers discover resources from parsing and execution ● Rethink page load: ○ Have servers aid clients in resource discovery 12
Outline 1. Why are page loads slow? 2. Our solution: Vroom 3. Implications of Vroom 13
Vroom Server Client GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push Scheduler Dependency 3. Dependency Hints Resolution (e.g., Link preload) Domain B 14
Challenges to approach 1. How can web servers discover dependencies? 2. How should clients use input from servers? 15
Challenges to approach 1. How can web servers discover dependencies? 2. How should clients use input from servers? 16
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 ● 17
Combined Offline-Online Discovery GET https://foo.com + ... Parse HTML t 0 t 1 t 2 Response + foo.com Response Push and Hints ● Stable dependencies: Intersection of offline loads ● Dynamic content: Online parsing of HTML 18
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
Vroom GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push and Scheduler Dependency Hints Dependency Resolution Domain B 20
Push All + Fetch ASAP Approach GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push and Scheduler Dependency Hints Dependency Resolution Domain B Every server pushes all resources it could Client fetches immediately upon receiving hint 21
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 22
Vroom scheduler in action Fetch all HTML, JS, CSS Fetch other hinted dependencies Parse HTML and CSS, Execute JS T=0 Onload 23
Vroom Server Client GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push Scheduler Dependency 3. Dependency Hints Resolution (e.g., Link preload) Domain B Prioritize pushes and Combined Offline + fetches of HTML, CSS, Online Resource and JS Discovery 24
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
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
Evaluation Setup Web Record & Nexus 6 4G Network Replay Environment Attribution Server Icon: mungang kim 27
Vroom makes page loads much faster 75th percentile Median 10 seconds 25th percentile Alexa top 50 news and 50 sports sites 28
Vroom makes page loads much faster 7.5 seconds Alexa top 50 news and 50 sports sites 29
Vroom makes page loads much faster 5 seconds Alexa top 50 news and 50 sports sites 30
Vroom makes page loads much faster 5 seconds Alexa top 50 news and 50 sports sites 31
Vroom also improves page loads visually 12 seconds Alexa top 50 news and 50 sports sites 32
Vroom also improves page loads visually 8 seconds Alexa top 50 news and 50 sports sites 33
Incrementally Deploying Vroom Server Client GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push and Scheduler Dependency Hints Dependency Resolution Domain B 34
Incrementally Deploying Vroom Server Client GET https://foo.com Dependency Resolution 1. HTTP Response foo.com Client-side 2. HTTP/2 Push and Scheduler Dependency Hints Domain B Most benefits is still achievable from incremental deployment 35
Outline 1. Why are page loads slow? 2. Our solution: Vroom 3. Implications of Vroom 36
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
Client Aiding Offline Dependency Resolution Personalized Content? 38
Prioritizing Preloads ● 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> 39
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
Backup 41
Personalized Dependencies from Third-party Domains Start Personalized Content? 42
Evaluation Setup 43
Vroom makes page loads much faster 10s Alexa top 50 news and 50 sports sites 44
Recommend
More recommend
