Demystifying Page Load Performance with WProf

Transcription

1 Demystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind Krishnamurthy, and David Wetherall University of Washington

2 Web is the critical part of the Internet 1

3 Page load is critical Amazon can increase 1% revenue by decreasing page load time by 0.1s. 2

4 Page load is critical but slow Amazon can increase 1% revenue by decreasing page load time by 0.1s. Page load is slow even on top 200 websites 2

5 Page load is critical but slow Amazon can increase 1% revenue by decreasing page load time by 0.1s. Page load is slow even on top 200 websites Median page load time is 3 seconds. 2

6 Page load is critical but slow Amazon can increase 1% revenue by decreasing page load time by 0.1s. Page load is slow even on top 200 websites A few top pages take more than 10 seconds to load. 2

7 Many techniques aim to optimize page load time Optimization techniques Server placement: CDNs Web pages and cache: mod_pagespeed, Silo Application level: SPDY TCP/DNS: TCP fast open, ASAP, DNS preresolution, TCP pre-connect Problem Unclear whether they help or hurt page loads* * * 3

8 Many techniques aim to optimize page load time Optimization techniques Server placement: CDNs Web pages and cache: mod_pagespeed, Silo Application level: SPDY TCP/DNS: TCP fast open, ASAP, DNS preresolution, TCP pre-connect Problem Unclear whether they help or hurt page loads* * * Page load process is poorly understood. 3

9 Difficult to understand page load Factors that affect page load Page structure Inter-dependencies between network and computation activities Browser implementations 4

10 Difficult to understand page load <html> <script src="b.js"></script> <img src="c.png"/> </html> <html> <img src="c.png"/> <script src="b.js"></script> </html> 5

11 Difficult to understand page load html <html> <script src="b.js"></script> <img src="c.png"/> </html> b.js c.png <html> <img src="c.png"/> <script src="b.js"></script> </html> 5

12 Difficult to understand page load html <html> <script src="b.js"></script> <img src="c.png"/> </html> b.js c.png html <html> <img src="c.png"/> <script src="b.js"></script> </html> c.png b.js 5

13 Difficult to understand page load html <html> <script src="b.js"></script> <img src="c.png"/> </html> b.js c.png html <html> <img src="c.png"/> <script src="b.js"></script> </html> c.png b.js Understanding dependencies is the key to understand page load. 5

14 Overview of our work Model the page load process Build the WProf tool Study page load on real pages

15 Overview of our work Model the page load process How a page is loaded? How to infer dependencies? Build the WProf tool Study page load on real pages

16 How a page is loaded 6

17 How a page is loaded Concurrencies among the four components 6

18 How a page is loaded Dependencies: one component can block others 6

19 How a page is loaded A page load starts with a user-initiated request. 6

20 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> Object Loader downloads the corresponding Web page. 6

21 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> Upon receiving the first chunk of the root page, the HTML Parser starts to parse the page. 6

22 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> HTML Parser requests embedded objects, i.e., JavaScript. 6

23 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> main.js... Object Loader requests the inlined JS and sends it for evaluation. 6

24 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> main.js... JS evaluation can modify the DOM and its completion resumes HTML parsing. 6

25 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> HTML continues being parsed and added to the DOM. 6

26 How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> Rendering Engine progressively renders the page (i.e., layout and painting). 6

27 How to infer dependencies Goal Extract as many dependencies as possible across browsers Methodology Design test pages Examine documents Inspect browser code 7

28 How to infer dependencies Goal Extract as many dependencies as possible across browsers Methodology Design test pages Examine documents Inspect browser code 7

29 Reverse engineer page loads with test pages Design test pages 8

30 Reverse engineer page loads with test pages Design test pages HTML JS IMG CSS IMG HTML IMG An example Web page 8

31 Reverse engineer page loads with test pages Design test pages An object follows another HTML JS IMG CSS IMG HTML IMG An example Web page 8

32 Reverse engineer page loads with test pages Design test pages An object follows another An object embeds another HTML JS IMG CSS IMG HTML IMG An example Web page 8

33 Reverse engineer page loads with test pages Design test pages Observe timings from DevTools html HTML js JS img IMG HTML html img IMG JS js 9

