skip to main content
research-article
Open Access

Fusing Speed Index during Web Page Loading

Published:28 February 2022Publication History
Skip Abstract Section

Abstract

With conventional web page load metrics (e.g., Page Load Time) being blamed for deviating from actual user experiences, in recent years a more sensible and complex metric called Speed Index (SI) has been widely adopted to measure the user's quality of experience (QoE). In brief, SI indicates how quickly a page is filled up with above-the-fold visible elements (or crucial elements for short). To date, however, SI has been used as a metric for performance evaluation, rather than as an explicit heuristic to improve page loading. To demystify this, we examine the entire loading process of various pages and ascribe such incapability to three-fold fundamental uncertainties in terms of network, browser execution, and viewport size. In this paper, we design SipLoader, an SI-oriented page load scheduler through a novel cumulative reactive scheduling framework. It does not attempt to deal with uncertainties in advance or in one shot, but schedules page loading by "repairing" the anticipated (nearly) SI-optimal scheduling when uncertainties actually occur. This is achieved with a suite of efficient designs that fully exploit the cumulative nature of SI calculation. Evaluations show that SipLoader improves the median SI by 41%, and provides 1.43 times to 1.99 times more benefits than state-of-the-art solutions.

References

  1. 2007. Liquid Layout. https://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS-20071102/G146.html.Google ScholarGoogle Scholar
  2. 2016. Speed Index: A Key Metric for the User Experience. https://www.fasterize.com/en/blog/speed-index-a-keymetric- for-the-user-experience/.Google ScholarGoogle Scholar
  3. 2016. Speedline. https://github.com/paulirish/speedline.Google ScholarGoogle Scholar
  4. 2017. Understanding Speed Index. https://www.catchpoint.com/blog/speed-index.Google ScholarGoogle Scholar
  5. 2019. How to Use Google's Speed Index to Improve Wordpress Performance. https://wpmudev.com/blog/speed-indexwordpress/.Google ScholarGoogle Scholar
  6. 2019. Reduce the Scope and Complexity of Style Calculations. https://developers.google.com/web/fundamentals/per formance/rendering/reduce-the-scope-and-complexity-of-style-calculations.Google ScholarGoogle Scholar
  7. 2020. Responsive Web Design Basics. https://web.dev/responsive-web-design-basics/.Google ScholarGoogle Scholar
  8. 2020. Time to Largest Paint. https://web.dev/lcp/.Google ScholarGoogle Scholar
  9. 2021. Alexa Top Sites. https://www.alexa.com/topsites.Google ScholarGoogle Scholar
  10. 2021. Amazon. https://www.amazon.com/.Google ScholarGoogle Scholar
  11. 2021. BBC. https://www.bbc.com/.Google ScholarGoogle Scholar
  12. 2021. Beautiful Soup Documentation. https://www.crummy.com/software/BeautifulSoup/bs4/doc/.Google ScholarGoogle Scholar
  13. 2021. Chrome DevTools. https://developer.chrome.com/docs/devtools/.Google ScholarGoogle Scholar
  14. 2021. Chrome DevTools Protocol. https://chromedevtools.github.io/devtools-protocol/.Google ScholarGoogle Scholar
  15. 2021. Elements' Bounding Rectangle. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClien tRect.Google ScholarGoogle Scholar
  16. 2021. Getting Started with Headless Chrome. https://developers.google.com/web/updates/2017/04/headless-chrome.Google ScholarGoogle Scholar
  17. 2021. Lighthouse. https://developers.google.com/web/tools/lighthouse.Google ScholarGoogle Scholar
  18. 2021. MSN. https://www.msn.com.Google ScholarGoogle Scholar
  19. 2021. MutationObserver API. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.Google ScholarGoogle Scholar
  20. 2021. Page Load Time. https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API.Google ScholarGoogle Scholar
  21. 2021. Pinterest. https://www.pinterest.com/.Google ScholarGoogle Scholar
  22. 2021. Puppeteer: Headless Chrome Node.js API. https://github.com/puppeteer/puppeteer.Google ScholarGoogle Scholar
  23. 2021. Speed Index. https://web.dev/speed-index/.Google ScholarGoogle Scholar
  24. 2021. Time to First Byte. https://developer.mozilla.org/en-US/docs/Glossary/time_to_first_byte.Google ScholarGoogle Scholar
  25. 2021. Time to First Paint. https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming.Google ScholarGoogle Scholar
  26. 2021. Using Liquid Layout. https://www.w3.org/WAI/WCAG21/Techniques/general/G146.html.Google ScholarGoogle Scholar
  27. 2021. WebAssembly. https://webassembly.org/.Google ScholarGoogle Scholar
  28. 2021. WebPageTest Documentation. https://docs.webpagetest.org/metrics/speedindex/.Google ScholarGoogle Scholar
  29. Michael Butkiewicz, Daimeng Wang, Zhe Wu, Harsha V Madhyastha, and Vyas Sekar. 2015. Klotski: Reprioritizing Web Content to Improve User Experience on Mobile Devices. In Proc. of NSDI. USENIX, 439--453.Google ScholarGoogle Scholar
  30. Chandra Chekuri and Rajeev Motwani. 1999. Precedence Constrained Scheduling to Minimize Sum of Weighted Completion Times on a Single Machine. Discrete Applied Mathematics 98, 1 (1999), 29--38.Google ScholarGoogle ScholarDigital LibraryDigital Library
  31. Thomas H Cormen, Charles E Leiserson, Ronald L Rivest, and Clifford Stein. 2009. Introduction to Algorithms. MIT.Google ScholarGoogle Scholar
  32. Diego da Hora, Dario Rossi, Vassilis Christophides, and Renata Teixeira. 2018. A Practical Method for Measuring Web Above-the-Fold Time. In Proc. of SIGCOMM Conference on Posters and Demos. ACM, 105--107.Google ScholarGoogle ScholarDigital LibraryDigital Library
  33. Diego Neves da Hora, Alemnew Sheferaw Asrese, Vassilis Christophides, Renata Teixeira, Dario Rossi, Vassilis Christophides, Renata Teixeira, and Dario Rossi. 2018. Narrowing the Gap Between QoS Metrics and Web QoE Using Above-the-Fold Metrics. In Proc. of PAM, Vol. 10771. Springer, 31--43.Google ScholarGoogle Scholar
  34. Sebastian Egger, Peter Reichl, Tobias Hosfeld, and Raimund Schatz. 2012. "Time Is Bandwidth"? Narrowing the Gap Between Subjective Time Perception and Quality of Experience. In Proc. of ICC. IEEE, 1325--1330.Google ScholarGoogle ScholarCross RefCross Ref
  35. Qingzhu Gao, Prasenjit Dey, and Parvez Ahammad. 2017. Perceived Performance of Top Retail Webpages in the Wild. ACM SIGCOMM Computer Communication Review 47, 5 (2017), 42--47.Google ScholarGoogle ScholarDigital LibraryDigital Library
  36. Brian Groelinger. 2019. Blocking: The Web Performance Villain. https://blog.bluetriangle.com/blocking-web-perfor mance-villain.Google ScholarGoogle Scholar
  37. Willy Herroelen and Roel Leus. 2005. Project Scheduling under Uncertainty: Survey and Research Potentials. European Journal of Operational Research 165, 2 (2005), 289--306.Google ScholarGoogle Scholar
  38. Byungjin Jun, Fabián E. Bustamante, Sung Yoon Whang, and Zachary S. Bischof. 2019. AMP up Your Mobile Web Experience: Characterizing the Impact of Google's Accelerated Mobile Project. In Proc. of MobiCom. ACM, 1--14.Google ScholarGoogle Scholar
  39. Nikhil Kansal, Murali Ramanujam, and Ravi Netravali. 2021. Alohamora: Reviving HTTP/2 Push and Preload by Adapting Policies On the Fly. In Proc. of NSDI. USENIX, 269--287.Google ScholarGoogle Scholar
  40. Conor Kelton, Jihoon Ryoo, Aruna Balasubramanian, and Samir R. Das. 2017. Improving User Perceived Page Load Time Using Gaze. In Proc. of NSDI. USENIX, 545--559. Proc. ACM Meas. Anal. Comput. Syst., Vol. 6, No. 1, Article 23. Publication date: March 2022. Fusing Speed Index during Web Page Loading 23:23Google ScholarGoogle Scholar
  41. Ronny Ko, James Mickens, Blake Loring, and Ravi Netravali. 2021. Oblique: Accelerating Page Loads Using Symbolic Execution. In Proc. of NSDI. USENIX, 289--302.Google ScholarGoogle Scholar
  42. Eugene L Lawler. 1978. Sequencing Jobs to Minimize Total Weighted Completion Time Subject to Precedence Constraints. In Algorithmic Aspects of Combinatorics. Vol. 2. Elsevier, 75--90.Google ScholarGoogle Scholar
  43. Zhenhua Li, Weiwei Wang, Tianyin Xu, Xin Zhong, Xiang-Yang Li, Yunhao Liu, Christo Wilson, and Ben Y Zhao. 2016. Exploring Cross-Application Cellular Traffic Optimization with Baidu Trafficguard. In Proc. of NSDI. USENIX, 61--76.Google ScholarGoogle Scholar
  44. Shaghayegh Mardani, Ayush Goel, Ronny Ko, Harsha V Madhyastha, and Ravi Netravali. 2021. Horcrux: Automatic JavaScript Parallelism for Resource-Efficient Web Computation. In Proc. of OSDI. USENIX, 461--477.Google ScholarGoogle Scholar
  45. Shaghayegh Mardani, Mayank Singh, and Ravi Netravali. 2020. Fawkes: Faster Mobile Page Loads via App-Inspired Static Templating. In Proc. of NSDI. USENIX, 879--894.Google ScholarGoogle Scholar
  46. Javad Nejati and Aruna Balasubramanian. 2016. An In-Depth Study of Mobile Browser Performance. In Proc. of WWW. ACM, 1305--1315.Google ScholarGoogle ScholarDigital LibraryDigital Library
  47. Javad Nejati and Aruna Balasubramanian. 2020. WProfX: A Fine-Grained Visualization Tool forWeb Page Loads. ACM Human-Computer Interaction 4, EICS (2020), 1--22.Google ScholarGoogle Scholar
  48. Ravi Netravali, Ameesh Goyal, James Mickens, and Hari Balakrishnan. 2016. Polaris: Faster Page Loads Using Fine-Grained Dependency Tracking. In Proc. of NSDI. USENIX, 123--136.Google ScholarGoogle Scholar
  49. Ravi Netravali and James Mickens. 2018. Prophecy: Accelerating Mobile Page Loads Using Final-State Write Logs. In Proc. of NSDI. USENIX, 249--266.Google ScholarGoogle Scholar
  50. Ravi Netravali, Vikram Nathan, James Mickens, and Hari Balakrishnan. 2018. Vesper: Measuring Time-to-Interactivity for Web Pages. In Proc. of NSDI. USENIX, 217--231.Google ScholarGoogle Scholar
  51. Ravi Netravali, Anirudh Sivaraman, Somak Das, Ameesh Goyal, Keith Winstein, James Mickens, and Hari Balakrishnan. 2015. Mahimahi: Accurate Record-and-Replay for HTTP. In Proc. of ATC. USENIX, 417--429.Google ScholarGoogle Scholar
  52. Ravi Netravali, Anirudh Sivaraman, James Mickens, and Hari Balakrishnan. 2019. WatchTower: Fast, Secure Mobile Page Loads Using Remote Dependency Resolution. In Proc. of MobiSys. ACM, 430--443.Google ScholarGoogle ScholarDigital LibraryDigital Library
  53. Joseph o'Rourke. 1998. Computational Geometry in C. Cambridge University.Google ScholarGoogle Scholar
  54. Behnam Pourghassemi, Jordan Bonecutter, Zhou Li, and Aparna Chandramowlishwaran. 2021. adPerf: Characterizing the Performance of Third-Party Ads. In Proc. of SIGMETRICS. ACM, 37--38.Google ScholarGoogle ScholarDigital LibraryDigital Library
  55. Shankaranarayanan Puzhavakath Narayanan, Yun Seong Nam, Ashiwan Sivakumar, Balakrishnan Chandrasekaran, Bruce Maggs, and Sanjay Rao. 2016. Reducing Latency Through Page-Aware Management of Web Objects by Content Delivery Networks. In Proc. of SIGMETRICS. ACM, 89--100.Google ScholarGoogle Scholar
  56. V Ramasubramanian and Kuldip K Paliwal. 1992. Fast K-Dimensional Tree Algorithms for Nearest Neighbor Search with Application to Vector Quantization Encoding. IEEE Transactions on Signal Processing 40, 3 (1992), 518--531.Google ScholarGoogle ScholarDigital LibraryDigital Library
  57. Vaspol Ruamviboonsuk, Ravi Netravali, Muhammed Uluyol, and Harsha V. Madhyastha. 2017. Vroom: Accelerating the Mobile Web with Server-Aided Dependency Resolution. In Proc. of SIGCOMM. ACM, 390--403.Google ScholarGoogle Scholar
  58. Manuel Serrano. 2018. Javascript AOT Compilation. In Proc. of DLS. ACM, 50--63.Google ScholarGoogle ScholarDigital LibraryDigital Library
  59. Ashiwan Sivakumar, Chuan Jiang, Yun Seong Nam, Shankaranarayanan Puzhavakath Narayanan, Vijay Gopalakrishnan, Sanjay G. Rao, Subhabrata Sen, Mithuna Thottethodi, and T. N. Vijaykumar. 2017. NutShell: Scalable Whittled Proxy Execution for Low-Latency Web over Cellular Networks. In Proc. of MobiCom. ACM, 448--461.Google ScholarGoogle Scholar
  60. Matteo Varvello, Jeremy Blackburn, David Naylor, and Konstantina Papagiannaki. 2016. EYEORG: A Platform for Crowdsourcing Web Quality of Experience Measurements. In Proc. of CoNEXT. ACM, 399--412.Google ScholarGoogle ScholarDigital LibraryDigital Library
  61. Xiao Sophia Wang, Aruna Balasubramanian, Arvind Krishnamurthy, and David Wetherall. 2013. Demystifying Page Load Performance with WProf. In Proc. of NSDI. USENIX, 473--485.Google ScholarGoogle Scholar
  62. Xiao Sophia Wang, Arvind Krishnamurthy, and David Wetherall. 2016. Speeding up Web Page Loads with Shandian. In Proc. of NSDI. USENIX, 109--122.Google ScholarGoogle Scholar
  63. Jihwan Yeo, Changhyun Shin, and Soo-Mook Moon. 2019. Snapshot-Based Loading Acceleration of Web Apps with Nondeterministic JavaScript Execution. In Proc. of WWW. ACM, 2215--2224.Google ScholarGoogle ScholarDigital LibraryDigital Library
  64. Pengxiong Zhu, Keyu Man, Zhongjie Wang, Zhiyun Qian, Roya Ensafi, J. Alex Halderman, and Haixin Duan. 2020. Characterizing Transnational Internet Performance and the Great Bottleneck of China. In Proc. of SIGMETRICS. ACM, 69--70.Google ScholarGoogle ScholarDigital LibraryDigital Library

Index Terms

  1. Fusing Speed Index during Web Page Loading

        Recommendations

        Comments

        Login options

        Check if you have access through your login credentials or your institution to get full access on this article.

        Sign in

        Full Access

        PDF Format

        View or Download as a PDF file.

        PDF

        eReader

        View online with eReader.

        eReader
        About Cookies On This Site

        We use cookies to ensure that we give you the best experience on our website.

        Learn more

        Got it!