Speeding up Web Page Loads with Shandian. Sophia Wang University of Washington

Size: px

Start display at page:

Download "Speeding up Web Page Loads with Shandian. Sophia Wang University of Washington"

Primrose Dickerson
5 years ago
Views:

1 Speeding up Web Page Loads with Shandian Sophia Wang University of Washington

2 Why is page load time (PLT) slow? 3/27/16 2

3 <html> <body onload= done(); > <link src= 1.css > <script src= d3.js ></script> <script src= 2.js ></script> <div id= content ></div> </body> </html> 3/27/16 3

4 Elapsed Time 3/27/16 4

5 html Elapsed Time 3/27/16 Network Computation 5

6 html css Elapsed Time 3/27/16 Network Computation Dependency 6

7 html css js Components that access to the same resource can t execute at the same time Elapsed Time 3/27/16 Network Computation Dependency 7

8 html css js js Elapsed Time 3/27/16 Network Computation Dependency 8

9 html A simple css page incurs complex load process, js mainly due to interactions between js HTML/JS/CSS. Elapsed Time Page load 3/27/16 Network Computation Dependency 9

10 How much can SPDY help PLT? 3/27/16 10

11 html css js js Elapsed Time Page load 3/27/16 11

12 html css js js Elapsed Time Page load 3/27/16 Network Computation Dependency 12

13 html css A technique that helps one factor of PLT is js hard to help the overall PLT. js Elapsed Time Page load 3/27/16 Network Computation Dependency 13

14 What does the simplest dependency graph look like? 3/27/16 14

15 ??? css js js Elapsed Time Page load 3/27/16 Network Computation Dependency 15

16 ??? css Can we js make every Web page look like this? js Elapsed Time Page load Time to interact 3/27/16 Network Computation Dependency 16

17 Yes, we want to make every page like this, automatically. 3/27/16 17

18 Approach: Split Browser Preprocess Web pages on a proxy server to simplify the client-side page load process 3/27/16 18

19 Approach: Split Browser Preprocess Web pages on a proxy server according to whether they are used initially??? css js js Load-time state Used in an initial page load Display as fast as possible Elapsed Time Page load Time to interact 3/27/16 19

20 Approach: Split Browser Preprocess Web pages on a proxy server according to whether they are used initially Post-load state??? Not css used in an initial page load js Ensure correctness of future jsinteractions, and compatibility with existing technologieselapsed Time Page load Time to interact 3/27/16 20

21 Outline Load-time state Post-load state Deployment and implementation Evaluation 3/27/16 21

22 Outline Load-time state Post-load state Deployment and implementation Evaluation 3/27/16 22

23 Load-time State Goal Display as fast as possible Approach Eliminate both contents and computation of JS and CSS on the client as many as possible 3/27/16 23

