Transcoding web pages via stylesheets and scripts for saving energy on the client

Abstract

Mobile devices and accessing the web have become essential in our daily lives. However, their limitations in terms of both hardware such as the battery, and software capabilities can affect the user experience such as battery drain. There are some best practices for the web page design that are shown to affect the downloading time of web pages. In this study, we report our experience in applying these practices to see their effect on energy saving. We propose two techniques: (1) concatenating external script and stylesheet files and (2) minifying external script and stylesheets that can be used to transcode web pages to improve energy consumption on the client-side and therefore improve the battery life. We present our experimental architecture, implementation, and a systematic evaluation of these two techniques. The evaluation results show that the proposed techniques can achieve approximately 12% processor energy-saving and 4% power saving in two different client types, 13% improvement in a typical laptop battery life, and 4% improvement in a typical mobile phone battery life.

Energy-Saving Strategies for Mobile Web Apps and their Measurement: Results from a Decade of Research

“…The mobile device: In past experiments, Android devices have been commonly used for measurements, with Samsung [14], [28], [29], [34], [36], [40], [42], [46], [51], [57], [58], [62] and Nexus [26], [31], [32], [35], [37], [41], [44], [51]- [53], [61], [63] devices being the most popular ones. The Android versions differed from Android 4 to 11.…”

“…Is the content optimized for mobile devices? An oftenseen approach for energy-evaluation experiments was the use Alexa's top 100/500/1000 websites [38], [44]- [46], [53], [55], [56], [59]. Unfortunately, this website retired on May 1, 2022.…”

“…In three cases, the Batterystats tool was used. Batterystats collects battery data (based on Smartphone [3], [30]- [46] [3], [14], [16], [28]- [30], [32], [37], [40], [42]- [53], [53]- [65] Table V: Energy measurement approaches.…”

“…[3], [16], [26], [27], [30], [31], [31]- [34], [39], [43], [46], [47], [49], [50], [59] Hardware-based 24 [14], [15], [28], [29], [35], [37], [38], [40], [41], [44], [45], [51]- [56], [58], [60], [62]- [65], [67] Estimation-based 4 [36], [42], [48], [61] supplier profiles) on the device and can be accessed via the Android Debug Bridge, for further analysis, even on a single hardware unit [30], [32], [33]. An alternative for devices with Qualcomm chips was Trepn Profiler [31], [32], [49], [50].…”

“…The research revealed that a lower performance score (a weighted average score based on different metrics like First Contentful Paint or Time to Interactive) in Lighthouse correlates to higher energy consumption. One of Google's lighthouse suggestions was also discussed by Unlu and Yesilada [46]: Minifying JS and CSS content involve the elimination of superfluous characters from the source code of a website, including white space, new line characters, and comments. In this way, fewer Bytes must be transferred to the client.…”