60
Klotski: Reprioritizing Web Content to Improve User Experience on Mobile Devices Michael Butkiewicz , Daimeng Wang , Zhe Wu , Harsha V. Madhyastha , Vyas Sekar UC Riverside University of Michigan CMU

Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Reprioritizing Web Content to Improve User Experience on Mobile Devices

Michael Butkiewicz♔, Daimeng Wang♔,Zhe Wu♖, Harsha V. Madhyastha♖, Vyas Sekar♘

♔ UC Riverside ♖ University of Michigan ♘ CMU

Page 2: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Motivation: Slow Mobile Web

Page 3: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Motivation: Slow Mobile Web

0.5

2.5sec

7.5sec

12sec

Page 4: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Motivation: Slow Mobile Web

Slow page loads → Less users, Lost business

0.5

2.5sec

7.5sec

12sec

Page 5: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Wide Range of Existing Solutions

Page 6: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Wide Range of Existing Solutions

Compression

Caching

Page 7: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Mobile format web pages

Wide Range of Existing Solutions

Compression

SPDY Caching

Page 8: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Mobile format web pages

Wide Range of Existing Solutions

Compression

SPDY Caching

Faster Networks Better web

browsers

Page 9: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Mobile format web pages

Wide Range of Existing Solutions

Compression

SPDY Caching

Faster Networks Better web

browsers

Common Focus: Reduce Page Load Times

Page 10: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Reducing Load Time is Not Enough

Rising Website Complexity

Page 11: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Rising Website Complexity Falling User Tolerance

Reducing Load Time is Not Enough

Page 12: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

Page 13: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

● Reformulate the problem:

Page 14: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

● Reformulate the problem:

How to reduce page load time?

Page 15: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

● Reformulate the problem:

How to reduce page load time?

How to Prioritize the content most important to user?

Page 16: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

● Reformulate the problem:

How to reduce page load time?

How to Prioritize the content most important to user?

○ Typical tolerance limit of 2-4 seconds

○ Deliver “high utility” resources within time budget

Page 17: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Our Approach: Dynamic Reprioritization

● Forseeable Future: High load times norm, not exception

● Reformulate the problem:

How to reduce page load time?

How to Prioritize the content most important to user?

○ Typical tolerance limit of 2-4 seconds

○ Deliver “high utility” resources within time budget

● Our solution: Klotski proxy

○ No modifications to clients and web servers!

Page 18: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski in Action!Original Page Load at 3s Klotski Page Load at 3s

Page 19: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Idealized View

KlotskiProxy

Web Server

Webpage Resource

Page 20: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Idealized View

KlotskiProxy

Web Server

Webpage Resource

Page 21: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Idealized View

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

Page 22: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Idealized View

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

time budget

Page 23: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Challenges with Idealized View

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

time budget

C1: Dynamic content + dependencies

Page 24: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Challenges with Idealized View

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

C1: Dynamic content + dependenciesC2: Fast selection of subset to prioritize

time budget

Page 25: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Challenges with Idealized View

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

C1: Dynamic content + dependenciesC2: Fast selection of subset to prioritizeC3: How long will a subset take?

time budget

Page 26: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Image

Challenge 1:Dynamic Content and Dependencies

KlotskiProxy

Robust Dependency Knowledge

High Priority Resource

Low Priority Resource

Web Server

AJavascript

Arequires

A

time budget

Page 27: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Dependency DAG

HTML

CSS IMAGE 1SCRIPT

IMAGE 2 IMAGE 3

Intuition: Page structure is stable● Prior work on static dependencies

○ E.g., WebProphet, WProf

Page 28: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Dependency DAG

HTML

CSS IMAGE 1SCRIPT

IMAGE 2 IMAGE 3

● Prior work on static dependencies○ E.g., WebProphet, WProf

● Problem: Dependencies not reusable due to dynamic content

Intuition: Page structure is stable

Page 29: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Dependency DAG

HTML

CSS IMAGE 1SCRIPT

IMAGE 2 IMAGE 3

● Prior work on static dependencies○ E.g., WebProphet, WProf

● Problem: Dependencies not reusable due to dynamic content

● Our observation:○ Nodes in DAG change○ DAG structure largely stable

Intuition: Page structure is stable

Page 30: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Intuition: Page structure is stable

Dependency DAG

HTML

CSS IMAGE 1SCRIPT

IMAGE 2 IMAGE 3

● Prior work on static dependencies○ E.g., WebProphet, WProf

● Problem: Dependencies not reusable due to dynamic content

● Our observation:○ Nodes in DAG change○ DAG structure largely stable

