01.05.2023

From Vision to Action: Digital Sustainability for a Better Tomorrow

Follow along as we chronicle our digital sustainability efforts

an image of a browser window looking at a tree line in Acadia National Park, the background of the entire banner is a blue, white and gray, gradient swirl

We talk a lot about digital sustainability and the impact it has on our environment. Every time you visit a website or use an app, there is an environmental and social cost. This shouldn’t stop you from using the internet, it’s far too essential, but it should encourage businesses to make sure their site is as sustainable as possible.

We’re not the first digital agency to focus on sustainability, groups like MightyBytes and Wholegrain Digital have paved the way for us with their revolutionary tools like Website Carbon, which measures the carbon footprint of websites, and Ecograder, which offers an even more comprehensive look at the environmental impact of a site.

How can we help our clients become more digitally sustainable?

We want to create a succinct way for new and existing clients to get a look at their own impact, something that we can use in tandem with our sprints and when creating a roadmap for new projects. We especially wanted this to encompass our alignment with the UN’s Sustainable Development Goals.

Internally we formed a team to begin exploring what this could look like. We started by testing a tool called Calibre, which leverages tools like Lighthouse, to monitor a website’s performance. We especially liked that Calibre can automatically run a report as frequently as we wish, making it ideal for tracking a site over a long period of time. You can even test under a variety of conditions and devices.

A 30-day view of a web page's daily Lighthouse Performance Score

Our first goal was to examine the Calibre reports for our client, Workhuman, and gather insights to define which metrics might be most important to our SDG program and to guide our next steps with a client-facing living impact report. This report would be a resource we can hand clients to track their performance, set sustainability goals, and measure progress.

We strategically chose select webpages for WorkHuman’s Calibre snapshots: Home, Solutions, Resources, and Blog.

We started by focusing on three values:

  • Largest Contentful Paint - LCP is a landmark timing-based metric that reports the time at which the largest above-the-fold element was rendered. It’s a critical SEO metric, and it improves usability. The longer it takes to load, the higher your bounce rate and the lower your search rankings.

 

  • Cumulative Layout Shift - Have you ever tried to click a button only for an image to load, and suddenly you’re clicking something you never meant to? That’s CLS, and the higher the number, the worse the UX. When the UX is bad, the more time a user wastes online looking for something better. Similar to LCP, we want to get users the info they’re looking for as efficiently as possible.

 

  • Total Blocking Time - TBT measures the total amount of time your webpage was blocked, preventing the user from interacting with your page. A long TBT may give visitors the sense that a page is unresponsive, affecting their experience. Sustainability speaking. This is another indicator that the site is being overworked. There are likely unoptimized or inefficient resources on the page. 

select pages from our developing SDG initiative

The actual values of these metrics may not make sense to you right now, but that’s part of our project. Translating the meaning of these performance stats into tangible, sustainable action is our number one goal. 

One thing we’re learning is that the value of these metrics depends heavily on who we're evaluating. KPIs for, say, the New York Times are probably very different than Nike’s. Performance values are also different depending on what device is being used and where. Imagine a high-powered device in a well-connected city, like a brand new iPhone running on a 4G network, that awesome before-the-fold video loads immediately, and no content or buttons shift as you explore the page. In this case, you've got fantastic metrics, and from an accessibility standpoint, your website is doing well. But what if your end user is on a lower-powered, older phone in a rural area on a 3G network? They probably won’t stick around waiting for a video to appear, and worse, if a button moves just as they were about to click, they’ll be left with a sour taste in their mouth. It’s so important to consider who your audience is, and if your website is truly serving them. Is your site losing valuable traffic and interested customers due to poor design?

So, what's next?

So, what's next?

The next piece of this puzzle will be evaluating the energy consumption from a user and from the platforms that our clients use. Do you know how much energy your site actually utilizes in hosting needs? We'd all love if the servers that host our sites utilize renewable energy and reduce energy consumption, but one thing we're learning is that it's pretty darn hard to track down transparency in hosting. How can we define and evaluate which hosting platforms are actually “green”?

Ultimately, figuring out how we can directly connect all of these metrics to our SDGs and convince others of their importance is our current challenge. This is the first of a series of working sessions and case “diaries” we’re creating to chronicle our SDG commitment. We’re thrilled you’re here for the journey!

Remember, even small changes can make a big difference. By considering digital sustainability when creating websites, we contribute to a greener and more accessible future.

Let's build a more sustainable digital world together!