How to Make Web Pages Battery‑Friendly: Power‑Saving Tips for Front‑End Developers

Original article: https://webkit.org/blog/8970/how-web-content-can-affect-power-usage/ (Authors: Benjamin Poulain & Simon Fraser, Translation: Liu Hui)

What Consumes Power?

Mobile devices and laptops rely heavily on battery life. Power consumption is driven mainly by the CPU, GPU, network (Wi‑Fi or cellular), and the screen. While screen power is relatively stable and user‑controlled, CPU, GPU, and network usage fluctuate widely.

General Principles for Efficient Power Use

To maximize battery life, keep hardware in low‑power or idle states as much as possible. Web developers should focus on three interaction scenarios:

User actively interacts with content

Page is in the foreground but the user is idle

Page is in the background

Efficient User Interaction

Interactive pages must load quickly and respond promptly. Reducing first‑paint time lowers power use, and after the initial load, scripts should finish quickly so the system can return to idle. Use native scrolling instead of JavaScript‑driven scrolling for better efficiency.

Minimizing Idle Power Consumption

When the user is not interacting, aim to make the page consume near‑zero power:

Limit the use of timers; batch timer‑based work and avoid frequent wake‑ups.

Reduce animations, especially loading GIFs or CSS animations that run off‑screen; use IntersectionObserver to start animations only when visible.

Prefer CSS animations and transitions, which the browser can optimise more effectively than JavaScript animations.

Avoid polling for server updates; use WebSockets or persistent connections instead.

Zero‑CPU Usage When Page Is Backgrounded

Background pages (e.g., switched tabs, other apps, minimized windows) trigger WebKit to:

Stop calling requestAnimationFrame Pause CSS and SVG animations

Throttle timers

On iOS, inactive tabs are fully paused; on macOS, tabs respect App Nap, lowering process priority and throttling timers.

Pages should also avoid actions that wake the CPU in the background, such as timers, messages, or network events. The Page Visibility API and blur events can help pause work when the page loses focus.

Finding the Problem

Use the browser’s timeline in Web Inspector to locate high‑CPU activities. CPU usage spikes during page load, script execution, layout, and rendering. Reducing JavaScript execution time yields the greatest power savings.

Scripts

Modern CPUs ramp up power quickly for user interaction, making script execution a major battery drain. Measure CPU with the “JavaScript and Events” track, profile heavy libraries, and use the JavaScript profiler to identify costly code.

Rendering

Layout and painting, often triggered by scripts or CSS animations (except for transform/opacity/filter), also consume CPU and GPU. Enable Paint Flashing in Web Inspector to visualise rendering work. Avoid unnecessary canvas draws and consider the powerPreference context only when the performance benefit outweighs the power cost.

Network

Wireless networking impacts battery life significantly. Reduce power by maximizing cache usage, batching network requests, and minimizing the number of separate requests. The “Network Requests” track in the timeline reveals opportunities to combine requests.

Summary

Web pages can be optimised in many ways to extend battery life: keep CPU usage near zero when idle, maximise performance during user interaction to return quickly to idle, and use the tools in Web Inspector to measure and reduce power consumption.

Reduce CPU usage to zero during idle periods.

Deliver high performance during interaction to minimise active time.