skip to main content
research-article

JSAnalyzer: A Web Developer Tool for Simplifying Mobile Web Pages through Non-critical JavaScript Elimination

Published:16 November 2022Publication History
Skip Abstract Section

Abstract

The amount of JavaScript used in web pages has substantially grown in the past decade, leading to large and complex pages that are computationally intensive for handheld mobile devices. Due to the increasing usage of these devices to access today’s web, and to accommodate the needs of a large number of mobile web users who solely rely on low-end devices, we propose “JSAnalyzer,” an easy-to-use tool that enables web developers to quickly optimize JavaScript usage in their pages and to generate simpler versions of these pages for mobile web users. JSAnalyzer is motivated by the widespread use of non-critical JavaScript elements, i.e., those that have negligible (if any) impact on the page’s visual content and interactive functionality. JSAnalyzer allows the developer to selectively enable or disable JavaScript elements in any given page while visually observing their impact on the page to (1) accurately identify any non-critical JavaScript elements and (2) create a simplified page with these elements removed. Our quantitative evaluation shows that, given a low-end mobile phone, JSAnalyzer achieves an increase of nearly 90% in Google’s lighthouse performance score while reducing the page load time by 30%. A qualitative study of 22 users shows that the lighter pages produced by JSAnalyzer maintain more than 90% visual similarity compared to the original pages. Moreover, JSAnalyzer was evaluated by 69 developers, showing that it scores nearly 90% in terms of usefulness and usability while retaining the page’s content and functionality. Finally, we show that JSAnalyzer outperforms state-of-the-art solutions in terms of timing speedups and resource savings.

