Eco-friendly web design: How to create a sustainable website
Eco-friendly web design acknowledges that digital technologies and the internet can have a harmful side to them for people and the planet. In this article, we summarize the concept of a sustainable website, explain its intuition and share actionable recommendations to make your webpages more sustainable.
What is a sustainable website?
Sustainable websites are designed with the future of people, our planet and profit in mind. They run on renewable energy and consume the least amount of it. In addition, they are ethical, value-adding and non-exploitative.
Why should websites be sustainable?
According to the report “Lean ICT: Toward Digital Sobriety” from The Shift Project, the internet and digital technology caused 3.7% of GHG emissions in 2018 – which is comparable to the global airplane industry.
While it has become common practice that the media, as well as users on social media, rip on politicians for their domestic flights, not a whole lot of attention is brought to the environmental impact of the internet – despite its rapid growth.
The research predicted that the 3.7% from 2018 will double by 2025. However, the figure is likely going to more than double, as COVID is further accelerating digitization.
This is why we need eco-friendly websites.
Characteristics of a sustainable website
As defined in the Sustainable Web Manifesto, a sustainable website should have the following characteristics:
To understand how these characteristics can make a website more sustainable, let us challenge the Manifesto a little by plotting them against another framework, the Sustainability Triangle.
The Sustainability Triangle
Sustainability is about “meet[ing] the needs of the present without compromising the ability of future generations to meet their own needs” (Brundtland, 1987). It has three pillars:
- Economic (profits)
- Environmental (planet)
- Social (people)
Together, these pillars form the Sustainability Triangle.
Validating the Sustainable Web Manifesto
The characteristics in the Sustainable Web Manifesto form a robust framework because they are targeted and exhaustive. They are each catering to at least 1 pillar of the Sustainability Triangle, and each pillar is getting addressed by at least 2 commitments in the Manifesto.
1. Clean
| Commitment | “The services we provide and services we use will be powered by renewable energy.” |
| Pillar | Environmental |
2. Efficient
| Commitment | “The products and services we provide will use the least amount of energy and material resources possible.” |
| Pillars | Economic, environmental |
3. Open
| Commitment | “The products and services we provide will be accessible, allow for the open exchange of information, and allow users to control their data.” |
| Pillar | Social |
4. Honest
| Commitment | “The products and services we provide will not mislead or exploit users in their design or content.” |
| Pillar | Social |
5. Regenerative
| Commitment | “The products and services we provide will support an economy that nourishes people and planet.” |
| Pillars | Economic, environmental, social |
6. Resilient
| Commitment | “The products and services we provide will function in the times and places where people need them most.” |
| Pillar | Social |
How to measure the GHG emissions of your website
Sustainability is difficult to measure and compare. One way of quantifying the sustainability of your website is by looking at greenhouse gas (GHG) emissions.
Greenhouse gas emissions only express how clean (1.) and efficient (2.) your website is. They cannot assess the other characteristics defined in the Sustainable Web Manifesto, which are more qualitative and strategic in nature.
You can use the following calculator to estimate the GHG emissions of your homepage: Website Carbon Calculator.
While the calculator provides actionable data, you need to consider the following limitations:
- The current version (V2 in 2021) of the calculator only makes estimations based on your homepage, not the whole website. Read more about how it works.
- Furthermore, it only looks at users, datacenter power consumption etc. It doesn’t factor in the web development with its GHG emissions and resources.
- The Website Carbon Calculator tends to cache test results server-side for a long time. If you test your homepage, optimize it and then test it again, it may still show the results from the first test. Pay attention to the indication “This page was last tested on [date]”. In doubt, test your homepage again in a few days.
- Your website might not be the only one the user visits. Therefore, it’s crucial that it adds enough value to progress the user’s journey. In this way, your website will reduce or even eliminate the user’s need to visit other, possibly less sustainable websites.
- To make your website truly sustainable, you also have to meet characteristics 3. – 6. from the manifesto.
How to make your website more sustainable
To create a website that is economically, environmentally and socially sustainable, we recommend the following measures:
- Host your website on green energy
- Do SEO and match search intent
- Optimize images
- Optimize video
- Audit your plugins and scripts
- Minimize Cumulative Layout Shift
- Simplify fonts
- Use rel=’preconnect’
- Implement a caching strategy
- Use a CDN
1. Host your website on green energy
Green hosting providers run their datacenters on renewable energy. In his article on utopia.de [in German], chief-editor Winterer distinguishes between two separate qualities of of green hosting providers:
- Recommended: Providers who indicate who their green energy supplier is, buy from a commendable source and commit themselves further to be sustainable.
- Not recommended: Providers who do not indicate who their green energy supplier is or buy from a source that is still engaged in the fossil power sector.
Choose a provider with reliable uptime and service, or Google will deindex your website. Providers that fully or partially operate with renewable energy credits (RECs) are better equipped to maintain near-perfect uptime all year round. This is because they can temporarily switch to fossil power and RECs if their main green energy supplier has an outage.
Once your website is hosted green, you can communicate it with a label from the Green Web Foundation.
2. Do SEO and match search intent
Search engine optimization used to revolve almost entirely around keywords. A few decades ago, SEO agencies would:
- Identify keywords such as “sustainable website”,
- write an article containing this keyword as often as possible and
- build backlinks from other websites with “sustainable website” in the anchor text.
While part of this is still true today, Google has much evolved as a search engine. It no longer just displays results where keywords syntactically match the user’s search query. Instead, it now understands – on a semantic level – what the user is looking for and displays results that match the search intent.
Why is SEO sustainable?
SEO is economically sustainable because it helps businesses grow: long-term and in a cost-efficient way. It is socially sustainable because it is about helping people find what they are looking for. And it is environmentally sustainable because it reduces the users’ need to visit (multiple) other, potentially less eco-friendly websites.
Use content clusters and internal linking
By organizing your content in clusters, i.e. introductory hub articles that link to related, deepening spoke articles and vice versa, you can cater to the secondary search intent of the users.
While primary search intent is about serving the immediate need of the user, secondary search intent is about answering further questions that the user encounters in their research.
Content clusters and internal linking can help fulfill secondary search intent, which eliminates the need to go back into Google and conduct another web search.
Just one caveat
A website with perfect SEO will draw in a lot of traffic, which emits a lot of carbon. However, the users will be searching anyway, with or without your sustainable website. If your “perfect” website is eco-friendlier than others and the only website users need to visit, this will save even more carbon emissions on a macroeconomic scale.
3. Optimize images
Images, especially if they are not optimized, contribute significantly to the file size of your website data. They cost power to host and download and are therefore responsible for a notable share of website GHG emissions.
Use less images
Before you take the effort of optimizing your images, double-check if you could remove a few images instead. For example, there could be decorative images your sustainable website doesn’t really need, or redundant images that add no value because they are too similar to other images on the same webpage.
Lower image resolution and quality
There are several ways you can make images smaller. A lean method that does not require much technical setup involves uploading your images to tinypng.com. It is a free online service for WebP, PNG and JPEG compression. Alternatively, if you own Photoshop, you can choose the option “Export for web” when saving images.
If your website runs on WordPress and you prefer to do eco-friendly image optimization within the CMS, you can purchase WP Smush Pro. The plugin also includes an easy way to implement “lazy loading”, which defers offscreen images and improves the speed of your webpages.
From a socially sustainable point of view, it is recommended to input alt texts. Alt texts are image descriptions that appear when the user can’t see the image. For example, a visually impaired user may have a screen reader that reads out the alt text. Or the browser will display the alt text if the internet connection does not suffice to load the image.
Choose efficient file formats for your sustainable website
| Image format | Use case |
| JPEG | For photos and figures with complex shading. |
| PNG | For images with partial transparency. |
| GIF | Use GIF and apply CSS image sprites for elements that are used frequently, such as logos or icons. |
| SVG | For figures and illustrations with simple colors. SVGs do not support alt texts and require a special setup to work in WordPress (coming soon). |
4. Optimize video
There is a lot of contradicting information on the carbon footprint of streaming video. However, it appears to be common sense that most videos are larger in file size than images, and therefore an important factor in sustainable website optimization.
If users can stream long-form videos on your website, our recommendation is usually as follows (exceptions apply): Embed the video content from a service such as YouTube (for public videos) or Wistia (for videos behind a login).
Efficient video encoding is quite difficult to pull off, especially for businesses who can’t exploit economies of scale and scope in that field.
On the other side, Google have been running on 100% green energy for 4 years in a row and intend to keep going. Creating shared value from efficient video encoding is part of Wisita’s business, as well as their self-conscious sustainability statement.
5. Audit your plugins and scripts
When was the last time you double-checked that all of your plugins and scripts are efficient, adding value to your business or clients, and free from errors or incompatibilities?
Example: We’ve audited a website that used Lead Forensics to make sure it reaches the designated audience. It is good to be self-critical and question the effectiveness of your marketing activities. However, if that’s your only motivator for using Lead Forensics, entering a long-term contract with them may be a little “overkill” – especially if your business lacks the resources to act on lead analytics insights.
Another example: A client’s website had a script that would forward users to specific language subdirectories based on their GeoIP data. In some cases, this would cause the page to refresh in a different language about 5 seconds into the session, causing expats – an important audience segment in their niche – to abort.
Both examples demonstrate that sustainable website optimization can target users (socially sustainable), the business (economically sustainable) and GHG efficiency (environmentally sustainable) at the same time.
What are you waiting for? Audit your plugins and scripts now, or hire a trusted online marketing agency to manage your eco-friendly website optimization.
6. Minimize Cumulative Layout Shift
Cumulative Layout Shift (CLS) takes place when layout elements shift around during the loading process of a webpage.
This typically occurs when elements with a long load-up time are placed above elements with a speedier load-up time.
The usual suspects include images, embedded elements, ads and dynamically injected content such as contact forms or content discovery modules (“this may also interest you”).
Sustainable websites make sure to define the dimensions of every relevant element using the height and width attributes in CSS. This will make the Page Experience smoother, improve your visibility in Google and reduce some of the GHG emissions associated with lengthy load-up times or frustrated users.
7. Simplify fonts
Web fonts are popular among marketers because they can have a positive impact on user retention and branding. Legibility and readability are key attributes of a good web font.
However, web fonts need to be downloaded just like any other file to display correctly. The environmental impact of a non-system font in terms of GHG emissions is comparable to that of a small image.
Hence, we usually recommend our clients to stick to a maximum of 2 web fonts on their sustainable website. You can optimize most fonts by compressing them.
Tip: In WordPress, if you are not planning to use any emotes, you can disable emotes and their scripts in the functions.php.
Here you can find sample code to disable emotes in WordPress:
As an eco-friendly WordPress agency, we like to store web font files locally in the website’s database. In this way, users won’t have to download them from a third-party server (e.g. Google) and we can control the font compression. Please note that Adobe fonts are not eligible for this approach.
If you want to go even further and nullify your website’s environmental impact from font downloads, you can stick to system fonts such as Arial and Times New Roman.
8. Use rel=‘preconnect‘
You can apply the preconnect attribute to load certain files simultaneously which would else be loaded separately one after another. This can speed up your website, make browsing it more power-efficient and ultimately reduce GHG emissions. Read more about this in our Core Web Vitals guide.
9. Implement a caching strategy
Web caching is about storing website data so that future requests for the data can be processed more quickly.
According to Daniel & Daniel (2012), “web caching was developed for two primary reasons: to reduce load on web servers and to improve the Internet user’s experience while browsing the web”.
A sustainable web caching strategy needs to consider:
- The frequency of content changes and
- the importance of content changes.
The duration of caching needs to be set in a case-by-case decision depending on the type of content. A long caching duration is better for the climate, but in some cases, it may be outright misleading.
For example, when the Website Carbon Calculator cached our website’s GHG emissions for too long, we first assumed that our website sustainability optimizations had no effect.
10. Use a CDN
CDNs, i.e. Content Delivery Networks, exist to narrow the geographical distance between server and client.
This can speed up the loading time of your website and save power as the user reaches their destination more quickly. In addition, bounce rate, as well as pogo-sticking, are reduced.
Questionable methods
In our research for this article, we have come across a lot of excellent recommendations on how to create a sustainable website – but also a few we don’t agree with. Certain methods are outdated, unrealistic or conflicting with best practices in online marketing. This topic warrants some myth busting:
- Be cautious about using AMP
- We don’t usually recommend static web pages
- Don’t just flat-out block all bots
- Leave content deletion in the hands of an expert
- Think twice about dark mode
- Don’t stop at carbon neutrality
1. Be cautious about using AMP
AMP is an HTML framework with the purpose of creating Accelerated Mobile Pages. It was originally developed by Google and later went open source.
Some sources suggest that adapting AMP is a great way to reduce GHG emissions and make your website more sustainable.
However, we would advise against it. This is why you should not newly implement AMP:
- You’d have to manage a separate code base and fulfill complex requirements, which more than doubles the workload compared to managing just a single code base with a responsive web design.
- AMP will add gaps into your web analytics, as common tracking technologies are not fully supported. The quality of your data-based decision making could suffer.
- Allegedly, Google falsely told webmasters that using AMP would improve load times and artificially increased the load time of non-AMP ads by 1 second.
- Simultaneously, the AMP-related visibility boost in Top Stories seems to be gone and reputable SEO sites like Search Engine Land are turning off AMP.
In summary, using AMP is expensive – both in terms of budget and GHGs emitted in the development and content management. The benefits associated with it are disappearing. And in the context of recent news, supporting AMP seems to be ethically questionable.
If you were thinking of newly implementing AMP to make your website more sustainable, better don’t. If you are already using AMP, carefully evaluate if you still need it.
2. We don’t usually recommend static web pages
Static web pages are pages that do not use any CMS (content management system). They are lightweight compared to their CMS-based counterparts.
However, you can’t edit them online. Instead, you will have to download and re-upload them every time you want to make a change.
If you do not need to update your website often, static pages may be sufficient and the most sustainable choice. However, in our experience, most business websites have to be updated quite often. Statistically, there are more websites that run on WordPress, the most popular CMS, than websites without a CMS.
Selecting the right CMS – or no CMS at all – should be a case-by-case decision, as covered in our WordPress vs. Typo3 comparison article (coming soon). GHG emissions from the users’ traffic are just one among many factors at play.
3. Don’t just flat-out block all bots
Some authors suggest to save energy by blocking bots from accessing your sustainable website. We can see where they are coming from, but to an online marketing novice, this advice could be dangerous.
One of the primary concerns in SEO is to increase the crawlability and indexability of your site in an effort to make Googlebot visit it more often and more thoroughly. This, after all, is how your pages get listed in Google.
Unless you know exactly what you are doing, please do not block any bots without consulting with your SEO agency or a trusted online marketing professional.
4. Leave content deletion in the hands of an expert
Content King, an SEO SaaS provider, has written a 3,000-words guide on content pruning to improve your website. It involves creating a content inventory, auditing the content and making a case-by-case decision on what should happen with it.
Here is what you can do with bad or outdated content:
- Update
- Trim
- Move
- Merge
- Repurpose
- Noindex
- Delete
Tl;dr: Content pruning is a complex topic. It’s about so much more than just deleting. You only delete content after a careful assessment and ruling out all other options. Don’t remove too much at once, or Google may re-evaluate your entire website.
Don’t just delete content because you’ve read somewhere that it will help save the climate. In doubt, hire an experienced content marketing agency to prune your content for you.
5. Think twice about dark mode
Various websites and apps come with an optional dark mode toggle. Does that make them more sustainable?
Probably not. Dark mode is meant to reduce eye-strain and increase your productivity at night. However, according to Justin Pot from zapier, several studies have found that dark mode actually worsens our reading comprehension. In addition, it makes us sleep less as we tend to spend more time on our phones in bed. This means, bluntly put: Dark mode is bad for people and therefore not socially sustainable.
How about the environment? Due to technical reasons, dark mode websites will consume the same amount of power as bright ones on backlit LED screens. Only OLED screens can save power on dark websites, but those are not very common.
As long as OLED screens are still a premium product and largely unavailable, you should not implement a dark mode to save power. Think about the costs in terms of money and GHG emissions associated with the dark mode redesign: Colors, styles and images of your website will have to be adjusted.
6. Don’t stop at carbon-neutrality
To make your website carbon-neutral, you can host it at a green provider, reduce its power consumption and offset its carbon footprint.
The latter is commonly done by investing into carbon offset projects that aim to reduce carbon emissions elsewhere, along with other benefits.
Communicating that your company or brand has carbon-neutral website makes for a ‘sweet PR story’ that might win the hearts of certain segments within your target audiences.
However, we at svaerm see several problems with carbon-neutral websites:
- More often than not, website GHG emission estimates are inaccurate. Tools like the Website Carbon Calculator, which fail to account for the emissions from web development and other operations, may systematically underreport the emissions. Offsetting those estimates will not be enough to achieve true carbon neutrality.
CO2 scrubber by climeworks - Unless you’re deploying CO2 scrubbers, chances are that whatever carbon offset project you picked to offset your exact emissions is not good enough. Most carbon offset projects only reduce emissions elsewhere, they don’t extract GHGs from the atmosphere.
- Why settle for a carbon-neutral website when you can have a carbon-positive website? Instead of going out of your way to precisely offset your website’s emissions, you should try to overcompensate them. That saves you a lot of math – and makes for an even better story.
- Fortunately, the aforementioned issues can be addressed through meticulous sustainable website optimization principles and a bold over-compensation of your website’s GHG emissions. In addition, a truly sustainable website will create shared value for your company, customers and online visitors.
We urge our clients to think critically about website carbon neutrality. If you approach the issue too shallowly, you might enter blatant greenwashing terrain. Do not treat sustainable websites like just another quality badge or marketing award to advertise with, but aim for a carbon-positive website as an integral part of a holistic, sustainable corporate culture.
Summary
Sustainable websites need to be profitable, mind the planet and generate value for people long-term. Tools such as the Website Carbon Calculator provide a very rough estimate on website GHG emissions.
To achieve website carbon neutrality, you can host it on green energy. We recommend providers who indicate that they buy from a trustworthy green energy supplier and who can resort to REC-based green energy.
You can also reduce its power consumption through file size, speed and usability improvements. Focusing on search intent, video, image and plugin / script optimization is the most promising.
Lastly, you can compensate your GHG emissions through carbon offset projects. Creating a sustainable website is neither a precision landing, nor a PR campaign. Be bold in overcompensating your carbon footprint, but humble and self-aware in your communication.
Your partner for sustainable websites
svaerm offers bespoke and holistic online marketing services for business – including sustainable website optimization. Please send us your inquiry and project details. We will review them and get back to you as soon as possible. Thank you.
