Communications of the ACM
How to Reduce the Carbon Emissions of Your Website
Traditional media are too hostile to the environment. Newspapers, brochures, flyers, catalogs, classic billboards, etc., consume natural resources, produce waste, and don't last long. Digital resources are different, right? Well, it's not so black-and-white.
For example, data centers consume about 416.2 terawatts per year, which exceeds Britain's total electricity consumption. And this number doesn't include the consumed resources and produced CO2 during the manufacturing process of all the devices.
It raises doubt whether digital media are as environmentally friendly as we used to think. However, we can control our online ecological impact.
Let's see how web experts can make the website more energy-efficient. By implementing these tips, you'll also enhance website performance and user experience.
How to Measure Your Website's Footprint and Why You Need It
Online activities produce around 4% of global greenhouse gas emissions, twice as much as aviation. When we consider the environmental impact of online media, we mean the following factors:
- data transmission over the cables;
- the energy that data centers, telecoms networks, and devices consume;
- the source of this energy (a data center may use grid electricity or harness renewable resources);
- website traffic (the more views a website gets and the more time people spend there, the more impact it will have).
For instance, these are the criteria for the Website Carbon Calculator to calculate any website's carbon footprint. It compares the amount of CO2 emissions with the examples, such as:
- sumo wrestlers weight;
- the number of bubbles;
- how many trees would absorb this amount of carbon;
- the distance that an electric car could travel with such an amount of energy.
It also provides advice on how to make your online presence more sustainable.
How Do Websites Differ in Terms of Energy Usage?
When we view websites, we use electricity, and electricity generation emits carbon. So the amount of page emissions depends on:
- how much work the server and client have to perform to load the page;
- how much data is required for the page; and
- the complexity of the path the data must take.
For example, loading and rendering example.com produces 0.00g of CO2, and it's the most eco-friendly website you can imagine. But we can't say the same about the Netflix home page. In other words, high emissions, slow page loading, and overloaded websites are symptoms of the same fundamental problem.
Credit: Website Carbon Calculator
Why You Need to Optimize the Website to Reduce Its Carbon Footprint
Everything's interconnected. Improving page load speed leads to better user experience, rankings in search, and conversions. It helps users get information more quickly and reduce carbon emissions. That's why any website owner needs to optimize their resources.
It's especially crucial for online stores where high competition requires constant improvement. As an online merchant, you need to speed up your Magento website or other CMS you choose to serve your store. Let's explore five ways to make your digital activities environmentally friendlier.
5 Strategies to Make Your Website Environmentally Friendly
1. Do You Need All Those Images?
Images are among the largest contributions to page weight on most websites. The more visuals you utilize and the heavier your files are, the more data travels and the more energy it takes.
What can designers and content creators do? They should think carefully about how they employ visuals:
- Is the image truly beneficial to the user?
- Is the conveyed information useful?
- Could a smaller image produce the same effect?
- Could photos that aren't visible to the user, such as those in carousels, be reduced?
- Could you utilize a vector graphic (or perhaps a CSS style) instead of pictures?
Stock photos of smiling people who are shaking hands roam from one website to another. But according to eye-tracking studies, people ignore them. That is, you could just as well leave a blank space and contribute to a greener future instead of stuffing the content with useless images.
Technical ways to optimize your images include:
- Consider the correct dimensions of your website to avoid loading larger images than it's needed. Then, load pictures according to these dimensions instead of depending on CSS to resize them.
- Reduce file size without sacrificing quality with the help of compressing programs like TinyPNG or ShortPixel.
- Utilize the most efficient file format, such as WebP instead of JPEG.
These measures allow you to compress files, lower energy usage, and improve load times with no negative effects on website users.
2. Are You Careful with Using Videos?
Videos aren't as widely used as images, but they're gaining popularity as a web content format. It's by far the most data and processing-intensive kind of information.
So if you utilize them, start with analyzing whether the videos provide value to users or you can delete them. If they're necessary, minimize streamed videos by turning off auto-play and keeping video content brief.
It applies to everything else on the page that isn't the main content. Decrease what doesn't contribute to the user experience. Heavier websites place a much higher burden on the user's CPU, resulting in substantial energy usage.
It doesn't mean you have to leave just plain text. Due to certain diseases, such as dyslexia, people can't read large blocks of text, while others would almost certainly find pages without visuals boring and leave. Instead, examine every aspect of your website to see what's worth keeping.
3. Do You Pay Attention to Web Fonts?
Creative web fonts can make a website more appealing, but the downside is the extra file weight they add to the page. The standard weight of a single font file can be as much as 250kb. Add an additional 250kb if you want to make it bold.
Font optimization can reduce file size up to 97%, even for custom fonts. Explore the following options to lessen the impact of custom web fonts:
- Opt for system fonts when possible. You may find fonts like Arial and Times New Roman less attractive, but they are already installed on the user's device. As a result, you won't have to download any font files.
- Limit font variations. Try to lessen the number of typefaces and different weights these typefaces have.
- Favor contemporary web font file formats with better compression methods like WOFF and WOFF2 rather than TTF, OFT, and SVG file formats.
- Fonts should only include the characters required for the webpage.
4. Can You Clean up Your Code?
Clean and simplified code should go without saying in any case. Avoid redundancy and write efficient queries by keeping your code tidy and straightforward.
Note that it's relevant to the borrowed code as much as to the code you write. What if you're going to use existing frameworks and libraries? Be sure they've been tuned and adapted to provide the required functionality.
Be reasonable in terms of employed plugins as well. Remove unnecessary plugins and choose those that reduce server load and don't add extra weight to the front-end.
5. Do You Overlook Server Caching?
If you use a CMS like WordPress or Drupal to run the website, pages are dynamically produced every time someone loads them. So what happens when you neglect server caching? Every page view requires server processing, increasing its energy consumption.
Employ caching solutions like Varnish to build static versions of each page so that users won't have to load the content like it's the first time. As a result, it minimizes server overhead, energy consumption, and load latency.
It's not easy to set up, but some hosting providers take care of caching, such as Kinsta and WP Engine. It enables you to increase your website's energy efficiency and performance effortlessly.
Conclusion
How can I harm the environment if I don't use or waste any "traditional" resources on the web, you ask? Yes, websites replace paper and don't produce waste, such as unrecyclable CDs. But the truth is, you use more than you might expect. The Web's carbon footprint is mostly due to its electricity consumption by:
- data centers;
- transmission networks, and
- end-user devices.
It may be hard to measure, but you certainly need to be aware of your impact within the web industry and try to decrease it. It takes simple steps, such as:
- sharing only what brings value;
- ensuring fast load speed with image and font optimization;
- making your website easier to navigate so that users won't have to use unnecessary resources;
- writing clean code;
- and so on.
The best part is that it improves SEO, online performance, and user experience. So an eco-friendly website means an inherently better business.
Alex Husar, chief technology officer at Onilab, has been working on Magento migration and development projects as well as building progressive web apps (PWAs) for more than eight years. He is an expert in full-stack development who shares his expertise and in-depth knowledge on modern technologies and Computer Software Engineering.
No entries found