34 Reverse engineer page loads with test pages Design test pages Observe timings from DevTools html HTML js JS img IMG HTML html img IMG JS js 9

35 Dependency policy categories Flow dependency Natural order that activities occur 10

36 Dependency policy categories Flow dependency Output dependency Correctness of execution when multiple processes access to the same resource 10

37 Dependency policy categories Flow dependency Output dependency Lazy/Eager binding Tradeoffs between data downloads and page load latencies 10

38 Dependency policy categories Flow dependency Output dependency Lazy/Eager binding Resource constraints Limited computing power or network resources (# TCP conn.) 10

39 Output dependency index.html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/>... 11

40 Output dependency index.html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/>... Elapsed time html 11

41 Output dependency index.html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/>... Elapsed time html c.css 11

44 Output dependency index.html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/>... Elapsed time html c.css f.js 11

47 Dependency policies 12

48 Dependency policies Flow Output Lazy/Eag er binding Resource constraint

49 Dependency policies across browsers Dependency IE Firefox WebKit Output all no O3 no O3 Late binding all all all Eager binding Preloads Preloads Preloads img, js, css img, js, css css, js Net resource 6 conn. 6 conn. 6 conn. 13

50 Dependency policies across browsers Dependency IE Firefox WebKit Output all no O3 no O3 Late binding all all all Eager binding Preloads Preloads Preloads img, js, css img, js, css css, js Net resource 6 conn. 6 conn. 6 conn. O3: CSS downloads and evaluation block HTML parsing. 13

51 Overview of our work Model the page load process Build the WProf tool Profiling in browsers Generating dependency graphs Analyzing critical paths Study page load on real pages

52 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser 14

53 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader 14

54 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

55 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler - Log activity timings - Track dependencies by using HTML tags under parsing when an activity occurs Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

56 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler Lightweight Our evaluation suggests negligible performance overhead. Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

57 WProf architecture Browser Stack Web page instances Browser extension/plug-in framework Native browser WProf profiler Implementation - Built on WebKit - Extended in Chrome and Safari - Written in C++ Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

58 WProf architecture Browser Stack Web page instances Critical paths Browser extension/plug-in framework Native browser Dependency graphs WProf profiler Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

59 WProf architecture Browser Stack Web page instances Critical paths Browser extension/plug-in framework Native browser Dependency graphs WProf profiler Rendering Engine JavaScript Engine CSS Engine HTML Parser Object Loader Activity timing Dependen cies 14

60 Dependency graph <html> <head> <link rel="stylesheet" src="./main.css"> <script src="./main.js" /> </head>  <body onload="..."> <img src="test.png" /> </body> </html> 15

61 Critical path analysis Critical path: the longest bottleneck path. 16

70 Critical path analysis Critical path: the longest bottleneck path. Improving activities off the critical path doesn't help page load. 16

71 Overview of our work Model the page load process Build the WProf tool Study page load with real pages

72 Experimental setup Location UW Seattle campus network Browser WProf-instrumented Chrome Web pages 150 out of top 200 Alexa pages Page load time Minimum out of 5 repeats 17

73 How much does computation contribute to page load time? 18

74 Computation is significant Network Computation Network/Computation as a fraction of page load time 19

75 Computation is significant Network Computation Network/Computation as a fraction of page load time Computation is ~35% of page load time (median) on the critical path. 19

76 How much does caching help page load performance? 20

77 How much does caching help? Caching eliminates 80% Web object loads It doesn't reduce page load time as much 21

78 How much does caching help? Caching eliminates 80% Web object loads It doesn't reduce page load time as much Caching only eliminates 40% Web object loads on the critical path 21

79 Summary of other results Most object downloads are not critical JS blocks parsing on 60% top pages SPDY doesn't help much as expected Minification with mod_pagespeed doesn't reduce received bytes on the critical path 22

80 Related work Industry tools DevTools, Pagespeed Insights Academic WebProphet [NSDI'2010] Only consider network time 23

81 Conclusion Model page load process WProf automatically extracts dependencies and analyzes critical paths WProf can be used to Understand performance of any page load Explain behaviors of current optimizations Perform what-if analysis Project website: wprof.cs.washington.edu 24