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 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 impact – Google: 500 ms => 20% traffic loss – Amazon: 100 ms => 1% sales loss R. Kohavi, R. M. Henne, and D. Sommerfield, "Practical guide to controlled experiments on 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. 2

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 3

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Request 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 4

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Redirections 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 5

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Data packets 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 6

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Parsing Scripting 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 7

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 Subresources 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 8

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Rendering 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 9

Why is mobile browser slow? Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 This is part of resource loading. 4 It is mainly spent on network. 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 10

Computation does not matter Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Speed up layout operation 4 Shrink green boxes… 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 11

Computation does not matter Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 Shrink 7 8 Shift to the left Resource Loading Parsing Scripting Style Layout Painting 12

Computation does not matter Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 They will not move 5 6 Shrink 7 8 Shift to the left Resource Loading Parsing Scripting Style Layout Painting 13

Computation does not matter Original Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 14

Computation does not matter New Original Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 7 After shrink and shift 8 Resource Loading Parsing Scripting Style Layout Painting 15

Resource loading matters Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 Long network round 5 trip time (RTT) 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 16

Resource loading matters Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 So many resources are needed … 7 - JavaScript, CSS, image files 8 Resource Loading Parsing Scripting Style Layout Painting 17

Existing solutions • Infrastructure support – Difficult to deploy – Depend on server or proxy capability – Violate end-to-end security 18

Client-only approaches – Caching – Prefetching 19

Client-only approaches – Caching – Prefetching 20

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

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

Client-only approaches – Caching – Prefetching 23

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

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

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

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

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

Our insight Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Intra-group dependency 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 29

Our insight Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 Inter-group dependency 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 30

Our insight Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 Single network 5 connection for 6 over 2 seconds! 7 8 Resource Loading Parsing Scripting Style Layout Painting 31

Our insight Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 Single network 5 connection for 6 over 2 seconds! 7 8 Resource Loading Parsing Scripting Style Layout Painting 32

Our insight Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 Single network 5 connection for 6 over 2 seconds! 7 8 Resource Loading Parsing Scripting Style Layout Painting 33

Speculative loading Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 34

Speculative loading Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 7 8 Resource Loading Parsing Scripting Style Layout Painting 35

Speculative loading Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 Browser Delay Reduction 7 8 Resource Loading Parsing Scripting Style Layout Painting 36

Speculative loading Elapsed time (ms) 0 1000 1500 2000 2500 3000 3500 4000 1 2 Resource Group 3 4 5 6 Browser Delay Reduction 7 8 Resource Loading Parsing Scripting Style Layout Painting 37

How is a website structured? Website Node Subdomain Node Webpage Node Subresource Node shared by multiple webpages 38