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.
- [1] 2005. Easy List - About. Retrieved July 8, 2021, from https://easylist.to/pages/about.html.Google Scholar
- [2] 2009. Surf the web without annoying pop ups and ads. Retrieved May 2, 2020, from https://getadblock.com/.Google Scholar
- [3] 2011. JSCompress - The JavaScript Compression Tool. JSCompress.com. Retrieved May 1, 2020, from https://jscompress.com/.Google Scholar
- [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 Scholar
- [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 Scholar
- [6] 2017. Puppeteer. Google, Inc. Retrieved March 25, 2020, from https://github.com/puppeteer/puppeteer/.Google Scholar
- [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 Scholar
- [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 Scholar
- [9] 2019. Chrome DevTools Protocol Viewer. Google Developers. Retrieved November 7, 2019, from https://chromedevtools.github.io/devtools-protocol/.Google Scholar
- [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 Scholar
- [11] 2019. The Fastest, Most-Powerful Ad Blocker. uBlock, LLC. Retrieved January 6, 2020, from https://ublock.org/.Google Scholar
- [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 Scholar
- [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 Scholar
- [14] 2019. Majestic Million - Majestic. Majestic. Retrieved September 10, 2019, from https://majestic.com/reports/majestic-million.Google Scholar
- [15] 2019. Selenium WebDriver. Browser Automation. Software Freedom Conservancy. Retrieved May 14, 2019, from https://www.seleniumhq.org/projects/webdriver/.Google Scholar
- [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 Scholar
- [17] 2019. Welcome to wxPython! The wxPython Team - Powered by Nikola, Python and Magic. Retrieved January 4, 2020, from https://wxpython.org/.Google Scholar
- [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 Scholar
- [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 Scholar
- [20] 2020. Lighthouse. Google Developers. Retrieved March 26, 2020, from https://developers.google.com/web/tools/lighthouse.Google Scholar
- [21] 2020. The top 500 sites on the web. (2020). Amazon.com, Inc. Retrieved January 3, 2020, from https://www.alexa.com/topsites.Google Scholar
- [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 Scholar
- [23] 2021. Lighthouse performance scoring. Google Developers. Retrieved April 7, 2021, from https://web.dev/performance-scoring/.Google Scholar
- [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 Scholar
- [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 Scholar
- [26] 2022. Browser Market Share Africa. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share/all/africa.Google Scholar
- [27] 2022. Browser Market Share India. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share/all/india.Google Scholar
- [28] 2022. Browser Market Share Worldwide. StatCounter. Retrieved June 1, 2022, from https://gs.statcounter.com/browser-market-share.Google Scholar
- [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 Scholar
- [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 Scholar
- [31] . 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), 1–19.Google Scholar
Digital Library
- [32] . 2017. Advertisement blocker circumvention system. (
30 November 2017).US Patent App. 15/166,217. Google Scholar - [33] . 2012. UglifyJS. Retrieved May 1, 2020, from http://lisperator.net/uglifyjs/.Google Scholar
- [34] . 2015. Explaining visual changes in web interfaces. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology. 259–268.Google Scholar
Digital Library
- [35] . 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 Scholar
- [36] . 2020. JSCleaner: De-cluttering mobile webpages through JavaScript cleanup. In Proceedings of the Web Conference 2020. 763–773.Google Scholar
Digital Library
- [37] . 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. 977–989.Google Scholar
Digital Library
- [38] 2019. mitmproxy - an interactive HTTPS proxy. Retrieved October 13, 2019, from https://mitmproxy.org/.Google Scholar
- [39] . 2019. Chrome DevTools. Retrieved May 1, 2020, from https://developers.google.com/web/tools/chrome-devtools.Google Scholar
- [40] . 2014. IBM MobileFirst Strategy Software Approach. IBM Redbooks.Google Scholar
- [41] . 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 Scholar
- [42] . 2013. Rules for mobile performance optimization. Commun. ACM 56, 8 (2013), 52–59.Google Scholar
Digital Library
- [43] . 2018. SpeedReader: Reader mode made fast and private. CoRR abs/1811.03661 (2018).
arxiv:1811.03661 http://arxiv.org/abs/1811.03661.Google Scholar - [44] . 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 Scholar
- [45] . 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 Scholar
Digital Library
- [46] . 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. 270–279.Google Scholar
Digital Library
- [47] . 2016. Telescope: Fine-tuned discovery of interactive web UI feature implementation. In Proceedings of the 29th Annual Symposium on User Interface Software and Technology. 233–245.Google Scholar
Digital Library
- [48] . 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 Scholar
- [49] . 2009. Ghostery Makes the Web Cleaner, Faster and Safer. Retrieved May 2, 2020, from https://www.ghostery.com/.Google Scholar
- [50] . 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. 1–14.Google Scholar
Digital Library
- [51] . 2016. A guideline of selecting and reporting intraclass correlation coefficients for reliability research. Journal of Chiropractic Medicine 15, 2 (2016), 155–163.Google Scholar
Cross Ref
- [52] . 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. 991–1002.Google Scholar
Digital Library
- [53] . 2013. Identifying code of individual features in client-side web applications. IEEE Transactions on Software Engineering 39, 12 (2013), 1680–1697.Google Scholar
Digital Library
- [54] . 2005. Firefox Developer Tools. Retrieved May 1, 2020, from https://developer.mozilla.org/en-US/docs/Tools.Google Scholar
- [55] . 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 Scholar
- [56] . 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, 249–266. https://www.usenix.org/conference/nsdi18/presentation/netravali-prophecy.Google Scholar
- [57] . 2009. FireCrystal: Understanding interactive behaviors in dynamic web pages. In 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC’09). IEEE, 105–108.Google Scholar
- [58] . 2017. The Cost Of JavaScript - Dev Channel - Medium. Retrieved January 5, 20120, from https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e.Google Scholar
- [59] . 2018. JS Blocker. Retrieved May 2, 2020, from https://jsblocker.toggleable.com/.Google Scholar
- [60] . 2016. Developing a gulp edge: The streaming build system. (2016).Google Scholar
- [61] . 2012. Who killed my battery? Analyzing mobile browser energy consumption. In Proceedings of the 21st international conference on World Wide Web. 41–50.Google Scholar
Digital Library
- [62] . 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, 473–485. https://www.usenix.org/conference/nsdi13/technical-sessions/presentation/wang_xiao.Google Scholar
Digital Library
- [63] . 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, 109–122. https://www.usenix.org/conference/nsdi16/technical-sessions/presentation/wang.Google Scholar
- [64] . 2019. WebPageTest - Website Performance and Optimization Test. Retrieved September 10, 2019, from https://www.webpagetest.org/.Google Scholar
- [65] . 2018. Fusion: Opportunistic web prototyping with UI mashups. In Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology. 951–962.Google Scholar
Digital Library
Index Terms
JSAnalyzer: A Web Developer Tool for Simplifying Mobile Web Pages through Non-critical JavaScript Elimination






Comments