Velocitize

Go Green: Ecologically Responsible Web Design

I am responsible for thousands of kilograms in carbon emissions every year. If you’re in the web business, you might be, too. 

At Wide Eye, we design and build custom WordPress websites for clients in the social impact space. Millions of users engage with our team’s products annually and each action they take requires energy.

Every time a webpage loads, energy is used to transfer, store, process, and ultimately render data on a user’s device. Multiply this by millions of users and the impact is staggering. Currently, close to 2% of global emissions come from information and computer technologies (ICT). As a result, it is predicted that number could reach as high as 20% by the next decade. Data centers, critical to web infrastructure and responsible for serving and storing content, make up only a portion of the ICT ecosystem, yet are estimated to have a comparable carbon footprint to air travel.

Source: ClimateCare

Web traffic is only increasing while websites are physically getting larger. The average WordPress website’s page weight (javascript, CSS, and other assets) swelled by +26% on desktop in the past five years. Considering an estimated data transfer energy cost of 1.8kWh per gigabyte, every piece of data leads to significant carbon emissions. At the same time we are asking websites to do more, we need to consider how to do so responsibly. The design and engineering decisions we make directly affect the severity and ecological impact of using our websites.

Here are a few immediate best practices we can adopt to reduce our carbon footprint:

Reduce Overhead

Technology should be carefully considered before being added to a website and audited appropriately. If you’ve worked with WordPress, you know adding one too many plugins can have severe negative effects on website speed; plugins add extra weight to the frontend or increase effort on the backend. 

Developers can use Lighthouse or other testing tools to identify and then suppress asset requests where appropriate. Animations and other features should be strategically incorporated on core content pages and then reduced on pages where they are not needed. I doubt you need that fancy javascript feature loading on your privacy policy.

Before integrating tech, consider if it is really needed to achieve a user experience goal and, if it is, how the side effects can be mitigated. 

Leverage Infrastructure

Modern web infrastructure is fast and performant, and has never been easier to integrate. We can dramatically decrease our energy usage by reducing the work required to serve content.

Cache everything you can, place assets on a content delivery network (CDN) closer to users, and make the backend snappy—your users will be happy when website speed goes up! In addition, many hosting providers have built in infrastructure performance solutions just a click away. At Wide Eye, for example, we leverage WP Engine’s built in caching and CDN to serve content faster and more efficiently.

Use Web Best Practices

Loading heavy javascript, CSS, and images are a drain on web servers and clients; more data needed equates to increased energy expenditure. Take steps to optimize your assets, which may include minimizing code with modern build tools or adding image compression plugins to your WordPress website.

In terms of content, consider where each feature fits into a website’s information hierarchy. Cutting extraneous features and assets is one of the fastest ways to increase website speed. If there are animations or long videos, make sure to account for user devices and prevent continuous background operations. Mobile users will also be thankful for preserving their battery life.

There are many paths towards a greener internet and with even minimal consideration we can curb emissions. Producing performant and ecologically friendly websites is not only good for our earth; it is also in line with web best practices and creates better experiences for our users.

Treat our earth and our users with respect—we want to keep them both around.

To learn more about Wide Eye and ecologically responsible web design, visit their website and watch the Velocitize Talks interview with Wide Eye Founder & Creative Director Ben Ostrower.

Photo by Noah Buscher on Unsplash

Exit mobile version