REFERENCES

  1. [1] 2005. Easy List - About. Retrieved July 8, 2021, from https://easylist.to/pages/about.html.Google ScholarGoogle Scholar
  2. [2] 2009. Surf the web without annoying pop ups and ads. Retrieved May 2, 2020, from https://getadblock.com/.Google ScholarGoogle Scholar
  3. [3] 2011. JSCompress - The JavaScript Compression Tool. JSCompress.com. Retrieved May 1, 2020, from https://jscompress.com/.Google ScholarGoogle Scholar
  4. [4] 2015. Concatenation of JS and CSS files. IBM. Retrieved February 20, 2022, from https://www.ibm.com/docs/en/mpf/7.1.0?topic=applications-concatenation-js-css-files.Google ScholarGoogle Scholar
  5. [5] 2016. Sybu JavaScript Blocker–Google Chrome Extension. Sybu Data (Pty) Ltd. Retrieved May 2, 2020, from https://sybu.co.za/wp/projects/js-blocker/.Google ScholarGoogle Scholar
  6. [6] 2017. Puppeteer. Google, Inc. Retrieved March 25, 2020, from https://github.com/puppeteer/puppeteer/.Google ScholarGoogle Scholar
  7. [7] 2018. SpeedReader: Fast and Private Reader Mode for the Web. Brave Software, Inc. Retrieved February 15, 2021, from https://brave.com/speed-reader/.Google ScholarGoogle Scholar
  8. [8] 2019. The age of digital interdependence. DIGITALCOOPERATION.ORG. Retrieved October 4, 2020, from https://digitalcooperation.org/wp-content/uploads/2019/06/DigitalCooperation-report-web-FINAL-1.pdf.Google ScholarGoogle Scholar
  9. [9] 2019. Chrome DevTools Protocol Viewer. Google Developers. Retrieved November 7, 2019, from https://chromedevtools.github.io/devtools-protocol/.Google ScholarGoogle Scholar
  10. [10] 2019. Connecting Africa Through Broadband: A strategy for doubling connectivity by 2021 and reaching universal access by 2030. Broadband Commission for sustainable development. Retrieved July 8, 2020, from https://www.broadbandcommission.org/Documents/working-groups/DigitalMoonshotforAfrica_Report.pdf.Google ScholarGoogle Scholar
  11. [11] 2019. The Fastest, Most-Powerful Ad Blocker. uBlock, LLC. Retrieved January 6, 2020, from https://ublock.org/.Google ScholarGoogle Scholar
  12. [12] Sneha Saha. 2019. Is Redmi Go the cheapest best phone to buy in India right now? It’s complicated. Retrieved January 5, 2022, from https://www-indiatoday-in.cdn.ampproject.org/c/s/www.indiatoday.in/amp/technology/features/story/is-redmi-go-the-cheapest-best-phone-to-buy-in-india-right-now-it-s-complicated-1482837-2019-03-20/.Google ScholarGoogle Scholar
  13. [13] 2019. JavaScript | 2019 | The Web Almanac by HTTP Archive. Web Almanac by HTTP Archive. Retrieved January 2, 2020, from https://almanac.httparchive.org/en/2019/javascript.Google ScholarGoogle Scholar
  14. [14] 2019. Majestic Million - Majestic. Majestic. Retrieved September 10, 2019, from https://majestic.com/reports/majestic-million.Google ScholarGoogle Scholar
  15. [15] 2019. Selenium WebDriver. Browser Automation. Software Freedom Conservancy. Retrieved May 14, 2019, from https://www.seleniumhq.org/projects/webdriver/.Google ScholarGoogle Scholar
  16. [16] 2019. Third Parties | 2019 | The Web Almanac by HTTP Archive. Web Almanac by HTTP Archive. Retrieved January 2, 2019, from https://almanac.httparchive.org/en/2019/third-parties.Google ScholarGoogle Scholar
  17. [17] 2019. Welcome to wxPython! The wxPython Team - Powered by Nikola, Python and Magic. Retrieved January 4, 2020, from https://wxpython.org/.Google ScholarGoogle Scholar
  18. [18] 2019. Xiaomi Corporation 2019 Annual Report. Xiaomi Corporation. Retrieved January 5, 2022, from https://cnbj1.fds.api.xiaomi.com/company/announcement/en-us/2019_AR_E.pdf.Google ScholarGoogle Scholar
  19. [19] 2020. Adblock Plus | The world #1 free ad blocker. Adblock Plus (a registered trademark of eyeo GmbH). Retrieved June 28, 2021, from https://adblockplus.org/.Google ScholarGoogle Scholar
  20. [20] 2020. Lighthouse. Google Developers. Retrieved March 26, 2020, from https://developers.google.com/web/tools/lighthouse.Google ScholarGoogle Scholar
  21. [21] 2020. The top 500 sites on the web. (2020). Amazon.com, Inc. Retrieved January 3, 2020, from https://www.alexa.com/topsites.Google ScholarGoogle Scholar
  22. [22] 2021. JavaScript | 2021 | The Web Almanac by HTTP Archive. The Web Almanac by HTTP Archive. Retrieved January 12, 2022, from https://almanac.httparchive.org/en/2021/javascript.Google ScholarGoogle Scholar
  23. [23] 2021. Lighthouse performance scoring. Google Developers. Retrieved April 7, 2021, from https://web.dev/performance-scoring/.Google ScholarGoogle Scholar
  24. [24] 2021. The State of Mobile Internet Connectivity 2021. GSM Association. Retrieved December 30, 2021, from https://www.gsma.com/r/wp-content/uploads/2021/09/The-State-of-Mobile-Internet-Connectivity-Report-2021.pdf.Google ScholarGoogle Scholar
  25. [25] 2022. Best Practices for Speeding Up Your Web Site. Yahoo. Retrieved February 20, 2022, from https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.yahoo.com_performance_rules.html&d=DwIFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=zHpczl79pLCTqWHLWhebPA&m=jqENB-5EmPx29PGmBd14ELJpwFnCr-h_u7FvYhDotVVKKsWkyIersTLRthj0FWRN&s=9d6liA58ONGiGqBHTAHvN0tLr7roLDh1hDKJQUY60gI&e=.Google ScholarGoogle Scholar
  26. [26] 2022. Browser Market Share Africa. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share/all/africa.Google ScholarGoogle Scholar
  27. [27] 2022. Browser Market Share India. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share/all/india.Google ScholarGoogle Scholar
  28. [28] 2022. Browser Market Share Worldwide. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share.Google ScholarGoogle Scholar
  29. [29] 2022. Number of smartphone users in India in 2010 to 2020, with estimates until 2040. Statista. Retrieved January 5, 2022, from https://www.statista.com/statistics/467163/forecast-of-smartphone-users-in-india/.Google ScholarGoogle Scholar
  30. [30] 2022. Redmi Go. NDTV Convergence Limited. Retrieved January 5, 2022, from https://gadgets-ndtv-com.cdn.ampproject.org/c/s/gadgets.ndtv.com/redmi-go-8927?amp=1&akamai-rum=off.Google ScholarGoogle Scholar
  31. [31] Alarte Julian, Silva Josep, and Tamarit Salvador. 2019. What web template extractor should i use? A benchmarking and comparison for five template extractors. ACM Transactions on the Web (TWEB) 13, 2 (2019), 119.Google ScholarGoogle ScholarDigital LibraryDigital Library
  32. [32] Bauman Mark and Bonander Ray. 2017. Advertisement blocker circumvention system. (30 November 2017). US Patent App. 15/166,217.Google ScholarGoogle Scholar
  33. [33] Bazon Mihai. 2012. UglifyJS. Retrieved May 1, 2020, from http://lisperator.net/uglifyjs/.Google ScholarGoogle Scholar
  34. [34] Burg Brian, Ko Andrew J., and Ernst Michael D.. 2015. Explaining visual changes in web interfaces. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology. 259268.Google ScholarGoogle ScholarDigital LibraryDigital Library
  35. [35] Chaqfeh Moumena, Haseeb Muhammad, Hashmi Waleed, Inshuti Patrick, Ramesh Manesha, Varvello Matteo, Subramanian Lakshmi, Zaffar Fareed, and Zaki Yasir. 2022. To block or not to block: Accelerating mobile web pages on-the-fly through JavaScript classification. In Proceedings of the 12th International Conference on Information and Communication Technologies and Development (ICTD’22) (accepted).Google ScholarGoogle Scholar
  36. [36] Chaqfeh Moumena, Zaki Yasir, Hu Jacinta, and Subramanian Lakshmi. 2020. JSCleaner: De-cluttering mobile webpages through JavaScript cleanup. In Proceedings of the Web Conference 2020. 763773.Google ScholarGoogle ScholarDigital LibraryDigital Library
  37. [37] Conlen Matthew and Heer Jeffrey. 2018. Idyll: A markup language for authoring and publishing interactive articles on the web. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. 977989.Google ScholarGoogle ScholarDigital LibraryDigital Library
  38. [38] Cortesi Maximilianhils and Raumfresser.2019. mitmproxy - an interactive HTTPS proxy. Retrieved October 13, 2019, from https://mitmproxy.org/.Google ScholarGoogle Scholar
  39. [39] Developers Google. 2019. Chrome DevTools. Retrieved May 1, 2020, from https://developers.google.com/web/tools/chrome-devtools.Google ScholarGoogle Scholar
  40. [40] Duong Tony, Koehler Benjamin, Liew Tony, Mower Colin, Venkatraman Sundaragopal, et al. 2014. IBM MobileFirst Strategy Software Approach. IBM Redbooks.Google ScholarGoogle Scholar
  41. [41] Elliott Eric. 2019. How Popular Is JavaScript in 2019? Retrieved November 8, 2020, from https://medium.com/javascript-scene/how-popular-is-javascript-in-2019-823712f7c4b1.Google ScholarGoogle Scholar
  42. [42] Everts Tammy. 2013. Rules for mobile performance optimization. Commun. ACM 56, 8 (2013), 5259.Google ScholarGoogle ScholarDigital LibraryDigital Library
  43. [43] Ghasemisharif Mohammad, Snyder Peter, Aucinas Andrius, and Livshits Benjamin. 2018. SpeedReader: Reader mode made fast and private. CoRR abs/1811.03661 (2018). arxiv:1811.03661 http://arxiv.org/abs/1811.03661.Google ScholarGoogle Scholar
  44. [44] Google. 2019. AMP is a web component framework to easily create user-first web experiences - amp.dev. Retrieved May 5, 2019, from https://amp.dev.Google ScholarGoogle Scholar
  45. [45] Hashmi Waleed, Subramanian Lakshmi, and Zaki Yasir. 2022. QLUE: A computer vision tool for uniform qualitative evaluation of web pages. In Proceedings of the Web Conference (WWW’22). Lyon, France (to appear).Google ScholarGoogle ScholarDigital LibraryDigital Library
  46. [46] Hibschman Joshua and Zhang Haoqi. 2015. 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. 270279.Google ScholarGoogle ScholarDigital LibraryDigital Library
  47. [47] Hibschman Joshua and Zhang Haoqi. 2016. Telescope: Fine-tuned discovery of interactive web UI feature implementation. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology. 233245.Google ScholarGoogle ScholarDigital LibraryDigital Library
  48. [48] Iman. 2021. Gulp 4: How To Combine JavaScript Files Using Gulp Concat. Retrieved February 20, 2022, from https://rapidevelop.org/javascript/gulp-4-combine-javascript-files.Google ScholarGoogle Scholar
  49. [49] International Cliqz. 2009. Ghostery Makes the Web Cleaner, Faster and Safer. Retrieved May 2, 2020, from https://www.ghostery.com/.Google ScholarGoogle Scholar
  50. [50] Jun Byungjin, Bustamante Fabián E., Whang Sung Yoon, and Bischof Zachary S.. 2019. AMP up your mobile web experience: Characterizing the impact of Google’s accelerated mobile project. In The 25th Annual International Conference on Mobile Computing and Networking. 114.Google ScholarGoogle ScholarDigital LibraryDigital Library
  51. [51] Koo Terry K. and Li Mae Y.. 2016. A guideline of selecting and reporting intraclass correlation coefficients for reliability research. Journal of Chiropractic Medicine 15, 2 (2016), 155163.Google ScholarGoogle ScholarCross RefCross Ref
  52. [52] Lim Sarah, Hibschman Joshua, Zhang Haoqi, and O’Rourke Eleanor. 2018. Ply: A visual web inspector for learning from professional webpages. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. 9911002.Google ScholarGoogle ScholarDigital LibraryDigital Library
  53. [53] Maras Josip, Stula Maja, Carlson Jan, and Crnkovic Ivica. 2013. Identifying code of individual features in client-side web applications. IEEE Transactions on Software Engineering 39, 12 (2013), 16801697.Google ScholarGoogle ScholarDigital LibraryDigital Library
  54. [54] Mozilla and contributors individual. 2005. Firefox Developer Tools. Retrieved May 1, 2020, from https://developer.mozilla.org/en-US/docs/Tools.Google ScholarGoogle Scholar
  55. [55] Netravali Ravi, Goyal Ameesh, Mickens James, and Balakrishnan Hari. 2016. Polaris: Faster page loads using fine-grained dependency tracking. In 13th USENIX Symposium on Networked Systems Design and Implementation (NSDI’16). USENIX Association, Santa Clara, CA. https://www.usenix.org/conference/nsdi16/technical-sessions/presentation/netravali.Google ScholarGoogle Scholar
  56. [56] Netravali Ravi and Mickens James. 2018. Prophecy: Accelerating mobile page loads using final-state write logs. In 15th USENIX Symposium on Networked Systems Design and Implementation (NSDI’18). USENIX Association, Renton, WA, 249266. https://www.usenix.org/conference/nsdi18/presentation/netravali-prophecy.Google ScholarGoogle Scholar
  57. [57] Oney Stephen and Myers Brad. 2009. FireCrystal: Understanding interactive behaviors in dynamic web pages. In 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC’09). IEEE, 105108.Google ScholarGoogle Scholar
  58. [58] Osmani Addy. 2017. The Cost Of JavaScript - Dev Channel - Medium. Retrieved January 5, 20120, from https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e.Google ScholarGoogle Scholar
  59. [59] Roman Travis. 2018. JS Blocker. Retrieved May 2, 2020, from https://jsblocker.toggleable.com/.Google ScholarGoogle Scholar
  60. [60] Stryjewski Tomasz and Mao Jed. 2016. Developing a gulp edge: The streaming build system. (2016).Google ScholarGoogle Scholar
  61. [61] Thiagarajan Narendran, Aggarwal Gaurav, Nicoara Angela, Boneh Dan, and Singh Jatinder Pal. 2012. Who killed my battery? Analyzing mobile browser energy consumption. In Proceedings of the 21st international conference on World Wide Web. 4150.Google ScholarGoogle ScholarDigital LibraryDigital Library
  62. [62] Wang Xiao Sophia, Balasubramanian Aruna, Krishnamurthy Arvind, and Wetherall David. 2013. Demystifying page load performance with WProf. In Presented as part of the 10th USENIX Symposium on Networked Systems Design and Implementation (NSDI’13). USENIX, Lombard, IL, 473485. https://www.usenix.org/conference/nsdi13/technical-sessions/presentation/wang_xiao.Google ScholarGoogle ScholarDigital LibraryDigital Library
  63. [63] Wang Xiao Sophia, Krishnamurthy Arvind, and Wetherall David. 2016. Speeding up web page loads with Shandian. In 13th USENIX Symposium on Networked Systems Design and Implementation (NSDI’16). USENIX Association, Santa Clara, CA, 109122. https://www.usenix.org/conference/nsdi16/technical-sessions/presentation/wang.Google ScholarGoogle Scholar
  64. [64] WPO-Foundation. 2019. WebPageTest - Website Performance and Optimization Test. Retrieved September 10, 2019, from https://www.webpagetest.org/.Google ScholarGoogle Scholar
  65. [65] Zhang Xiong and Guo Philip J.. 2018. Fusion: Opportunistic web prototyping with UI mashups. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. 951962.Google ScholarGoogle ScholarDigital LibraryDigital Library

