Sustainable

Factor in energy source and consumption for optimizations, from server to client side. Just as people do not deserve a reduced experience, our planet does not deserve to suffer the consequences of bad design and web delivery.

Sustainability is as much about our planet’s wellbeing as it is our own, as they are intertwined.

Adapted from sustainable web design and Lara Callender Hogan’s book Designing for performance: weighing aesthetics and speed.

Optimization

Findability: The easier content is to find, the fewer pages a user has to load to locate information. This means fewer server requests are made and that unnecessary page elements — like photos and videos, which take up a lot of bandwidth — don’t load, either. These small energy savings accumulate over time.
Optimize images: Images make up the majority of total page weight. The number of image bytes has grown by more than 30% on the average web page in 2014, with little growth in image requests to match the increase. Optimizing images is the easiest big win.; Find the right balance of file size and quality for each image, look for ways to reduce the title number of image requests, and optimize image creation workflows. Refer to image guidelines for how to optimize well.
Optimize markup: Avoid excessive use of <div> elements. Use semantic HTML (for example, use the appropriate heading element rather than a <p> or <div>). Using correct elements to improve accessibility as well as search engine optimization (a search engine may better determine what content is if it is “tagged” correctly). It also allows browsers to apply enhancements such as auto-filling standard form fields.
Optimize styles: Remove unused styles and condense and combine styles. Reduce specificity in stylesheets to improve overriding issues as well as write more performant code.
Optimize fonts: Use system or web native fonts to reduce requests and “flash of unstyled content” concerns. Where non-native fonts are selected, remove sets in the font set that will not be used (e.g. will a semi-bold italic set be used?).

Web performance

Performance optimization: Sustainability and page speed go hand-in-hand. An efficient website uses less processing power, which means that your site uses less energy and has a lower carbon footprint.; People expect to get the content they want instantaneously, and efficient pages load more quickly. This reduces your site’s bounce rate and keeps people engaged and satisfied.
Reduce resource requests: Optimize the size and number of requests that a web page takes to render. Request reduction is desirable despite threading capabilities in HTTP/2, to support HTTP/1 browsers and clients as well as intentionality of energy consumption for transmitting data. Be mindful of any increase in requests to the server.
Implement HTTP/2: HTTP/2 allows multiple requests to run over a single connection as well as simultaneous downloads. This replaces HTTP/1’s rule of only one outstanding request per TCP connection. Servers can push content to the browser instead of waiting for the browser to request individual page assets.; For more practical information about HTTP/2, review Tim Frick's Designing for sustainability, pp. 218-220.
Utilize caching: Cache assets aggressively where possible.; Caching is critical for site performance; assets that are cached do not need to be requested again from the server, saving a request. All static assets such as CSS files, Javascript files, images, PDFs, and fonts should be cached.

Sustainable practices

Just as people do not deserve a reduced experience, our planet does not deserve to suffer the consequences of bad design and web delivery.

Delete outdated and unused web assets: Nothing should live forever, including digital files. Retention plans need to exist with frequent auditing of all assets. That which continues to “live” requires energy and storage.
Green hosting: The servers that store the files that make up web pages require power 24 hours a day, so the single most impactful thing you can do to move toward a more sustainable website is use a hosting provider that runs on 100% renewable energy.

Consider committing to the sustainable web manifesto.

Design justice

These principles are from the Design Justice community.

We use design to sustain, heal, and empower our communities, as well as to seek liberation from exploitative and oppressive systems.
We center the voices of those who are directly impacted by the outcomes of the design process.
We prioritize design’s impact on the community over the intentions of the designer.
We view change as emergent from an accountable, accessible, and collaborative process, rather than as a point at the end of a process.
We see the role of the designer as a facilitator rather than an expert.
We believe that everyone is an expert based on their own lived experience, and that we all have unique and brilliant contributions to bring to a design process.
We share design knowledge and tools with our communities.
We work towards sustainable, community-led and -controlled outcomes.
We work towards non-exploitative solutions that reconnect us to the earth and to each other.
Before seeking new design solutions, we look for what is already working at the community level. We honor and uplift traditional, indigenous, and local knowledge and practices.

Sustainable Web Manifesto

Adapted from the sustainable web manifesto.

Clean: The services we provide and services we use will be powered by renewable energy.
Efficient: The products and services we provide will use the least amount of energy and material resources possible.
Open: The products and services we provide will be accessible, allow for the open exchange of information, and allow people to control their data.
Honest: The products and services we provide will not mislead or exploit people in their design or content.
Regenerative: The products and services we provide will support an economy that nourishes people and planet.
Resilient: The products and services we provide will function in the times and places where people need them most.