Post on 24-Feb-2016
description
transcript
1
Enabling the Transition to the Mobile Web with WebSieve
Michael Butkiewicz, Zhe Wu, Shunan Li, Pavithra Murali, Vagelis Hristidis,
Harsha V. Madhyastha (UC Riverside), Vyas Sekar (Stony Brook University)
Source: gomez.com
Why does load time matter?
2
Source: gomez.com
Why does load time matter?
3
“Google incorporates site speed into search rankings”
4
High Load Times are Common
5
High Load Times are Common
Median Sitew/o mobile version
19 sec
6
High Load Times are Common
Median Mobile Site
13 sec
Median Sitew/o mobile version
19 sec
7
Page Complexity Load Time
Well StudiedMobiSys 2010 Huang, et al.
IMC 2011 Butkiewicz, et al.
HotMobile 2011 Wang, et al.
httparchive.org
8
Page Complexity Load Time
Well StudiedMobiSys 2010 Huang, et al.
IMC 2011 Butkiewicz, et al.
HotMobile 2011 Wang, et al.
httparchive.org
9
Page Complexity Load Time
200850 objects
Well StudiedMobiSys 2010 Huang, et al.
IMC 2011 Butkiewicz, et al.
HotMobile 2011 Wang, et al.
httparchive.org
10
Page Complexity Load Time
Well StudiedMobiSys 2010 Huang, et al.
IMC 2011 Butkiewicz, et al.
HotMobile 2011 Wang, et al.
httparchive.org 200850 objects
2012100 objects!
11
Page Complexity Load Time
Well StudiedMobiSys 2010 Huang, et al.
IMC 2011 Butkiewicz, et al.
HotMobile 2011 Wang, et al.
httparchive.org 200850 objects
2012100 objects!
Webpage Complexity outpacing Mobile Resources
12
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
13
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
Our Goal: Automate Mobile-Friendly Optimization
14
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
Our Goal: Automate Mobile-Friendly Optimization
15
– Block Low Importance Objects
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
Our Goal: Automate Mobile-Friendly Optimization
16
– Block Low Importance Objects– Prioritize High Importance Objects
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
Our Goal: Automate Mobile-Friendly Optimization
17
– Block Low Importance Objects– Prioritize High Importance Objects
WebSieve’s GoalState of the Art: Manual Reduction of Complexity
Our Goal: Automate Mobile-Friendly Optimization
18
Challenge 1. Inferring Object Utility
19
Low Utility
Low Utility Challenge 1. Inferring Object UtilityLow
Utility
20
High Utility
High Utility
Challenge 1. Inferring Object Utility
21
? Utility
Challenge 1. Inferring Object Utility
22
HTML
CSS JS
Challenge 2. Discovering Dependencies
23
HTML
CSS JS
Challenge 2. Discovering Dependencies
24
HTML
CSS JS
Challenge 2. Discovering Dependencies
25
Challenge 3. Predicting New Load Times
26
Server Variability
Challenge 3. Predicting New Load Times
27
Script Processing
Server Variability
Challenge 3. Predicting New Load Times
28
ParallelConnection
Limits
Script Processing
Server Variability
Challenge 3. Predicting New Load Times
29
foo.com/xO1 O2 O3 O4
Front-end Back-end
Our Vision For WebSieve
30
Dependency Extraction
foo.com/xO1 O2 O3 O4
Front-end Back-end
Our Vision For WebSieve
31
Dependency Extraction
User Utility Inference
ObjectSelection
foo.com/xO1 O2 O3 O4
Front-end Back-end
Our Vision For WebSieve
32
Dependency Extraction
User Utility Inference
ObjectSelection
foo.com/xO1 O2 O3 O4
Our Vision For WebSieve
Fetch Fingerprint
Fetch HTML
Front-end Back-end
33
Dependency Extraction
User Utility Inference
ObjectSelection
foo.com/xO1 O2 O3 O4
Front-end Back-end
Our Vision For WebSieve
{O1,O3}
Fetch HTML
34
Dependency Extraction
User Utility Inference
ObjectSelection
foo.com/xO1 O2 O3 O4
Front-end Back-end
Our Vision For WebSieve
2. Load {O1,O3}
1. HTML Received
35
Challenge 1. Inferring Utility
Approach: User Study + Machine Learning
36
Challenge 1. Inferring Utility
Approach: User Study + Machine Learning
Simple Machine Learning Not Enough
Personalization Is Key
37
HTML
JPG a JS 1
JS 2 JPG b
JPG c
Original Load
Challenge 2. Discover Dependencies
Approach: Block & Infer
38
HTML
JPG a JS 1
JS 2 JPG b
JPG c
HTML
JPG a
Original Load Block JS 1
Challenge 2. Discover Dependencies
Approach: Block & Infer
39
HTML
JPG a JS 1
JS 2 JPG b
JPG c
HTML
JPG a
HTML
JPG a JS 1
JPG b
Original Load Block JS 1 Block JS 2
Challenge 2. Discover Dependencies
Approach: Block & Infer
40
HTML
JPG a JS 1
JS 2 JPG b
JPG c
HTML
JPG a
HTML
JPG a JS 1
JPG b
Original Load Block JS 1 Block JS 2
Challenge 2. Discover Dependencies
Approach: Block & Infer
41
Challenge 3. Object Selection
Approach: Page Tree Cut
Util: 5Time: 4s
Util: 2Time: 0.5s
Util: 1Time: 1s
Util: 0Time: 0.1s
Util: 1Time: 2s
Util: 2Time: 0.5s
Util: 5Time: 0.5s
Util: 7Time: 0.4s
Util: 3Time: 2s
• Cut Dependency DAG• Maximize Utility• Respect Load Time Budget
42
Challenge 3. Object Selection
Approach: Page Tree Cut
Util: 5Time: 4s
Util: 2Time: 0.5s
Util: 1Time: 1s
Util: 0Time: 0.1s
Util: 1Time: 2s
Util: 2Time: 0.5s
Util: 5Time: 0.5s
Util: 7Time: 0.4s
Util: 3Time: 2s
• Cut Dependency DAG• Maximize Utility• Respect Load Time Budget
43
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity Reduction
44
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity ReductionWebSieve: Automate Mobile-Friendly Optimization
45
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity ReductionWebSieve: Automate Mobile-Friendly Optimization
– Block Low Importance Objects
46
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity ReductionWebSieve: Automate Mobile-Friendly Optimization
– Block Low Importance Objects– Prioritize High Importance Objects
47
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity ReductionWebSieve: Automate Mobile-Friendly Optimization
– Block Low Importance Objects– Prioritize High Importance Objects
Challenges: Object Dependency, Utility, Obj. Selection
48
Wrap UpLoad Time Strongly Impacts User Satisfaction
State of the Art: Manual Complexity ReductionWebSieve: Automate Mobile-Friendly Optimization
– Block Low Importance Objects– Prioritize High Importance Objects
Challenges: Object Dependency, Utility, Obj. Selection
Ongoing Prototype Development & Promising Results