How far can client-only solutions go for mobile browser speed? Zhen - - PowerPoint PPT Presentation

▶
how far can client only solutions go for mobile browser
SMART_READER_LITE
LIVE PREVIEW

How far can client-only solutions go for mobile browser speed? Zhen - - PowerPoint PPT Presentation

Nov 21, 2023 574 likes •1.39k views

How far can client-only solutions go for mobile browser speed? Zhen Wang , Felix Xiaozhu Lin, Lin Zhong, Mansoor Chishtie Rice Efficient Computing Group - http://recg.org Mobile browsers are slow Average browser delay: 5 seconds Commercial

slide-1
SLIDE 1

How far can client-only solutions go for mobile browser speed?

Zhen Wang, Felix Xiaozhu Lin, Lin Zhong, Mansoor Chishtie Rice Efficient Computing Group - http://recg.org

slide-2
SLIDE 2

Mobile browsers are slow

  • Average browser delay: 5 seconds
  • Commercial impact

– Google: 500 ms => 20% traffic loss – Amazon: 100 ms => 1% sales loss

2

  • R. Kohavi, R. M. Henne, and D. Sommerfield, "Practical guide to controlled experiments
  • n the web: listen to your customers not to the hippo," in Proceedings of the 13th ACM

SIGKDD international conference on Knowledge discovery and data mining, 2007.

slide-3
SLIDE 3

Why is mobile browser slow?

3

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-4
SLIDE 4

Why is mobile browser slow?

4

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Request

slide-5
SLIDE 5

Why is mobile browser slow?

5

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Redirections

slide-6
SLIDE 6

Why is mobile browser slow?

6

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Data packets

slide-7
SLIDE 7

Why is mobile browser slow?

7

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Parsing Scripting

slide-8
SLIDE 8

Why is mobile browser slow?

8

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Subresources

slide-9
SLIDE 9

Why is mobile browser slow?

9

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Rendering

slide-10
SLIDE 10

Why is mobile browser slow?

10

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

This is part of resource loading. It is mainly spent on network.

slide-11
SLIDE 11

Computation does not matter

11

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Speed up layout operation Shrink green boxes…

slide-12
SLIDE 12

Computation does not matter

12

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Shift to the left Shrink

slide-13
SLIDE 13

Computation does not matter

13

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Shift to the left Shrink They will not move

slide-14
SLIDE 14

Computation does not matter

14

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Original

slide-15
SLIDE 15

Computation does not matter

15

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Original

After shrink and shift

New

slide-16
SLIDE 16

Resource loading matters

16

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Long network round trip time (RTT)

slide-17
SLIDE 17

Resource loading matters

17

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

So many resources are needed …

  • JavaScript, CSS, image files
slide-18
SLIDE 18

Existing solutions

  • Infrastructure support

–Difficult to deploy –Depend on server or proxy capability –Violate end-to-end security

18

slide-19
SLIDE 19

Client-only approaches

–Caching –Prefetching

19

slide-20
SLIDE 20

Client-only approaches

–Caching –Prefetching

20

slide-21
SLIDE 21

Understanding mobile users

  • 24 iPhone 3GS users
  • Feb. 2010 to Feb. 2011
  • Timestamp and URL

21

slide-22
SLIDE 22

Understanding mobile users

  • Top 10 websites account for over 80% of visits
  • 75% of the webpage visits are first-time
  • 65% of the subresource visits are re-visits

22

slide-23
SLIDE 23

Client-only approaches

–Caching –Prefetching

23

slide-24
SLIDE 24

Caching is not effective

  • Theory: Cache helps by reducing network activity
  • Reality:

70% of resource requests incur network activity

– Half of them are due to cache revalidation – Cache revalidation saves bandwidth, not RTT

24

slide-25
SLIDE 25

Web prefetching

25

Predict and download the right webpage while the user is still reading the left webpage.

slide-26
SLIDE 26

Web prefetching is not effective

  • Browser delay reduction: 1%
  • Unnecessary data usage: 84%
  • Reason

– 75% of webpage visits are first-time – > hard to predict the next visit

26

slide-27
SLIDE 27

Existing client-only solutions

  • Caching is not effective

– Resources quickly expire and need revalidation

  • Web prefetching is even harmful

– User behavior is not very predictable

