Demystifying Page Load Performance with WProf Xiao (Sophia) Wang, Aruna Balasubramanian, Arvind Krishnamurthy, and David Wetherall University of Washington
Web is the critical part of the Internet 1
Page load is critical ● Amazon can increase 1% revenue by decreasing page load time by 0.1s. 2
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
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
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
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 pre- resolution, TCP pre-connect ● Problem ○ Unclear whether they help or hurt page loads* *http://www.guypo.com/technical/not-as-spdy-as-you-thought/. *http://www.stevesouders.com/ 3
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 pre- resolution, TCP pre-connect ● Problem ○ Unclear whether they help or hurt page loads* *http://www.guypo.com/technical/not-as-spdy-as-you-thought/. *http://www.stevesouders.com/ Page load process is poorly understood. 3
Difficult to understand page load ● Factors that affect page load ○ Page structure ○ Inter-dependencies between network and computation activities ○ Browser implementations 4
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
Difficult to understand page load html <html> b.js <script src="b.js"></script> c.png <img src="c.png"/> </html> <html> <img src="c.png"/> <script src="b.js"></script> </html> 5
Difficult to understand page load html <html> b.js <script src="b.js"></script> c.png <img src="c.png"/> </html> html <html> c.png <img src="c.png"/> b.js <script src="b.js"></script> </html> 5
Difficult to understand page load html <html> b.js <script src="b.js"></script> c.png <img src="c.png"/> </html> html <html> c.png <img src="c.png"/> b.js <script src="b.js"></script> </html> Understanding dependencies is the key to understand page load. 5
Overview of our work ● Model the page load process ● Build the WProf tool ● Study page load on real pages
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
How a page is loaded 6
How a page is loaded Concurrencies among the four components 6
How a page is loaded Dependencies: one component can block others 6
How a page is loaded http://www.example.com/ A page load starts with a user-initiated request. 6
How a page is loaded index.html 1 <html> 2 <script src="main.js"/> 3 </html> Object Loader downloads the corresponding Web page. 6
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
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
How a page is loaded index.html main.js 1 <html> ... 2 <script src="main.js"/> 3 </html> Object Loader requests the inlined JS and sends it for evaluation. 6
How a page is loaded index.html main.js 1 <html> ... 2 <script src="main.js"/> 3 </html> JS evaluation can modify the DOM and its completion resumes HTML parsing. 6
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
How a page is loaded index.html http://www.example.com/ 1 <html> 2 <script src="main.js"/> 3 </html> Rendering Engine progressively renders the page (i.e., layout and painting). 6
How to infer dependencies ● Goal ○ Extract as many dependencies as possible across browsers ● Methodology ○ Design test pages ○ Examine documents ○ Inspect browser code 7
How to infer dependencies ● Goal ○ Extract as many dependencies as possible across browsers ● Methodology ○ Design test pages ○ Examine documents ○ Inspect browser code 7
Reverse engineer page loads with test pages ● Design test pages 8
Reverse engineer page loads with test pages ● Design test pages HTML JS IMG CSS IMG HTML IMG An example Web page 8
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
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
Reverse engineer page loads with test pages ● Design test pages ● Observe timings from DevTools html HTML js img JS IMG HTML html img js IMG JS 9
Reverse engineer page loads with test pages ● Design test pages ● Observe timings from DevTools html HTML js img JS IMG HTML html img js IMG JS 9
Dependency policy categories ● Flow dependency ○ Natural order that activities occur 10
Dependency policy categories ● Flow dependency ● Output dependency ○ Correctness of execution when multiple processes access to the same resource 10
Dependency policy categories ● Flow dependency ● Output dependency ● Lazy/Eager binding ○ Tradeoffs between data downloads and page load latencies 10
Dependency policy categories ● Flow dependency ● Output dependency ● Lazy/Eager binding ● Resource constraints ○ Limited computing power or network resources (# TCP conn.) 10
Output dependency index.html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/> ... 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> 3 <script src="f.js"/> ... 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... f.js 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... f.js 11
Output dependency Elapsed time index.html html 1 <html> 2 <link rel="stylesheet" href="c.css"> c.css 3 <script src="f.js"/> ... f.js 11
Dependency policies 12
Dependency policies Flow 6 Output 3 Lazy/Eag er binding 3 Resource constraint 2 12
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
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
Recommend
More recommend
