Apple WebKit engineers Benjamin Poulain and Simon Fraser have offered advice to web developers about how to design power-efficient web pages, to preserve the life of mobile device batteries and give users more time interacting with web content.
"Web developers rarely think about power usage, but they really should," said Fraser, via Twitter.
WebKit is the browser rendering engine at the heart of Apple's mobile and desktop Safari browsers, but the tips presented by its programmers apply to web pages presented in any browser, for the most part.
Mobile device display screens, CPUs, GPUs and networking hardware represent the primary power-hungry components, Poulain and Fraser explain in a blog post, but since screen settings like brightness tend to be user-determined and fairly consistent, they urge web devs to focus on how their code interacts with the other three components.
They advise developers to consider energy consumption when users are actively interacting with content, when the page is in the foreground without interaction and when the page is obscured.
"You want the page to load fast and respond quickly to touch," they state. "In many cases, the same optimizations that reduce time to first paint and time to user interactive will also reduce power usage."
And after everything has loaded, they say, the goal should be to get back to idle as quickly as possible.
Idle power usage should be driven toward zero by minimizing timers that wake the CPU. Also, animations should not be run continuously – APIs like
IntersectionObserver can help here by running animations only when they're visible. Declarative animations (CSS Animations and Transitions) should be preferred over inefficient script-driven ones. And
Fetch with a persistent connection should be used in lieu of network polling.
WebKit can help, by automatically throttling timers and stopping
requestAnimationFrame calls and CSS and SVG animations when a page becomes inactive. Apple's iOS and macOS operating systems can add to the savings by suspending tab processes. But developers should avail themselves of tools like the
PageVisibility API and techniques like event monitoring to stop power-hungry operations where feasible.
Google Chrome, it should be said, has some energy-saving advantages of its own. For example, the recently implemented lazy loading image attribute – which avoids loading images that would not be visible in the current browser view – landed in Chrome 76 but isn't yet available elsewhere.
Poulain and Fraser also recommend that developers make use of Safari's Web Inspector to optimize CPU usage for a given page design.
Keep it simple
When it comes to reducing networking power, the duo advises using the browser's cache rather than requesting over-the-air resources where possible and grouping network requests together, since small, frequent transmissions require repeated wasteful electrical overhead.
Browsers themselves can be as important in energy savings as efficient browser code. Rather than exhort developers to strive for more energy-efficient design, convincing users to ditch an energy-hungry browser like Chrome in favor of a more resource-thrifty browser like the pre-Chromium version of Microsoft Edge or the current version of Brave represents another option, to say nothing of the general energy benefit from blocking ads and tracking scripts.
Energy-efficient browsing is not a new concern. Back in 2012, Stanford boffins published a research paper showing that merely by modifying scripts on Wikipedia's mobile site, a 30 per cent energy reduction could be achieved by readers.
Apple's WebKit techs declare privacy circumvention to be a security issueREAD MORE
It's clear Apple appears to be learning its lesson ®