Load page repeatedly to generate fingerprint:● DAG structure with a URL pattern at every node● Pattern generalizes URL of dynamic resources

Page 31: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Learn URL Patterns● Generalize known prior URLs of a dynamic resource

foo.com/SG39HZ78/a.js foo.com/SHFS2732/a.js → foo.com/*/a.js

Page 32: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Learn URL Patterns● Generalize known prior URLs of a dynamic resource

● 3 Cases = 90% of Replacements:○ Single token in URL changes○ Only URL argument changes: www.site.org/a.js?FOO=1...○ CDN node name: {CDN2.bar.com/x.jpg, CDN5.bar.com/x.jpg}

foo.com/SG39HZ78/a.js foo.com/SHFS2732/a.js → foo.com/*/a.js

Page 33: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Identify Resource Replacements

● Capture set of prior URLs:Track Replacement of Resourceover multiple page loads

Page 34: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Identify Resource Replacements

R1 R2● Capture set of prior URLs:

Track Replacement of Resourceover multiple page loads

Page 35: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Identify Resource Replacements

R1 R2

● Combination of techniques:○ Match position in DAG

dependency structure○ Identical position on screen○ Identical reference in source

● Capture set of prior URLs:Track Replacement of Resourceover multiple page loads

Page 36: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Challenge 2:Optimal Prioritization Schedule

KlotskiProxy

Which subset to prioritize and how?

High Priority Resource

Low Priority Resource

Web Server

time budget

Page 37: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Select Subset of High Utility Resources

Dependencystructure infingerprint

Page 38: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Select Subset of High Utility Resources

Dependencystructure infingerprint

Page 39: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Select Subset of High Utility Resources

Dependencystructure infingerprint

DAG Cut

● Reduces to knapsack with dependencies: NP-Hard

● Apply greedy heuristic

Page 40: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Prioritizing High-Utility Resources

● Static URLs: Use SPDY PUSH to pre-emptively deliver

as soon as main HTML is requested

● Dynamic URLs: Prioritize delivery if match with regular

expression of a selected resource

Page 41: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Challenge 3:Estimating Load Times in the “Wild”

KlotskiProxy

Will subset load within budget?

High Priority Resource

Low Priority Resource

Web Server

time budget

X

Page 42: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Seemingly Natural Non-Solutions

KlotskiProxy

High Priority Resource

Low Priority Resource

Web Server

time budget

Model: bytes, #requests, ..?Use Apriori Load Times?

Model: Too simplistic to capture browser effectsApriori Loads: No longer valid with reprioritizationCannot capture diversity in client conditions

Page 43: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Intuition Behind Klotski Estimator

Bottleneck = Client-Proxy Link (e.g, 4G)

KlotskiProxy

Web Server

time budget

Page 44: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Intuition Behind Klotski Estimator

KlotskiProxy

Web Server

time budget

Build Fluid Model Simulation● Proxy as work conserving scheduler● Priorities/Dependencies, fairly shared bw for concurrent transfers● Some subtle issues: PUSH, client processing delays

Page 45: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: System Architecture

Clients

Klotski Service

Web Servers

Fingerprint Generator

Load Time Estimator

Resource Selection

BackEnd FrontEnd

Page 46: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski: Experimental Results

Data Set

Websites● 50 Random From Alexa Top 200

Mobile Device● Android Smartphone● 4G Connection● Google Chrome

Paper Only Results● Desktop PC + Ethernet● Smartphone + Full Website● User study on utility preferences● Resource churn over time

Page 47: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

Page 48: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

Within the first X seconds

Page 49: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

% of site's high util resources loaded

Within the first X seconds

Page 50: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

50 Websites

Page 51: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

75%

25%

50 Websites

50%

Page 52: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

Median site25% ATF in 2 secs

0.25

Page 53: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

Page 54: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

35% utility gain

Page 55: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Klotski Improves User Experience

2x Util25% ➙ 60%

Page 56: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

High Utility Gain For Diverse Users

Page 57: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

High Utility Gain For Diverse Users

User Preferences

Page 58: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

High Utility Gain For Diverse Users

User Preferences

Utility Gainedat 2 Seconds

Page 59: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

High Utility Gain For Diverse Users

Page 60: Improve User Experience on Mobile Devices Klotski ... · Mobile web continues to be a pain point Focus on load time alone is likely insufficient Instead we focus on dynamic reprioritization

Conclusions● Mobile web continues to be a pain point

○ Focus on load time alone is likely insufficient

● Instead we focus on dynamic reprioritization

● Key challenges we address:

○ dynamic dependency representation

○ fast resource selection

○ load time estimation

● Klotski greatly improves user experience

○ for diverse preferences