24 Loading load-time state { loadtimestate :{ css :[ #main{font-size:12px;}"], html :{ children : [{ tagname : body,... children : [..., { tagname : div, id : main, css :[0] }]}]}} 3/27/16 24

25 Loading load-time state { loadtimestate :{ css :[ #main{font-size:12px;}"], html :{ children : [{ tagname : body,... children : A list of [..., matched { CSS rules tagname : div, id : main, css :[0] }]}]}} 3/27/16 25

26 Loading load-time state { loadtimestate :{ css :[ #main{font-size:12px;}"], html :{ children : [{ tagname : body,... children : [..., { tagname : div, id : main, css :[0] }]}]}} Visible HTML elements 3/27/16 26

27 Loading load-time state { loadtimestate :{ css :[ #main{font-size:12px;}"], html :{ children : [{ tagname : body,... children : [..., { tagname : div, id : main, css :[0] }]}]}} Which HTML element matches which CSS rules 3/27/16 27

28 Loading load-time state??? css js js Elapsed Time Page load Network Computation Dependency 3/27/16 28

29 Outline Load-time state Post-load state Deployment and implementation Evaluation 3/27/16 29

30 Post-load state Goals Correctness of future interactions Requirement: Post-load and load-time state contain full state of a Web page Compatibility Requirement: Post-load state contains unmodified JS/CSS snippets 3/27/16 30

31 Vanilla post-load state The entire Web page itself Pros Easy to ensure correctness of interactions and compatibility with caching/cdn Cons Redundant contents and computation from loadtime state From here, how much can we improve? 3/27/16 31

32 What s equivalent to eval ing this CSS? #main { font-size:12px; } #main { font-size:12px; } #main { font-size:12px; } 3/27/16 32

33 What s equivalent to eval ing this CSS? #main { font-size:12px; } #main { font-size:12px; } #main { font-size:12px; } #main { font-size:12px; } 3/27/16 33

34 What s equivalent to eval ing this JS? a += hello world!\n a += hello world!\n a += hello world!\n 3/27/16 34

$What s equivalent to eval ing this JS? a += hello world!\n a += hello world!$

35 What s equivalent to eval ing this JS? a += hello world!\n a += hello world!\n a += hello world!\n a += hello world!\n + hello world!\n + hello world!\n 3/27/16 35

36 What s equivalent to eval ing this JS? function add(a, b) { return a + b; } function add(a, b) { return a + b; } function add(a, b) { return a + b; } 3/27/16 36

37 What s equivalent to eval ing this JS? function add(a, b) { return a + b; } function add(a, b) { return a + b; } function add(a, b) { return a + b; } function add(a, b) { return a + b; } 3/27/16 37

38 Post-load state Exploit the idempotency of evaluating CSS rules and JavaScript functions/statements Eliminate redundant content that appeared in load-time state Capture results of non-idempotent JS statements 3/27/16 38

39 Outline Load-time state Post-load state Deployment and implementation Evaluation 3/27/16 39

40 Deployment How to fast load on the proxy server? Use a beefy server Co-locate with Web front ends As part of the website: reverse proxy As a 3 rd -party service: cloud servers Web server html Proxy server Client css js Edge cache image video CDNs 3/27/16 40

41 Implementation Server extension Chrome s content_shell Only handle HTML/JS/CSS Client browser Chrome JSON lexer, Blink, V8 3/27/16 41

42 Outline Load-time state Post-load state Deployment and implementation Evaluation 3/27/16 42

43 Experimental setup Server: 2.4GHz 16 core CPU, 16GB memory Clients Mobile: Nexus S, 1GHz Cortex-A8 CPU, 512MB RAM Desktop: Linux VM, 2GHz CPU, 1GB memory Top 100 Web pages 3/27/16 43

44 PLT on mobile Absolute PLTs (seconds) Chrome SplitBrowser Shandian helps 60% in the median case 3/27/16 44

45 Small gap for 1 Shandian CDF PLT w/ varying RTT Increased gap 0, Chrome for Chrome 0, SP 200ms, Chrome 200ms, SP PLT Unlike Chrome, Shandian is not sensitive to RTT, due to simplified page load process 3/27/16 45

46 PLT w/ varying CPU 1 CDF GHz, Chrome 2GHz, SP 1.5GHz, Chrome 1.5GHz, SP 1GHz, Chrome 1GHz, SP PLT CPU has the same amount of impact for both Chrome and Shandian 3/27/16 46

47 More results PLT breakdowns Time spent on proxy server is negligible Most time is spent on client Page size Shandianincreases page size by 1% after applying gzip compression 3/27/16 47

48 Difference from related work Amazon Silk, Opera mini Our client can run JavaScript We place proxy servers near Web servers Prioritizing resources (server push, Klotski) We remove page load dependencies on the client 3/27/16 48

49 Summary Split the page state according to whether they are used for an initial page load The dependency graph until the page is loaded is fairly simple Improve PLT by more than half consistently for various settings Is compatible with caching/cdns 3/27/16 49

PARCEL: Proxy Assisted BRowsing in Cellular networks for Energy and Latency reduction

PARCEL: Proxy Assisted BRowsing in Cellular networks for Energy and Latency reduction Ashiwan Sivakumar 1, Shankaranarayanan PN 1, Vijay Gopalakrishnan 2, Seungjoon Lee 3*, Sanjay Rao 1 and Subhabrata