Javad Nejati
Aruna Balasubramanian
Skip Abstract Section
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.
- Chrome devtools. https://developers.google.com/web/tools/chrome-devtools/. (Accessed on09/19/2018).Google Scholar
- Ericsson mobility report june 2015: http://www.ericsson.com/res/docs/2015/ericsson-mobility-report-june-2015.pdf.Google Scholar
- Firefox and Page Load Speed. https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/.Google Scholar
- Google Pagespeed Insights. https://developers.google.com/speed/pagespeed/insights.Google Scholar
- The new, fast browser for mac, pc and linux | firefox. https://www.mozilla.org/en-US/firefox/. (Accessedon 09/19/2018).Google Scholar
- Page Load Speed Impacts Buying Decisions. https://smallbiztrends.com/2019/02/page-load-speed-impacts-buying-decisions.html.Google Scholar
- PageSpeed Insights. https://developers.google.com/speed/pagespeed/insights/.Google Scholar
- The Trace Event Profiling Tool.https://www.chromium.org/developers/how-tos/trace-event-profiling-tool.Google Scholar
- W3C: Document Object Model.http://www.w3.org/DOM/.Google Scholar
- WebPagetest, Website Performance and Optimization Test. https://www.webpagetest.org.Google Scholar
- A. Abran, A. Khelifi, W. Suryn, and A. Seffah. Usability meanings and interpretations in iso standards. Software quality journal, 11(4):325--338, 2003.Google Scholar
- A. Apaolaza and M. Vigo. Assisted pattern mining for discovering interactive behaviours on the web. International Journal of Human-Computer Studies, 130:196--208, 2019.Google ScholarCross Ref
- P. Baudisch and C. Gutwin. Multiblending: displaying overlapping windows simultaneously without the drawbacks of alpha blending. In Proceedings of the SIGCHI conference on Human factors in computing systems, pages 367--374. ACM,2004.Google ScholarDigital Library
- M. Bostock, V. Ogievetsky, and J. Heer. D3: Data-driven documents.IEEE Trans. Visualization & Comp. Graphics (Proc. InfoVis), 2011.Google Scholar
- M. Butkiewicz, D. Wang, Z. Wu, H. V. Madhyastha, and V. Sekar. Klotski: Reprioritizing web content to improve user experience on mobile devices. In 12th USENIX Symposium on Networked Systems Design and Implementation (NSDI 15), pages 439--453, Oakland, CA, 2015. USENIX Association.Google Scholar
- I. Cho, W. Dou, D. X. Wang, E. Sauda, and W. Ribarsky. Vairoma: A visual analytics system for making sense of places, times, and events in roman history. IEEE Transactions on Visualization and Computer Graphics, 22(1):210--219, 2016.Google ScholarCross Ref
- M. Dasari, C. Kelton, J. Nejati, A. Balasubramanian, and S. R. Das. Demystifying hardware bottlenecks in mobile web quality of experience. In Proceedings of the SIGCOMM Posters and Demos, SIGCOMM Posters and Demos '17, page43--45, New York, NY, USA, 2017. Association for Computing Machinery.Google ScholarDigital Library
- M. Dasari, S. Vargas, A. Bhattacharya, A. Balasubramanian, S. R. Das, and M. Ferdman. Impact of device performance on mobile internet qoe. In Proceedings of the Internet Measurement Conference 2018, pages 1--7. ACM, 2018.Google ScholarDigital Library
- A. Dix. Human-computer interaction. Springer, 2009.Google Scholar
- J. Fulda, M. Brehmel, and T. Munzner. Timeline curator: Interactive authoring of visual timelines from unstructured text. IEEE transactions on visualization and computer graphics, 22(1):300--309, 2016.Google Scholar
- T. Geymayer, M. Steinberger, A. Lex, M. Streit, and D. Schmalstieg. Show me the invisible: visualizing hidden content. In Proceedings of the 32nd annual ACM conference on Human factors in computing systems, pages 3705--3714. ACM, 2014.Google ScholarDigital Library
- U. Goel, M. Steiner, W. Na, M. P. Wittie, M. Flack, and S. Ludin. Are 3 rd parties slowing down the mobile web? In Proceedings of the Eighth Wireless of the Students, by the Students, and for the Students Workshop, pages 18--20. ACM,2016.Google ScholarDigital Library
- Google. Time to interactive. https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/TimeToInteractive.md. (Accessed on 11/31/2019).Google Scholar
- Google. LightHouse. https://developers.google.com/web/tools/lighthouse, 2019.Google Scholar
- T. Grossman, G. Fitzmaurice, and R. Attar. A survey of software learnability: metrics, methodologies and guidelines. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pages 649--658. ACM, 2009.Google ScholarDigital Library
- J. Hibschman and H. Zhang. Unravel: Rapid web application reverse engineering via interaction recording, source tracing, and library detection. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology, pages 270--279. ACM, 2015.Google ScholarDigital Library
- J. Hibschman and H. Zhang. Telescope: Fine-tuned discovery of interactive web ui feature implementation. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology, pages 233--245. ACM, 2016.Google ScholarDigital Library
- D. Imms. Speed index: Measuring page load time a different way. http://bit.ly/2dbuUpr, September 2014.Google Scholar
- C. Kelton, J. Ryoo, A. Balasubramanian, and S. R. Das. Improving user perceived page load times using gaze. In Proceedings of the 11th USENIX Conference on Networked Systems Design and Implementation, NSDI'17, 2017.Google Scholar
- B. Lafreniere and T. Grossman. Blocks-to-cad: A cross-application bridge from minecraft to 3d modeling. In The 31st Annual ACM Symposium on User Interface Software and Technology, pages 637--648. ACM, 2018.Google ScholarDigital Library
- T. D. LaToza and B. A. Myers. Developers ask reachability questions. In Proceedings of the 32Nd ACM/IEEE International Conference on Software Engineering-Volume 1, pages 185--194. ACM, 2010.Google ScholarDigital Library
- Z. Li, M. Zhang, Z. Zhu, Y. Chen, A. Greenberg, and Y.-M. Wang. WebProphet: automating performance prediction for web services. In Proc. of the USENIX conference on Networked Systems Design and Implementation (NSDI), 2010.Google Scholar
- W. McGrath, D. Drew, J. Warner, M. Kazemitabaar, M. Karchemsky, D. Mellis, and B. Hartmann. Bifröst: Visualizing and checking behavior of embedded systems across hardware and software. In Proceedings of the 30th Annual ACM Symposium on User Interface Software and Technology, pages 299--310. ACM, 2017.Google ScholarDigital Library
- K. Mehner. Javis: A uml-based visualization and debugging environment for concurrent java programs. In Software Visualization, pages 163--175. Springer, 2002.Google ScholarCross Ref
- B. Meyer. Object-oriented software construction, volume 2. Prentice hall New York, 1988.Google ScholarDigital Library
- J. Nejati and A. Balasubramanian. An In-depth Study of Mobile Browser Performance. In Proceedings of the 25th International Conference on World Wide Web, WWW '16, pages 1305--1315, Montreal, Quebec, Canada, 2016.Google ScholarDigital Library
- R. Netravali, A. Goyal, J. Mickens, and H. Balakrishnan. Polaris: Faster page loads using fine-grained dependency tracking. In13th USENIX Symposium on Networked Systems Design and Implementation (NSDI 16). USENIX Association.Google Scholar
- R. Netravali and J. Mickens. Prophecy: Accelerating mobile page loads using final-state write logs. In 15th USENIX Symposium on Networked Systems Design and Implementation (NSDI 18), pages 249--266, Renton, WA, 2018. USENIX Association.Google Scholar
- R. Netravali, V. Nathan, J. Mickens, and H. Balakrishnan. Vesper: Measuring time-to-interactivity for web pages. In 15th USENIX Symposium on Networked Systems Design and Implementation (NSDI 18), pages 217--231, Renton, WA, 2018. USENIX Association.Google Scholar
- J. Nielsen.Usability engineering. Elsevier, 1994.Google Scholar
- S. Panicker. W3c paint timing working draft. http://bit.ly/2f2CGSk.Google Scholar
- F. Paternò, A. G. Schiavone, and P. Pitardi. Timelines for mobile web usability evaluation. In Proceedings of the International Working Conference on Advanced Visual Interfaces, pages 88--91, 2016.Google ScholarDigital Library
- M. Pinzger, K. Graefenhain, P. Knab, and H. C. Gall. A tool for visual understanding of source code dependencies. In Program Comprehension, 2008. ICPC 2008. The 16th IEEE International Conference on, pages 254--259. IEEE, 2008.Google ScholarDigital Library
- V. Ruamviboonsuk, R. Netravali, M. Uluyol, and H. V. Madhyastha. Vroom: Accelerating the mobile web with server-aided dependency resolution. In Proceedings of the Conference of the ACM Special Interest Group on Data Communication, pages 390--403. ACM, 2017.Google ScholarDigital Library
- X. S. Wang, A. Balasubramanian, A. Krishnamurthy, and D. Wetherall. Demystify page load performance with wprof. In Proc. of the USENIX conference on Networked Systems Design and Implementation (NSDI), 2013.Google ScholarDigital Library
- X. S. Wang, A. Balasubramanian, A. Krishnamurthy, and D. Wetherall. How speedy is spdy? In Proceedings of the 11thUSENIX Conference on Networked Systems Design and Implementation, NSDI'14, pages 387--399, Berkeley, CA, USA, 2014. USENIX Association.Google ScholarDigital Library
- J. Zhao, S. M. Drucker, D. Fisher, and D. Brinkman. Timeslice: Interactive faceted browsing of timeline data. In Proceedings of the International Working Conference on Advanced Visual Interfaces, AVI '12, pages 433--436, New York,NY, USA, 2012. ACM.Google ScholarDigital Library
- Y. Zhu, J. Yu, and J. Wu. Chroring: A time-oriented visual approach to represent writer's history. Vis. Comput.,32(9):1133--1149, Sept. 2016.Google ScholarDigital Library
Index Terms
- WProfX: A Fine-grained Visualization Tool for Web Page Loads
Recommendations
An In-depth Study of Mobile Browser Performance
WWW '16: Proceedings of the 25th International Conference on World Wide WebMobile page load times are an order of magnitude slower compared to non-mobile pages. It is not clear what causes the poor performance: the slower network, the slower computational speeds, or other reasons. Further, most Web optimizations are designed ...
Protection and communication abstractions for web browsers in MashupOS
SOSP '07: Proceedings of twenty-first ACM SIGOPS symposium on Operating systems principlesWeb browsers have evolved from a single-principal platform on which one site is browsed at a time into a multi-principal platform on which data and code from mutually distrusting sites interact programmatically in a single page at the browser. Today's "...
Protection and communication abstractions for web browsers in MashupOS
SOSP '07Web browsers have evolved from a single-principal platform on which one site is browsed at a time into a multi-principal platform on which data and code from mutually distrusting sites interact programmatically in a single page at the browser. Today's "...
Comments