14 Ways to Design and Develop a More Sustainable Website
By Deborah Keltner
Could you have a more sustainable website?
While the shift from analog to digital content has kept trees out of paper mills, it has undoubtedly contributed to the climate crisis because of the carbon footprint of technology. Whether it’s e-waste or energy needed for computing, the tech sector has a huge opportunity to lessen its impact on our earth’s climate.
We need to reach net-zero greenhouse gas emissions by mid-century to keep the global temperature below 1.5 degrees Celsius. You can learn more about Earth Day and its supporting events & initiatives here.
In honor of Earth Day, we are sharing a list of ideas, tips, tricks, and insights to help website designers and developers deliver more sustainable websites. We are still learning more about how to deliver more sustainable technologies, so if you have additional tips and tricks, we want to hear from you!
Let’s get started!
You are reading this on the internet! Did you know that the use of the internet alone causes emissions of approximately 2,330,000 tons of carbon and consumes 2,340,000 MWh of electricity every day? If you found this article via a web search, your search consumed about 0.3 Wh of energy and released 0.2g of carbon into the environment. It’s not much on its own, but it adds up.
Do you want to reduce your website’s carbon emissions?
Did you know: Offsetting the carbon from our website requires the work of 12 trees every year.
You can reduce the carbon emissions associated with your website by reducing the amount of electricity used to load, send, and view a web page, and then ensuring the resulting electricity required to access and use the site comes from clean, renewable resources.
Designers and developers have a lot of influence over the energy efficiency of the websites they design and create. Here are 14 tips for you to design and develop a greener an more sustainable website:
- Get rid of unnecessary code, which uses computing power without benefiting users. If you have large blocks of commented-out code, don’t let it slip into production. Keep code clean and simple, avoid duplication and write efficient queries. This doesn’t just apply to the code you write, but also to the code you borrow. If you use existing frameworks and libraries, ensure that they are also refined and tailored to efficiently deliver the functionality you need and that you are not using over-built code. In cases where you are using a CMS like WordPress, avoid unnecessary plugins that add bloat and choose plugins that minimize server load and don’t add unnecessary weight on the front end.
- Use compression. Some compression techniques can save data without compromising quality.
- Consider programming language efficiency when choosing between programming languages. Less efficient languages have a higher carbon footprint.
- Run computations on the server side. Data centers are more efficient than end-user devices.
- Choose green cloud vendors. Ask whether your cloud provider uses sustainable energy sources.
- Keep digital efficiency top-of-mind. Every day is Earth Day when you are prioritizing energy-efficient decisions. Our site is run on renewable energy, which helps offset our impact.
- The goals of SEO are aligned with the goal of reducing energy consumption. When optimizing a website for search rankings, we help people find the information they want quickly and easily. When SEO is successful, people spend less time looking for information and visiting fewer pages that don’t meet their needs. This means less energy is consumed and the energy that is consumed is used to deliver value to the user.
- Copywriting also impacts the amount of time people spend browsing your site. We don’t want people to waste time sifting through content that offers them little value, so clear and efficient copy can reduce wasted time and in turn reduce wasted energy.
- Good user experience makes using the web easier and reduces the amount of energy wasted navigating to pages that don’t serve the correct purpose and trying to decipher what they should do next. Obviously, our UX Design team is here to help!
- On most websites, images are the single largest contributor to page weight. The more images you use and the larger those image files, the more data needs to be transferred and the more energy is used. Regardless of any technical optimizations, designers and content creators should think carefully about their use of images.
- Does the image genuinely add value to the user?
- Does it communicate useful information?
- Could the same impact be achieved if the image was smaller?
- Could we reduce images that are not visible to the user, such as in carousels?
- Could we achieve the same effect with a vector graphic (or even CSS style) instead of a photo?
- Video is the most data and processing intensive form of content. As with images, ask yourself if videos are necessary. If they are, reduce the amount of video streamed by removing auto-play from videos and by keeping video content short. A website with video playing can be one or even two orders of magnitude heavier than a website without video in terms of page weight and creates much higher load on the users CPU, resulting in vastly greater energy consumption.
- Web fonts can add significant file weight to the websites on which they are used. A single font file could be as much as 250kb, and that might only be for the standard weight. If you want bold, add another 250kb. To reduce the impact on custom web fonts, designers should consider the following options: Use system fonts where possible. Fonts like Arial and Times New Roman can be used without loading any font files at all as they are already on the user’s device, and try to be frugal in the number of typefaces you choose and in the number of different weights that you use for each typeface.
- Build static web pages. CMS-powered websites make queries to the website database and dynamically generate pages, so the webserver has to do work thinking about what information to send back to the user each time someone tries to load a page. That causes the server to use more energy. In some cases, it may be possible to simply server static web pages with no database at all by writing the web pages as static files in HTML, CSS, and JS, or by using a static site generator or specialist static web host to convert your CMS-powered website into static files.
- Consider reducing white space and embracing dark mode. Dark websites were one of the first techniques popularized for saving energy on websites many years ago and it faded away with the advent of LCD screens, which had a permanent backlight, using the same energy regardless of the color actually visible on the screen. However, with the advent of OLED screens that light up each pixel individually, using darker colors is once again a viable technique to reduce energy on end-user devices.
If you’d like to estimate the carbon footprint of your website, this tool is easy to use. In fact, it’s how we learned that our website needs improvement (we’re currently running dirtier than 78% of similar websites and producing 2.14g of carbon every time someone visits our site). https://www.websitecarbon.com/.
You may not be able to do every single one of these things, but every action you take to produce a sustainable website adds up, so lean into greener design and engineering on Earth Day and every day!
- Azure sustainability
- AWS sustainability
- How to Optimize Images for Better Web Design & SEO
- Which Programming Languages Use the Least Electricity?