27

slide-28
SLIDE 28

Existing client-only solutions

  • Caching is not effective

– Resources quickly expire and need revalidation

  • Web prefetching is even harmful

– User behavior is not very predictable

28

slide-29
SLIDE 29

Our insight

29

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Intra-group dependency

slide-30
SLIDE 30

Our insight

30

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Inter-group dependency

slide-31
SLIDE 31

Our insight

31

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Single network connection for

  • ver 2 seconds!
slide-32
SLIDE 32

Our insight

32

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Single network connection for

  • ver 2 seconds!
slide-33
SLIDE 33

Our insight

33

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Single network connection for

  • ver 2 seconds!
slide-34
SLIDE 34

Speculative loading

34

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-35
SLIDE 35

Speculative loading

35

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-36
SLIDE 36

Speculative loading

36

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Browser Delay Reduction

slide-37
SLIDE 37

Speculative loading

37

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Browser Delay Reduction

slide-38
SLIDE 38

How is a website structured?

38

Website Node Subdomain Node Webpage Node Subresource Node

shared by multiple webpages

slide-39
SLIDE 39

How is a website structured?

39

Website Node Subdomain Node Webpage Node Subresource Node

shared by multiple webpages More sharing -> Easier subresource prediction

slide-40
SLIDE 40

How is a website structured?

40

Website Node Subdomain Node Webpage Node Subresource Node

shared by multiple webpages More sharing -> Easier subresource prediction

76% of the subresources of a webpage are shared by other webpages in the same website.

slide-41
SLIDE 41

Predict webpages a user will visit User behavior prediction Predict subresources a webpage will need Server behavior prediction

41

Web prefetching vs. Speculative loading

slide-42
SLIDE 42

Predict webpages a user will visit User behavior prediction Predict subresources a webpage will need Server behavior prediction

42

Web prefetching vs. Speculative loading

Much easier!

slide-43
SLIDE 43

Predict webpages a user will visit User behavior prediction Predict subresources a webpage will need Server behavior prediction

43

Web prefetching vs. Speculative loading

Much easier!

75% 35% Webpage Subresource

First-time visits

slide-44
SLIDE 44

How much can speculative loading speed up a mobile browser?

–Upper bound through simulation –Real world measurement

44

slide-45
SLIDE 45

Upper bound of improvement

45

3.2 s 3.2 s 6.3 s 4.3 s 6.7 s 4.6 s Legacy Speculative Fresh Cache Expired Cache Empty Cache

slide-46
SLIDE 46

Upper bound of improvement

46

3.2 s 3.2 s 6.3 s 4.3 s 6.7 s 4.6 s Legacy Speculative Fresh Cache Expired Cache Empty Cache

slide-47
SLIDE 47

Upper bound of improvement

47

3.2 s 3.2 s 6.3 s 4.3 s 6.7 s 4.6 s Legacy Speculative Fresh Cache Expired Cache Empty Cache

slide-48
SLIDE 48

Upper bound of improvement

48

3.2 s 3.2 s 6.3 s 4.3 s 6.7 s 4.6 s Legacy Speculative Fresh Cache Expired Cache Empty Cache

Realistic Cache 1.4 s (22%)

slide-49
SLIDE 49

49

Tempo

A speculative mobile browser

slide-50
SLIDE 50

Tempo architecture

50

Temporary Cache WebKit

Rest of the Android mobile browser

Update Service Speculative Loader Metadata Repository Cache Tempo Enhancement

slide-51
SLIDE 51

51

Temporary Cache Update Service Speculative Loader Metadata Repository

Store each website’s resource graph Predict and load subresources speculatively Update and trim metadata repository Store resources with “no-cache” header

Tempo architecture

slide-52
SLIDE 52

52

Temporary Cache Update Service Speculative Loader Metadata Repository

Website Resource graph google.com Google resource graph … … cnn.com CNN resource graph

Website node

Metadata Repository

Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image) Type: Website URL: cnn.com Last visit time Children: … Type: Subdomain URL: m.cnn.com Last visit time Children: … Type: Webpage URL: http://m.cnn.com/... Last visit time Children: … Type: Subresource URL: … Last visit time Parents: … Number of visits

slide-53
SLIDE 53

53

Speculative Loader Metadata Repository

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources

Temporary Cache Update Service

slide-54
SLIDE 54

54

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • Revisit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-55
SLIDE 55

55

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • Revisit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-56
SLIDE 56

56

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • Revisit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-57
SLIDE 57

57

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • First-time visit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-58
SLIDE 58

58

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • First-time visit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-59
SLIDE 59

59

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • First-time visit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-60
SLIDE 60

60

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • First-time visit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-61
SLIDE 61

61

Website node Subdomain nodes Webpage nodes Sub-resource nodes (JavaScript, CCS, Image)

  • Input: URL of the webpage
  • Output: predicted subresources
  • First-time visit

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-62
SLIDE 62

62

Rank subresources

– Number of parents (large > small) – File types (JS > CSS > image) – Number of visits (large > small) – URL length (short > long)

Speculative Loader Metadata Repository Temporary Cache Update Service

slide-63
SLIDE 63

Evaluation of Tempo

–Subresource prediction –Browser delay reduction –Overhead

63

slide-64
SLIDE 64

Subresource prediction

64

Requested Predicted

slide-65
SLIDE 65

Subresource prediction

65

Requested Predicted Requested & Predicted

slide-66
SLIDE 66

High prediction accuracy

66

Requested Requested & Predicted 79%

High browser delay reduction

Predicted

slide-67
SLIDE 67

High prediction accuracy

67

Predicted Requested & Predicted 70%

Low additional data usage

Requested

slide-68
SLIDE 68

Browser delay reduction

  • Lab experiments

–Webpage revisits –First-time visits

  • Field trial

68

slide-69
SLIDE 69

Webpage revisits

69

4.4 s 4.3 s 6 s 4.6 s 6.7 s 5.2 s Legacy Tempo Fresh Cache Expired Cache Empty Cache

slide-70
SLIDE 70

Webpage revisits

70

4.4 s 4.3 s 6 s 4.6 s 6.7 s 5.2 s Legacy Tempo Fresh Cache Expired Cache Empty Cache

slide-71
SLIDE 71

Webpage revisits

71

4.4 s 4.3 s 6 s 4.6 s 6.7 s 5.2 s Legacy Tempo Fresh Cache Expired Cache Empty Cache

slide-72
SLIDE 72

Webpage revisits

72

4.4 s 4.3 s 6 s 4.6 s 6.7 s 5.2 s Legacy Tempo Fresh Cache Expired Cache Empty Cache

Realistic Cache 1 s (20%)

slide-73
SLIDE 73

4.5 s 4.3 s 4.6 s 3.6 s 6.9 s 5.8 s Legacy Tempo Fresh Cache Expired Cache Empty Cache

First-time visits

73

slide-74
SLIDE 74

Field trial

  • First week

– Start with empty cache – Enable speculative loading

  • Second week

– Keep the warm cache – Disable speculative loading

  • The benefit we attribute to speculative loading

will be unlikely from the caching effect

74

slide-75
SLIDE 75

Field trial

75

3.9 s 4.3 s 1st Week 2nd Week With speculative loading Without speculative loading

slide-76
SLIDE 76

Field trial

  • Speculative loading needs some time to

construct the resource graph…

  • How about 5 days’ training?

76

slide-77
SLIDE 77

Field trial

77

2.9 s 4.3 s Day 6 & 7 of 1st Week 2nd Week With speculative loading Without speculative loading

slide-78
SLIDE 78

Low overhead

  • Prediction Error

– Occupy TCP connection (still > 1s reduction) – Additional data usage (< 1MB per week)

  • Storing metadata repository

– Additional storage (< 200KB after a year)

78

slide-79
SLIDE 79

Conclusion

  • Client-only solutions can reduce mobile browser

delay by 1.4 second at most

  • Tempo, a speculative mobile browser, can reduce

mobile browser delay by 1 second (~20%)

– Google: increase 40% traffic – Amazon: increase 10% sales

79

slide-80
SLIDE 80

Conclusion

  • Client-only solutions can reduce mobile browser

delay by 1.4 second at most

  • Tempo, a speculative mobile browser, can reduce

mobile browser delay by 1 second (~20%)

– Google: increase 40% traffic – Amazon: increase 10% sales

80

Web usage data available for download: http://www.owlnet.rice.edu/~zw3/tempo.html