How to Build Sustainable Websites & Measure Performance

We often think of today’s digital products as clean technologies. After all, designers and developers commit themselves to building attractive, sustainable websites. The clean lines of the latest iPhone don’t encourage us to think about the amount of electricity it takes to power mobile devices around the world. Similarly, successful websites have aesthetically pleasing designs that use empty space, 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.

Key metrics for sustainable websites

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

CPU usage

How much processing power does it take a computer or mobile device to load and interact with your website?

You have a few options for measuring CPU usage. If using a Windows PC, open the Task Manager and select “More details.” You should see a CPU percentage next to your internet browser’s icon. Assuming you only have your website open in the browser, that’s how much your CPU is working to communicate with your site.

Mac computers have a similar tool you can use to measure CPU usage. From Finder, navigate to Applications, Utilities, and select Activity Monitor. You’ll see measurements for CPU, memory, and other categories. You can even use Selected Processes to focus on your internet browser’s CPU usage.

Unix-like systems have diverse ways to check CPU use, so it’s best to look at documents for your operating system.

Measure carbon emissions per page load

How much carbon does your website add to the atmosphere when someone loads a page? You’ll need to rely on a third-party service to track this sustainability metric. Ecoping offers free reports that show each page’s CO2 emissions, page load time, transfer size, and other measurements.

Since Ecoping gives you a breakdown of your website by individual page, you can easily identify your biggest sources of carbon emissions.

Optimizing file sizes for sustainability

Large files take up more space on servers than smaller files do. Additionally, users accessing files through your website will use more power to download a large file than a small one.

When possible, choose the smallest possible file size. That doesn’t mean you need to damage the user’s experience. Most people won’t notice a difference if you lower an image’s resolution by 5-10%. The savings really add up when you make that small sacrifice for every image on your website.

Best tools to track 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.

Tips to improve website efficiency & sustainable

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.