Applications for mobile devices and laptops can be power hungry, and the energy spent powering web content can drain battery as well as user engagement. However, there are methods that web developers can use to mitigate power usage and keep users on their applications longer, according to the team behind WebKit, the open-source web browser engine used by Safari, Mail and App Store. 

RELATED CONTENT: Say hello to sustainable programming

According to the team, CPU, GPU, networking screen and screen are the top energy drainers. When developing with power efficiency in mind, developers should consider:

  • “When the user is actively interacting with the content.
  • When the page is the frontmost, but the user is not interacting with it.
  • When the page is not the frontmost content.”

“To maximize battery life, you therefore want to reduce the amount of time spent in high-power states, and let the hardware go back to idle as much as possible,”Benjamin Poulain, engineer at Apple, and Simon Fraser, a WebKit reviewer, explained in a post 

This can be achieved by minimizing the use of timers to avoid waking up the CPU, minimizing continually animating content, like animated images and auto-playing mode. In addition, the team suggested using declarative animations such as CSS Animations and Transitions where possible, because they are more efficient than script-driven animation. 

Another way to achieve battery efficiency is by maximizing the performance during user interaction to quickly get back to idle. 

“Obviously it’s good to expend power at times when the user is interacting with the page. You want the page to load fast and respond quickly to touch,” the team wrote. “However, be cautious about continuing to load resources and to run script after the initial page load. The goal should be to get back to idle as fast as possible.”

The team also explained how WebKit automatically takes steps to save power when a page is no longer the user’s primary focus. In this case, WebKit stops ‘requestAnimationFrame,’ suspends CSS and SVG animations and throttles the timers. 

In addition, WebKit takes advantage of features in the operating system. Tabs are completely suspended when possible in iOS and on macOS and participate in App Nap, meaning that the web process for a tab that is not visually updating gets lower priority and has its timers throttled. 

“It’s important to measure the battery impact in Web Inspector and drive those costs down. Doing so improves the user experience and battery life,” the team wrote. “The most direct way to improve battery life is to minimize CPU usage.”

Other things to consider when creating power-efficient content include scripting, painting, and networking.