WProfX: A Fine-grained Visualization Tool for Web Page Loads

Abstract

Web page performance is crucial in today's Internet ecosystem, and Web developers use various developer tools to analyze their page load performance. However, existing tools cannot be used to identify the critical bottlenecks during the page load process. In this work, we design an online tool called WProfX that allows Web developers to visually identify bottlenecks in their page structure. The key to WProfX is that unlike existing Web performance tools, WProfX not only visualizes the page load activity timings, but also extracts the dependencies between the activities. Using the dependency structure, WProfX identifies the critical bottleneck activities. This lets a developer quickly identify why their page is loading slow and conduct what-if analyses to study the effect of different optimizations. WProfX uses low-level tracing information exposed by most major browsers to extract the relationship between page load activities. The result is that WProfX works with most major browsers and newer browser versions. WProfX visualizes the page load process as a dependency graph of semantically meaningful Web activities and identifies the critical bottlenecks. We evaluate WProfX with 14 Web developers who perform three what-if analysis tasks involving identifying the page load bottleneck and evaluating the effect of a page optimization. All the participants were able to complete the tasks with WProfX, compared to less than 60% when using the popular developer tools available today. WProfX is currently being used by Web developers in a large telecom and at a Silicon Valley startup.