Hey, it's 2019. Quit making battery-draining webpages – say makers of webpage-displaying battery-powered kit
Save the family joules, urge Apple's WebKit developers By Thomas Claburn in San Francisco https://www.theregister.co.uk/2019/08/29/webkit_power_usage 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. https://webkit.org/blog/8970/how-web-content-can-affect-power-usage 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. 'Optimizations' "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. Use of JavaScript, to the extent possible, should be minimized. "In general, the less JavaScript that runs, the more power-efficient the page will be, because script is work on top of what the browser has already done to layout and paint the page," they say. 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 WebSocket or 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. https://mobisocial.stanford.edu/papers/boneh-www2012.pdf Among the websites they tested, the worst in terms of energy consumption was, ironically, apple.com, which the researchers noted was particularly energy hungry because it wasn't optimized for mobile devices and included large CSS files, many images, and inefficient JavaScript. "On the Apple home page, for example, the JavaScript used for tracking user location generates an update forcing the phone to setup a 3G connection," the paper explains. "Thus, despite caching, energy consumption for these 10 sites was almost as high as when no caching took place. There is an important lesson here for mobile web site design — dynamic JavaScript can greatly increase the power usage of a page." It's clear Apple appears to be learning its lesson -- Cheers, Stephen _______________________________________________ Link mailing list [email protected] http://mailman.anu.edu.au/mailman/listinfo/link
