Opower Labs

Saving energy by design: how simple considerations by web designers can shrink the Internet’s energy footprint

  • By Justin Secor
  • June 21, 2013

Hey, fellow web designers and developers: we all have a serious flaw. This flaw has far-reaching consequences, has persisted undetected for a long time, and permeates every one of our day-to-day duties — from drawing wireframes to writing code.

We’re wasteful.

Granted, everyone is occasionally wasteful of time, bandwidth, or effort. Who could possibly optimize every resource? There’s one thing, though, that I bet you hadn’t even realized you were wasting while designing and developing for the Web: electricity.

I didn’t even realize it myself until recently—and I work for Opower, a company devoted to helping people become more energy efficient! The average person thinks about their energy consumption only nine minutes per year, so it’s not surprising that many of us overlook the extent of our energy waste as designers and developers.

So then, let’s spend a minute to take a closer look at the problem.

The Web needs a lot of juice

First of all, the Internet is responsible for consuming a large chunk of global energy consumption. At the heart of web-related energy usage are data centers – the massive supercomputing facilities that store and distribute the sites and apps that we design and build. In the US alone, data centers were responsible for 76 billion kilowatt hours of electricity usage in 2012 (about the same amount consumed by the entire state of Arizona). An unfortunate truth is that only a fraction of that electricity goes to powering computer servers, while a majority is spent keeping them cool. (Google, in an innovative move to save energy, has relocated some of their data centers to the Arctic circle).

And for the most part, data centers’ servers just keep the Internet’s engines idling. It takes additional electricity to move data from our servers to our users, and it’s possible to quantify how much. Each bit has an energy cost roughly equal to 4.6 microjoules (thanks to Rick Zarr for the calculations). That means the front page of NBC.com, which weighs 1.7 megabytes and draws about 16 million monthly visits, burns about 300 kilowatt hours in a month just delivering front-page content to users.

If you reside in a one-bedroom apartment and have typical electricity consumption habits like mine, then from an energy perspective, your apartment is basically like living in NBC.com’s front page. In terms of our planet’s fossil fuels, each kilowatt hour consumes about 1.1 pounds of coal, which puts NBC.com’s monthly coal consumption at about 320 pounds. That also means about 600 pounds of CO2 is sent into the atmosphere.

It’s not just the computing requirements of our sites that drive energy consumption: even details like color make a difference. Consider the two websites below:

Which color palette uses more energy?

Now, pretend there was no difference in the energy cost to digitally send both of these sites to a user’s device. Assume they each take the same amount of CPU power to render. There’s still a potential difference in their energy consumption… can you spot it? What if I reminded you that your computer screen is basically a big, fancy light bulb?

Depending on your device, Bing’s homepage might be more energy efficient for the simple reason that it’s darker. Your screen is composed of pixels, and the color of each pixel is determined by the amount light passing through it: white is 100% light output, and black is zero. The takeaway here is that for certain types of devices (e.g. projectors, older monitors, and LED screens), brighter colors consume more energy than darker colors (this premise led to the creation of Blackle, a black-backgrounded version of Google).

Now, if you’re viewing these websites on a state-of the-art LCD screen, the difference in color amounts to pretty much nothing. But with old-style CRT monitors (which are still heavily used) and even LED monitors (which are increasingly being adopted) —the impact of color is significant.

Okay, we’re wasteful. Now what?

I can’t offer a silver bullet that will make all you designers and developers become energy efficiency heroes overnight. But there are some general things you and I should do to stop being wasteful, and it begins with changing our process.

The first thing to do—start it today!—is add energy efficiency to your list of design requirements. Begin giving it the same priority level as you give to usability, responsiveness, and aesthetics. If you have metrics for success (like web traffic, click through rates, ad revenue, etc.), add energy impact to that list too. When you compare your site/app to a competitor’s, figure out their energy footprint and make a goal to do better.

The point is this: if we start thinking about energy as part of our process, we’ll each figure out the best ways to save energy in our unique circumstances. Here at Opower, our User Experience team strives to design simple, energy-efficient experiences, so our users can save energy without even realizing it.

What’s another thing you can do? Pair performance (the speed at which data is downloaded and displayed) with energy efficiency. This should be low-hanging fruit, because performance—something you should be optimizing for already—is directly tied to electricity use.  A page that loads fast and executes quickly should be more energy efficient than a slow page (with a few caveats), and one obvious way to satisfy both concerns is to only give users what they need for the best experience.

I’ll offer an example by pointing out a common mistake that front-end developers (myself included) make all the time: loading unnecessary code on pages. Working with templates makes it all-too-tempting to throw a call to jQuery (a popular javaScript library) on every page across a site, even if only a handful of pages actually do anything with it. A worse offense is loading jQuery for a very simple functionality, when you could accomplish the same thing with a few lines of vanilla javaScript. At the time of this posting, the latest version of jQuery is 93kb in size, which means each time we save a user from downloading it unnecessarily, we save about 3.5 joules of electricity. Extrapolate that across 10,000 of us designers building 100 pages each, with 10,000 views per page, and we would save enough energy (about 9,700 kWh) to take ten average US homes off the grid for an entire month.

And that’s just removing a few unnecessary lines of code. Imagine what we could save if we questioned the necessity of each framework, script, or image on our pages. Ask yourself: do I really need to load every weight of a specific typeface? Do I really need all the comments to appear below an article, or can I paginate them? Should I really auto-buffer that video? You don’t need to sacrifice the user experience; just be intentional about everything you include as part of it. Basically, efficiency follows simplicity: Opower engineers employ this principle every day, and routinely look for new ways to optimize and simplify. For example, we’re swapping in icon fonts to replace image icons, and building graphs with HTML5 instead of high-bandwidth images.

There’s one final thing you can do to be an energy efficient web designer. Assuming you’ve heeded the call, make it known. Let your users see it. By establishing a benchmark for people to compare themselves to, you leverage the concept of social proof (this is the same behavioral technique that undergirds the “neighbor comparison” in Opower’s Home Energy Reports). Throw a message on your site or app about how you’re committed to using energy responsibly. Get a Green Certification, and add their badge to your footer; it’s not just an achievement, it’s a reminder to your users that they should think about efficiency in their own job, whatever it may be. We’re the creators who make the web what it is—we control how it looks, where people are looking, and what people are learning.

We have everyone’s attention. Let’s not waste it! 

Justin Secor is a UX designer at Opower. You can follow him on Twitter, @secor. This blog post has been adapted from its original appearance on Medium.com

About Opower Labs

Opower Labs is the official voice of our world-class software development team. In our blog, you’ll find our opinions and musings about coding techniques, trends in big data processing, visual design and user experience, and other topics that are on our minds.