Use beneficial JavaScript and its APIs
When new best practices or if beneficial scripting guidance exists that will improve the visitor experience, following it should be of the highest priority (only using scripts ethically should be promoted).
Criteria: Beneficial JavaScript
Improve sustainability through accessible and performant code implementations.
Resources
- A handful of reasons JavaScript won't be available
- Accessible JavaScript
- CanIUse
- Common Causes of Memory Leaks in JavaScript
- Comparing the Energy Efficiency of WebAssembly and JavaScript in Web Applications on Android Mobile Devices (PDF)
- Degree of internet freedom in selected countries according to the Freedom House Index in 2022
- Everyone has JavaScript, right?
- GPF - General Policy Framework (PDF) - 1.9 - Strategy (Interoperable Technologies)
- GPF - General Policy Framework (PDF) - 6.6 - Front-End (Sensor Requests)
- Hidden cost of frontend frameworks
- How To Test Your Website With JavaScript Disabled
- How Web Content Can Affect Power Usage
- Internet censorship and surveillance by country
- JavaScript dos and donts
- JavaScript isn't always available and it's not the user's fault
- JavaScript for Web Designers
- JS Free
- Memory leaks: the forgotten side of web performance
- Optimizing Javascript for fun and for profit
- The Performance Inequality Gap
- W3C Web Performance Working Group
- WebAssembly versus JavaScript: Energy and Runtime Performance
- Why care about the no-JS experience?
Criteria: Sustainable APIs
Apply potential energy-reducing APIs (such as Battery Status, Compression Streams, Page Visibility, and Vibration) if they can improve the eco-efficiency of your website or application.
Resources
Criteria: API requests
Human-testable
When using an API, make sure you only call it when necessary. On the other side, make sure no unrequired data is sent by the API.
Resources
- 9 Proven Strategies to Improve API Performance
- API Security Best Practices
- Common API mistakes and how to avoid them
- GPF - General Policy Framework (PDF) - 1.10 - Strategy (Documented APIs)
- Green API Design 1/5: Rates limiting for Sustainable APIs
- Green APIs: Developing Sustainable API's with a Low Carbon Footprint
Impact: High, Effort: Medium
| GRI | Impact |
|---|---|
| materials | High |
| energy | High |
| water | High |
| emissions | High |
Benefits of this guideline
- Environment: Removing unwatched distractions (Page Visibility API), for example, would reduce wasted visual effects such as animation from being processed in the background. This could potentially help visitors conserve battery if they leave multiple tabs open in their browser.
- Privacy: Allowing for script-free visitors can protect the privacy of visitors who may live in unsafe nations.
- Performance: Using modern APIs or low-code solutions often reduces heavy codebase usage. Having fallbacks for unavailable JavaScript allows older or less capable devices to still experience your products.
- Economic: If a product works in more situations, you can sell it to more people without it failing.
- Conversion: Fallbacks for technology that might fail can lead to sales that otherwise wouldn't exist.
Example
-
codeconst audio = document.querySelector("audio"); // Handle page visibility change: // - If the page is hidden, pause the video // - If the page is shown, play the video document.addEventListener("visibilitychange", () => { if (document.hidden) { audio.pause(); } else { audio.play(); } }); -
contentPage Visibility API.
Tags:
- Accessibility
- JavaScript
- Security