3.15 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.
API Requests: 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.

Impact

High

Effort

Medium

Benefits

Environmental:
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.

GRI

materials: High
energy: High
water: High
emissions: High

Example

Code:

const 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();
}
});

Page Visibility API.

Resources

View the Guideline