2.7 Avoid Unnecessary or an Overabundance of Assets

It’s great to have a pretty-looking website or application but to ensure a sustainable design, it’s important to avoid cluttering up the interface with too many visuals (which aren’t necessary to the content). Keeping a clean design will reduce website rendering, and thereby emissions.

Criteria

Decorative Design: Decorative design is used only when it improves the user-experience, and unnecessary assets or ones that fail to benefit the visitor or sustainability are removed (or rendered optional and disabled by default).

Impact

High

Effort

Medium

Benefits

Environmental:
Using fewer typefaces will reduce the page size and use fewer resources to render the new font on the visitor’s machine for that page’s instance (saving DOM rendering cycles).
Social Equity:
Bloat costs bandwidth, slimming down the web matters to remain inclusive.
Accessibility:
Decorative design can be intrusive (if marked up incorrectly) or distracting.
Performance:
HTTP requests can be reduced both with fewer fonts and by creating CSS / SVG sprites if the images are unlikely to change.
Conversion:
A page with fewer heavy elements is more likely to load within 3 seconds.

GRI

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

Example

Code:

@font-face {
	font-family: "Trickster";
	src: local("Trickster"),
		url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
		format("opentype"), url("trickster-outline.woff") format("woff");
}

This is an example of an external web asset (a custom typeface). Too many of these can be detrimental to the performance of a website or application due to their need to be rendered (through CPU cycles) to the screen on every element in which they are used, which is bad news for sustainability! @font-face.

Resources

View the Guideline