Energy-Efficient Web App Designs: A Comparative Study

Abstract

This paper presents a comprehensive comparative analysis of the energy consumption of common web application design choices, specifically focusing on UI color schemes (dark mode vs. light mode) and interface dynamics (animations vs. static UI). It synthesizes findings from peer-reviewed literature to quantify the energy impact of these choices, with a particular focus on the underlying hardware mechanisms, such as display technology (OLED vs. LCD) and browser rendering pipelines (CPU vs. GPU). Key findings reveal that while dark mode offers substantial energy savings (up to 72%) on OLED displays, its efficacy is negligible on LCDs and can be undermined by user behavior.1 Similarly, the energy cost of animations is shown to be contingent not on the implementation language (CSS vs. JavaScript) but on the ability to leverage hardware-accelerated rendering pathways.3 The paper concludes by proposing a nuanced decision-making framework for web developers and designers, aimed at balancing energy efficiency with critical considerations of user experience (UX) and accessibility.