Index Terms

  1. JSAnalyzer: A Web Developer Tool for Simplifying Mobile Web Pages through Non-critical JavaScript Elimination

    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

    • Published in

      cover image ACM Transactions on the Web
      ACM Transactions on the Web  Volume 16, Issue 4
      November 2022
      165 pages
      ISSN:1559-1131
      EISSN:1559-114X
      DOI:10.1145/3571715
      Issue’s Table of Contents

      Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

      Publisher

      Association for Computing Machinery

      New York, NY, United States

      Publication History

      • Published: 16 November 2022
      • Online AM: 8 August 2022
      • Accepted: 23 June 2022
      • Revised: 10 June 2022
      • Received: 12 July 2021
      Published in tweb Volume 16, Issue 4

      Permissions

      Request permissions about this article.

      Request Permissions

      Check for updates

      Qualifiers

      • research-article
      • Refereed
    • Article Metrics

      • Downloads (Last 12 months)256
      • Downloads (Last 6 weeks)12

      Other Metrics

    PDF Format

    View or Download as a PDF file.

    PDF

    eReader

    View online with eReader.

    eReader

    Full Text

    View this article in Full Text.

    View Full Text

    HTML Format

    View this article in HTML Format .

    View HTML Format
    About Cookies On This Site

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

    Learn more

    Got it!