Sustainability is a top concern in today's world. While the digital era is often hailed as the eco-friendly alternative to traditional industries like printing, it's essential to acknowledge that, it too, leaves a discernible environmental footprint. At every stage of the product development process – from the offices where digital wonders are conceived, to powering the systems they rely on, and finally, to the end-users who engage with them – carbon emissions are an undeniable reality.
A wake-up call came in the form of Greenpeace's 2014 report, 'Clicking Clean,' which shed light on a startling fact - if we were to envision the internet as a country, it would rank sixth in electricity consumption, trailing behind major nations like China, the US, Japan, India, and Russia. This fact underscores the urgency for digital product creators to wield their influence and integrate sustainability seamlessly into their processes.
In this article, we explore the essence of a sustainable web and the metrics that enable us to gauge our products' environmental impact. More importantly, we delve into actionable strategies for reducing this impact. Our mission is clear: to weave sustainability into the very fabric of our design processes and steer towards a future where the internet is not just innovative but also inherently responsible to our planet.
Characteristics of a Sustainable Internet
Designing sustainably and inclusively go hand in hand. Truly sustainable digital products necessitate universal accessibility, incorporating features such as:
- Flexibility: Designs that are able to cater to the extreme use cases from conception are considered as 'flexible' designs. They need lesser variations, updates, and can easily accommodate users with diverse abilities and preferences.
- Intuitive: Digital products that are self-explanatory and don’t need instructions or assistance to be used meaningfully can be considered as 'intuitive'. They allow users to engage with the products irrespective of their familiarity and experience level with technology.
- Tolerant: Designs that leave enough room for error without serious consequences for the user are considered to be 'tolerant'. User fatigue (especially in enterprise products) and the effects of unintended actions should be kept in mind while designing any product.
- Clean Energy: If a digital product is powered by clean energy, i.e. renewable sources of energy, instead of relying on fossil fuels, it can be considered to be running on 'clean' energy. Hosting providers (like Google and AWS) that are committed to 100% renewable energy can reduce the environmental impact of a web product.
- Efficient: Efficient designs are able to perform well while utilising resources mindfully. Heavy web products waste resources and hinder inclusivity. With faster internet and devices, content optimization is often neglected. Between 2017 to 2023, the median size of a web page has increased by roughly 65% (Web Almanac, n.d.).
- Open Source: Organizations and teams that are 'open' showcase their newfound solutions and complex problems such that teams all around the world are able to build upon that progress, rather than starting all the way from scratch. By being open and honest about our own efforts, we provide the stepping stones for others to better solve our world’s problems.
- Regenerative: Regenerative technology contributes towards restoring ecological balance on our planet, since at this point of the climate crisis, damage control and prevention is no longer enough. We must start actively restoring the biological systems on our planet. Platforms like Ecosia fund reforestation projects using profits from their advertising.
- Resilient: A resilient digital product performs it’s functions even when some resources are unavailable. They degrade gracefully, ensure access during crises, even on slow networks. This becomes even more important as we witness more frequent flash floods, forest fires and other climate catastrophes. Services like WeFarm offer SMS-based solutions for information access for farmers without the internet.
As internet speeds increase, digital products tend to be more elaborate and consume more resources, excluding users with slower connections or older devices. Prioritizing user engagement (in ways that demand fast devices and network speeds) over performance can alienate a significant audience. We must anticipate the needs of users from all demographics, including those in isolated or vulnerable areas.
Measuring Our Invisible Footprints
Assessing the carbon emissions of web products can pose challenges due to numerous contributing variables. Factors such as the energy consumption of computer systems involved in product development, workspace air conditioning, employee dietary choices, daily commutes, meeting-related flights, energy usage of end-user devices, and hosting provider operations collectively contribute to an intricate carbon footprint that is impossible to track.
The majority of these elements are greatly subjective, influenced by the organizational culture and the individual lifestyles of employees. Nevertheless, some objective metrics, including data transfer, page weight, and the carbon intensity of electricity; offer a more tangible estimate for carbon emissions.
- Data transfer: It is useful to consider the Page weight, that is, the transfer size of the webpage in kilobytes the first time someone visits it. It is measured in kilowatt-hours per gigabyte (kWh/GB). Establishing benchmarks for load times is essential; for instance, we might designate that a website should load within one second on a broadband connection and within three seconds on a 3G connection.
- Carbon intensity of electricity: Carbon intensity indicates the amount of CO2 generated per kilowatt-hour of electricity (gCO2/kWh). Renewable and nuclear energy sources have an extremely low carbon intensity of less than 10 gCO2/kWh, even accounting for their construction. In contrast, fossil fuels have a high carbon intensity, reaching up to 400 gCO2/kWh (Evans, 2017). We must also consider “megabyte miles“ - the distance from the data centre to the product’s core user base - and we want them to be as small as possible.
The Website Carbon Calculator is a tool that helps websites identify their carbon emissions and suggests greener web services.
Reducing Our Emissions
When our products are used by a large number of people, it becomes increasingly vital to prioritize optimization. This is because these products will be running on millions of devices, each requiring data and battery power to operate applications efficiently. Today, these are considered to be the standard page weights for websites.
- Best: The best practice is to aim for a page weight of around 500KB - 1.5MB for a website, and 500KB or less for a mobile website (Speedy Site Editorial, 2020).
- Average: The average page weight for websites and mobiles both can vary widely, but it often falls in the range of 1MB to 2MB. This is still considered acceptable, but it leads to slower loading times, especially on slower internet connections (Speedy Site Editorial, 2020).
- Realistic Ideal: A realistic ideal page weight for most websites depends on the media types, technology and a balance between content richness and performance. A good aim is between 500KB to 1MB.
If we ensure users with slower internet connections can access our websites quickly, it will load even faster on faster connections. A good rule of thumb is to target a website that loads within 3 seconds on a 3G connection, which typically has a download speed of around 1-4 Mbps (Greenwood, 2021).
Median desktop page transfer size has increased by 677KB between 2015 and 2019. An increase of over 50%.
Challenges Encountered in Building a Sustainable Internet
Despite its undeniable value, sustainability faces challenges in web design. It frequently comes into conflict with immediate business objectives, encountering resistance to change and financial concerns as common hurdles. Nevertheless, there are additional challenges:
- Resource-Intensive Tech: Embracing evolving web technologies, often resource-intensive, presents added complexities for sustainable web design. Widespread AI adoption brings challenges in ethical AI usage and energy efficiency (training an AI model can emit 626 lbs of CO2) necessitating a careful balance of benefits and environmental impact (Hao, 2019).
- Time to Market: Changes towards sustainability take time to implement, and making the product profitable often takes precedence in boardrooms.
- User Expectations: Meeting user demands for rich experiences may conflict with sustainability goals.
- Legacy Systems: Retrofitting sustainability into legacy systems and content poses technical and logistical challenges.
- Global Variability: Varying regulations and infrastructure worldwide complicate sustainability efforts.
- Competitive Pressure: Since most companies have a common and finite pool of resources, staying ahead of the curve means sustainability can take a backseat.
What can YOU do?
Set performance budgets to ensure a functional yet eco-friendly web. Benchmark, estimate theoretical efficiency, set achievable budgets, and challenge yourself with stretch goals.
1. Benchmark
Measure the relevant metrics of best in industry web pages.
- Page weight - how much data is used for loading page for the first time?
- App data and battery usage - Mobile phones can show how much resources are consumed by an app. We can define how much battery and data should be consumed by the product for each user per average session time.
- Host - Switching to a green server host does not cost much more than an average hosting service. If possible, make the switch.
2. Estimate what’s possible and set a budget
Estimate what is theoretically possible in a best-case scenario.
If there is a huge gap between the best in industry and the theoretical best case, then we have the opportunity to set new standards in our sector.
3. Set a stretch goal
If your industry allows it, you can be more ambitious and set your stretch goal at 450kb for a webpage, for example. This not only helps push you to deliver higher levels of efficiency, it also gives you an interesting challenge.
The important thing to note is that the budget for each metric should be one you are confident is achievable. That way, we know we’re setting ourselves up for success.
Consider if you can...
- Switch to Ecosia search engine - it’s powered by Bing and the advertisement revenues go towards reforestation projects in vulnerable biodiversity zones!
- Provide optimised route calculation to reduce travel time and overall distance travelled by sales representatives and delivery executives.
- Measure your website’s carbon footprint. Statsy, the analytic tool created by Dodonut and Bejamas allows measuring websites' performance, impact and carbon footprint by following the GDPR policies and reducing the data collected.
Choose the right file formats for media
- WEBP is 25%-34% lighter than JPEG (Google for Developers, n.d.), while AVIF is emerging as an even more efficient alternative for JPEG, PNG and even GIFs.
- GIF - Highly inefficient, works best under 8-bit colour images. Can be replaced with Lottie, WEBP or MP4 formats.
- SVGs can replace photographs with their lightweight imagery combined with CSS for the same or greater impact. While the content remains engaging and easy to understand, it can also require minimal data usage.
If you are a User Experience Designer...
- Embrace a minimalist design for efficient resource use and prioritize short, intuitive user journeys.
- Design for accessibility, ensuring your digital products cater to a diverse audience, reducing the need for redundant solutions.
- Utilize existing components when suitable, avoiding unnecessary reinvention and streamlining development efforts.
- Construct scalable designs capable of handling high traffic, with expandable ecosystems accommodating additional features seamlessly.
- Eliminate yoyoing user journeys by providing easy navigation, creating a seamless experience with streamlined information architecture.
- Empower users with a single settings menu, managing resource consumption through options like resolution, dark mode, and content preferences.
- Provide contextual help within the app to minimize customer support resources, enhancing user understanding.
- Prioritize a mobile-first approach, focusing on essential features for users with limited screen space and bandwidth.
- Optimize for mobile to set a foundation for desktop and tablet applications, considering the predominant mobile internet traffic.
- Employ low-fidelity designs for iterations, reducing energy consumption and minimizing redevelopment needs in later product stages.
Instead of asking “would this be nice to add?”, ask “can we live without it?” - Tom Greenwood
If you are a Visual Designer…
- Use system fonts as they require no additional server requests and data transfer. Use them for body text and consider reserving non-system fonts for headings so they make a lasting visual impact.
- Font services like Google Fonts have easy to integrate APIs. For unique fonts, WOFF and WOFF2 are higher compression formats that can drastically reduce file size.
- Create a concise design system with all the components that can be reused across different sections of the product.
- Build responsive designs that work well on most platforms and screen sizes, rather than having multiple versions for different devices.
- Dark mode can useful on OLED and AMOLED screens, given the colour contrast is high enough. White text on black background can make text harder to read sometimes. Aim to obtain AAA level contrast rating.
- Refer Web Content Accessibility Guidelines (WCAG) to find accessibility benchmarks to adhere to.
- 72dpi for images is enough to be perceived clearly on a screen.
- Blurring the background (lesser details lead to smaller files) in photographs will render significantly smaller images, up to half the original size!
If you are a Developer…
- Write reusable code… it saves time, energy and carbon emissions! Adopt a modular development approach, which allows for easier updates and maintenance, reducing the need for complete overhauls and thereby conserving resources.
- Choose a green hosting provider. They probably don’t cost more than your existing service providers. For example - Amazon, Cloudflare and GreenGeek (located in India). If the hosting provider’s servers are located closer to end users, that’s even better as that means lesser megabyte miles.
- Wherever possible, replace JavaScript functionalities, animations and interactions with CSS.
- Minimize the use of third-party libraries and frameworks, as these can add bloat to your applications and increase energy consumption.
- Although it is obviously what we are all working towards, we need to optimize the size and format of assets to reduce loading times and bandwidth usage, which in turn reduces energy consumption.
- Implement caching and lazy loading to reduce server load and improve load times, which in turn reduces energy consumption.
- AutoPlay videos, video backgrounds and unnecessary motion graphics and effects are expensive to load while also being disorienting for some audiences. For example, adding a simple fade-in effect to page load increased peak CPU usage by 22% (Greenwood, 2021).
- Optimize your applications for mobile use, ensuring they are lightweight, have fast load times, and use mobile resources sparingly to reduce energy consumption on mobile devices.
- Consider developing Progressive Web Apps that provide a near-native app experience while being more lightweight and requiring less data and energy to use compared to traditional applications.
The amount of data transferred is determined by 3 things: the size of each page, the number of people visiting the site, and the number of pages each person visits on their journey through the site. Designers, developers and marketers, all must be on the same page and work together to create more sustainable and inclusive products.
If you work in Financial Services…
Wherever possible, allow users to track and mindfully minimise their carbon footprint. Forbes.com has found that consumers (GenZ'ers and millennials in particular) want banks to help them manage their climate impact through more than just carbon trackers on spending analyses.
- Promote sustainable investment options like green bonds and renewable energy organizations, if possible. Green credit cards provide good incentives on purchases made from climate friendly businesses.
- Adopt E-signatures to eliminate paper waste.
- User rewards can be tied up with brands that publicly contribute to climate positive action, like incentives to engage with climate conscious and agro-businesses, or as simple as planting a tree on user’s behalf.
- We must do proper research and not fall for greenwashing because some of the cards advertised are “green“ are actually backed by banks with significant investment in fossil fuel markets.
- Climes | High-Quality Carbon Removal Built On High-Quality Incentives and Patch | The platform scaling unified climate action are services that allow users or businesses the choice to offset their carbon footprint in exchange of carbon credits that they can invest in a portfolio regenerative projects across vulnerable biodiversity hotspots.
In conclusion...
At a time where climate change poses an existential threat, the adoption of sustainable practices is not merely an option; it is a necessity. While challenges may loom large, they are not insurmountable. Just like accessibility guidelines have been widely adopted to make the internet a more inclusive space, standardized sustainability guidelines will make sure nature, humans and technology are able to thrive together.
The effort to reduce our digital footprint is a collective one. Developers, designers, product managers and service providers all play essential roles in optimizing web products and minimizing energy consumption. Whether it's optimizing code, setting performance budgets, or adopting green hosting providers, every small change moves us to our goal. By embracing a long-term commitment to sustainability, we can pave the way for a greener and more inclusive digital future.
Margaret Mead's words ring true
“Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it’s the only thing that ever has.” - Margaret Mead
