Sustainable Web Design: Come on, let’s make the internet cleaner!
As a result of the data transfer, the energy consumption in the data center and the electricity used for the end devices, carbon is emitted every time someone accesses a website.
Our goal is to make the internet a bit more sustainable, so we not only offer relevant statistics where the data is 100% yours, but also contribute with you to a better climate and offset the carbon emissions caused by your website with the help of atmosfair.de.
Of course, offsetting the carbon emissions is not enough, so on this page you will also find tips on how you can additionally reduce the carbon emissions of your website.
What are the advantages of sustainable web design?
Optimizing your website to cause less data transfer and CO2 emissions provides even more benefits for you:
User Experience
There is a big connection between sustainable web design and better UX. If a visitor finds his way to his destination faster, he is not only happier and less likely to abandon his intention (e.g. buying a product in your online store), but also less resources are consumed as a result.
SEO
For search engines, the loading time of a website is becoming increasingly relevant in the evaluation. Efficient websites with smaller amounts of data load faster and thus appear higher up in the search results of major search engines.
Accessibility
Visitors have different needs. Poor internet connections, old devices, expensive data plans: if your website is optimized and works well and fast for all these groups, you will reach more people.
Hosting costs
Hosting better adapted to the needs of your website reduces the costs for you.
Future carbon regulations
In all likelihood there will be some form of surcharge or tax on carbon emissions in the coming time. Prepare now and don’t react when it’s too late.
A USP
If your website or online service produces less carbon emissions and/or offsets them, you can communicate that. A growing number of visitors view this positively.
How to reduce website emissions
General tips
Lower CO2 Emissions = Better User Experience
As mentioned above, optimizing your website to emit as little carbon as possible often goes hand-in-hand with improving the user experience. That’s good for you, because you’re killing two birds with one stone. First things first:
A concrete plan provides clarity.
Based on the current data from PRYVY Analytics and the comparison with other sites, you can consider how many CO2 emissions could be saved on your website.
Look at individual sections and components of your website and consider: Does this part of the site benefit your visitors? “If in doubt, leave it out!” (example: the very reduced google.com frontpage) – Minimalism has many advantages, especially for your visitors. It makes it clearer to them what the purpose of your website is. In addition, you can also see from your statistics which pages are frequently clicked and which are very rarely. Sort out here calmly, or summarize.
Good navigation is key.
Look at the “User Journey” of your website. How many clicks (new page loads or views) do visitors need to get to their desired destination? Can the number be reduced? Example: A furniture website that already contains all furniture categories and their subcategories in its navigation leads the user very quickly to the desired subcategory → only one click, not two or even more. This not only saves on data transfer, but also leads to more satisfied visitors.
Good navigation is key: it also avoids “yoyo browsing”, i.e. a user clicks, then realizes they are not where they wanted to be, and would have to go back to the home page to find the right path on a website with poor navigation. If the navigation is better structured, he will reach his destination with fewer clicks.
Understand people, design for people
Reduce text length: this does not save a lot of data, but it is the sum that counts. Avoid duplicate content and optimize your texts for human readability. No one likes to read lengthy texts and search engines also find this unattractive, as they try to imitate human behavior in order to display the best possible results.
By the way, it is not always a bad thing if your bounce rate is high. Maybe the visitor already found what he wanted by visiting a single page? It’s best to check more closely why visitors bounce on a page, i.e. leave it again without further clicks.
Technical tips
Optimize images and videos
Proper handling of images can save large amounts of data.
File formats
It’s best to use the WEBP format for photography, because on average it allows 30% smaller file sizes than JPEG. More information and tools can be found here: https://webponize.org, https://www.gimp.org
Keep an eye on the AVIF format for images, it is even more efficient (about half the size of WEBP), but is not yet universally supported.
PNG and GIF are more efficient for simple graphics and illustrations with only a few colors and gradients.
For video files, the MP4 format is more efficient than GIF and also provides better usability features such as easy integration of subtitles or a description of the video content.
Image / video sizing
Think about the pixel dimensions in which your image files are needed. Will they be used as small preview graphics (thumbnails), or as large background images? Think about responsiveness: different device sizes require different dimensions of the files. With HTML attributes like srcset and sizes you can tell the browser which image version to load and use in which device. This way, only the necessary dimension versions of the files are loaded.
Compression
Finally, for image files, use compression tools like Shortpixel, TinyPNG, and ImageOptim, which reduce file sizes using clever algorithms without visible loss of quality.
Photos usually have an important central focus point. The rest around it can be blurry without people considering it a visual disadvantage or even noticing it. Blurred areas of a photo save an unexpectedly large amount of file size.
Vector-based file formats like SVG work very well for icons or logos and have an extremely small file size. They can also be integrated directly into your website’s HTML code, saving additional server requests.
Dark Mode and Color Choice
Darker designs are not only easier on the eyes, but also use less energy from the LEDs and OLEDs in screens. This also saves battery life on end devices! Example: Google Maps uses 63% less energy on average in night mode.
Colors also play a role: to display blue color, the LEDs and OLEDs in the devices require up to 25% more energy than for red and green hues. Black requires the least amount.
Replacing Videos
Videos and animations can make a website more interesting, but they consume a lot of memory, energy and therefore battery power. So evaluate video content by the yardstick of whether it really adds significant value to the visitor. Tools like “Lottie,” a service from Airbnb, can make big file size savings here.
Every second of a video takes more storage and therefore energy than a single JPEG image. So make your videos shorter and, if possible, replace them with images. Keep in mind the user and the content you want to convey.
Autoplay
Avoid auto playing videos: only when a visitor really wants to watch a video should it load.
GIFs
As cool as GIFs are, they are among the most inefficient video files around. If possible, try to convert them to WEBP format, which is widely supported by current browsers.
Animations
Effects and animations created with CSS and JavaScript can make a website more interesting and lively. Generally, the file size of such animations is lower than that of videos, but on the other hand, the hardware (CPU and GPU) of the end device is more demanded by the visitor for the calculation. Not all users have the most energy-efficient devices available, so it is more considerate to keep the hardware load low.
Fonts
Fonts: custom fonts is a very popular way to make websites more attractive, but they generate additional requests and therefore higher page weight (total file size of the website). This increases loading times and energy consumption. Therefore, the most efficient choice are the pre-installed fonts, such as Arial, Times New Roman, Helvetica and Roboto (Android). If external fonts are unavoidable, check if you can do without certain weights: maybe “normal” and “bold” are enough for you, and you can do without “thin” and “semi-bold”, etc. If possible, use Variable Fonts, which can automatically display all weights from just one cut.
Optimize development
Programming language
The choice of programming language. A very large part of the Internet is written in PHP and JavaScript. Unfortunately, according to a comparison of the efficiency of different languages, they are at the bottom of the list. The winners are languages like C, Java, Swift or Go, but they are not so suitable for websites. However, there are also more inefficient languages than PHP and JavaScript: Ruby, Python and Perl are in last place and should therefore be avoided. (Study: https://greenlab.di.uminho.pt/wp-content/uploads/2017/10/sleFinal.pdf)
Static content
Try to pre-render as many pages of your website as possible and deliver them statically. Static content is always more efficient than content generated dynamically by PHP or using JavaScript solutions such as Angular, React or Vue.
One method for doing this is caching. For this, you can use plugins like “WP Rocket” for WordPress.
A modern method of structuring the structure of a website is the so-called JAMstack. This stands for “JavaScript, APIs, and Markup”. Here, all possible contents of your website are automatically delivered statically, without the connected CMS having to generate the contents dynamically first. The CMS is only activated when it is used to change the content. This is called “serverless” web design and it is estimated to reduce resources by a three-digit factor compared to a standard WordPress instance.
Avoid Scripts
Avoid tracking scripts. You’re already on the right track with PRYVY Analytics, because most others consume a lot more resources. The PRYVY Analytics tracking script needs just 0.2 kilobytes, whereas Google’s Tag Manager needs 28 kB, Google Analytics 17 kB or Matomo/Piwik 22 kB.
Fonts
Fonts, if desired for the design, can be optimized: for example, convert them from TTF format to the more efficient WOFF2 format. With the Webfont generator from Font Squirrel you can make even more precise improvements to your fonts: do you need support for all languages and their special characters in the font? If you save only a part (= subset) of the font you really use in the website, you can significantly reduce the file size in a few minutes.
Compression
Compression of the code. Tools like CodeKit convert your code into a more efficient format. This works with JavaScript, CSS, PHP and even image files.
Cleaning Code
Unused CSS and JavaScript code can be identified with the Code Coverage Tool in Google Chrome and then removed if necessary.
Blocking Bots
It is estimated that about half of the world’s Internet traffic is caused by bots. Some are necessary to keep search indexes up to date, for example, but many bots cause unnecessary server load without providing any benefits. Bots can be blocked by firewalls that some hosting services offer. Contact your hosting provider for that.
Hosting
Very few websites could be hosted on a RaspberryPI at home – even though that would probably be the most efficient method. However, it doesn’t always have to be your own big server in the data center. Try to find the hosting solution that is optimally adapted to the resource consumption of your website. The easiest way to do this is via “shared hosting”, i.e. the use of a server by several websites that share it. This way, fewer available resources remain unused.
CDN
CDNs (Content Delivery Networks) mostly distribute static files of a website on different servers and are therefore geographically closer to visitors, which reduces the megabyte miles (the physical distance that the data travels between the web server and the visitor, for example) and shortens loading times. However, CDNs have unfortunately rarely been optimized for sustainability so far, so you have to be careful about which provider you choose.
Green power
CDNs (Content Delivery Networks) mostly distribute static files of a website on different servers and are therefore geographically closer to visitors, which reduces the megabyte miles (the physical distance that the data travels between the web server and the visitor, for example) and shortens loading times. However, CDNs have unfortunately rarely been optimized for sustainability so far, so you have to be careful about which provider you choose.
Conclusion
As you can see, for just about any website in the world, there are many different ways to optimize it for efficiency and thus usability and sustainability. Often, even a few “quick fixes” are enough to quickly achieve a big advantage without having to invest a particularly large amount of money and working time. Now it’s up to you!
For more information and studies on many of the topics addressed, we recommend reading the book “Sustainable Web Design” by Tom Greenwood, on which much of these tips are based.
Explanations
Average transfer size:
- https://httparchive.org/reports/state-of-the-web#bytesTotal
- https://httparchive.org/reports/page-weight
Status January 2021: Desktop: 2,063 kB, Mobile: 1,900 kB
Learn more about Sustainable Web Design