Optimizing Website Sustainability – Metrics & Tools

We often think of today’s digital products as clean technologies. After all, designers and developers commit themselves to building attractive products. The clean lines of the latest iPhone don’t encourage us to think about how much electricity it takes to power mobile devices worldwide.

Similarly, successful websites have aesthetically pleasing designs that use empty spaces, images, and text to communicate concepts. Despite digital technology's seemingly “clean” appearance, the energy sector accounts for more than 73% of the world’s carbon emissions.

As IT professionals, we don’t necessarily need to think about every source of pollution within the energy sector. However, we do need to think about the 3.8% of global carbon emissions produced by the internet. If that doesn’t sound like much, consider that it accounts for about 1.9 billion metric tonnes of carbon per year.

Anything we can do to lower that amount will help curb the effects of climate change. So, how can we measure and improve website sustainability? We have some ideas.

Understanding key sustainability metrics

Let’s start by looking at some metrics you should track while making your website more eco-friendly.

CPU usage

The amount of processing power required to load and interact with a website directly impacts energy consumption. Measuring CPU usage helps identify inefficiencies in your website's performance. For example:

• Windows Users can access the Task Manager to monitor CPU performance for their browser.
• Mac Users can track CPU usage via the Activity Monitor in Utilities.
• Unix Systems provides diverse methods; refer to OS-specific documentation for guidance.

Emissions per page load

Every page load contributes to carbon emissions. Tools like Ecoping offer detailed insights into CO2 emissions, page load times, and transfer sizes. These metrics help pinpoint the pages that consume the most energy, allowing targeted improvements.

File sizes

Larger files require more energy to store and transfer. Reducing file sizes, such as optimizing images and compressing assets, minimizes energy use without compromising user experience. Small adjustments across all files add up to substantial savings.

Top tools for tracking sustainability metrics

Plenty of tools exist to help you meet your green IT objectives. Explore the following options to find sustainability tools that serve you well.

‍

Website Carbon Calculator

Website Carbon Calculator is one of the easiest ways to determine your web page’s eco performance. Just paste your URL into the search bar. The website will generate a report that shows:

• How your site compares to others.
• How much CO2 gets generated when someone visits a specific page?
• Whether your page runs on sustainable energy.

Ecograder

Ecograder also generates reports that measure your page performance and carbon emissions. In addition to telling you how much carbon gets generated by visiting a page, it shows you:

• Which assets (images, scripts, HTML, CSS, etc.) use the most power?
• How your UX design contributes to your overall Ecograder Score.
• Whether you use “green hosting.
• Actionable insights you can use to lower your page’s carbon footprint.

Cloud Carbon Footprint

Cloud Carbon Footprint is an open-source measurement and analytics tool that provides deeper visibility into how much the carbon emissions of your website and other cloud assets.

We find Cloud Carbon Footprint useful for highly interactive websites that accept and return a lot of data to users. For example, it can measure the carbon involved in connecting with your cloud database to serve each user.

There is a bit of a learning curve for Cloud Carbon Footprint. If you’re familiar with Amazon Web Services (AWS), you shouldn’t have any problems getting started. If not, expect to spend some time learning how to get the most from each feature.

Enhancing website sustainability

You can take immediate steps to improve your website’s performance and become more sustainable. Start by:

• Reviewing all of your web pages to remove duplicate content.
• Using videos only when necessary (they have much larger file sizes than most images and text).
• Optimizing your JavaScript performance.
• Reducing the amount of CSS you use, and sticking to native fonts when possible.
• Improving your site navigation so people can find what they need quickly.
• Choosing a green web host that offsets carbon emissions by planting trees, investing in renewable energy, etc.
• Using AMP (Accelerated Mobile Pages) so mobile devices can load minimal versions of your site quickly.
• Opting for data centers close to your users.
• Adding more reusable assets (images, scripts, etc.) to your pages so browsers can store them in their caches.

Benefiting from Qwik

It’s also worth exploring recent JavaScript frameworks designed to conserve energy. Qwik is possibly your best option.

We like Qwik because it has zero-load capabilities that load each page’s most important assets first and optimize loading times. Plus, it uses a lightweight version of JavaScript that only includes essential front-end features. When a visitor interacts with your website, Qwik makes sure it only launches JavaScript code when prompted. That way, your site doesn’t generate a lot of pointless content and interactions that consume energy without improving the user’s experience.

Learn more about building sustainable websites

Are you curious to learn more about how you can build sustainable websites that serve users while protecting the planet? We’d love to talk! Please feel free to contact us to start a discussion.