A growing number of industries are trying to reduce or at least curtail carbon footprints and energy use. Emissions standards have been set for the automotive, construction, and even telecommunications industries. Yet the internet’s carbon footprint is growing out of control: a whopping 830 million tons of CO2 annually, which is bigger than that of the entire aviation industry. That amount is set to double by 2020.
It is time for web designers to join the cause.
Right now, at least 332 million tons of CO2—40 percent of the internet’s total footprint—falls at least partially under the responsibility of people who make the web. It needn’t be that large, but with our rotating carousels, high-res images, and more, we have been designing increasingly energy-demanding websites for years, creating monstrous HUMVEE sites where we could be just as well served by slender hybrids or, better yet, bicycles.
The good news is that we have several methods for fixing obese websites and simultaneously attacking our industry’s carbon footprint—methods that conveniently dovetail with good business practice: mobile-ready design demands a thoughtful and efficient approach to page design, and increasingly sophisticated web ROI metrics are already driving businesses to pursue faster and lighter sites.
Before getting into the nitty-gritty, let’s first look at how to estimate a website’s footprint.
What is the web’s carbon footprint?#section2
Just as we refer to a car’s energy usage in terms of miles per gallon, we can think about website energy usage in terms of the amount of data downloaded. This, in turn, gives us a framework for guessing the relationship between page size and carbon footprint. Unfortunately, working out a website’s carbon footprint is, on the best of days, tricky and imprecise. Here’s my shot at it:
- A 2008 paper from the Lawrence Berkeley National Laboratory suggests it takes 13kWh to transmit 1GB.
- According to EPA figures, the average U.S. power plant emits 1.2 pounds of carbon dioxide equivalent (called CO2e) per kWh produced (other countries have higher or lower averages depending on their energy policy).
- If we multiply 13kWh by 1.2 pounds, we get 15.6 pounds of CO2e—and that’s just to transfer 1GB of data.
- If one million users each download a typical page, which now averages 1.4MB, that’s a total of 1,367GB of data.
- At 15.6 pounds per gigabyte, that’s more than 10 tons of CO2e.
- Mobile data, with its reliance on 3G/4G, is up to five times more polluting—77 pounds CO2 per gigabyte.
- If a million mobile users on 3G download a 1.4MB page, that’s 1,367GB times 77 pounds, which totals 52 tons of CO2.
Based on these figures, we can estimate that a site the size of Tumblr, with 183 million pageviews per day and approximately 10 percent of those from mobile, has the potential to be responsible for a staggering 2,600 tons of CO2 daily.
That doesn’t take into account important factors like how much of the data center’s electricity comes from renewable or fossil fuels or end-user electricity usage, both of which could significantly influence the total. But these numbers do give us a framework for seeing the relationship between page size and carbon footprint—and make it clear that cutting gigabytes saves CO2.
The first place to start trimming? In our designs.
Reducing CO2 by tackling page bloat#section3
At 1.4MB, today’s average page is 15 times larger than it was 10 years ago, primarily due to images (881kB) and script (224kB). Plain old HTML totals just 54kB—but when’s the last time you saw an HTML-only site? This average page also makes more than 100 HTTP requests. Whether they fetch a big object or a small one, these add up to more delay and more power wastage. The average site is also slow: Alexa’s top 2,000 retailer sites now take an average of more than seven seconds to load—much longer than users consider acceptable.
Budgeting for a lean, mean, and green website#section4
No one intentionally sets out to build a 1.4MB page, but clients often demand eye-catching images, advanced social features, and plenty of design bells and whistles, and that’s pretty much all it takes to get to that size. The best way to prevent this kind of obesity is to set a page size budget: start with a target page size, and stick to it.
At MadPow, we’ve adopted the page size budget approach to help us chase better page-load performance, with the holy grail being a page that loads in two seconds or less. Of course, the more page weight we shave off, the smaller the site’s carbon footprint. To keep track of this, I multiply the page size by analytics on user visits to arrive at a rough total for site traffic, not forgetting to separate out the more-polluting mobile traffic and account for caching.
Sticking to the page budget means considering data-weight at each stage of design:
Content strategy: If you are retrofitting a site to reduce page weight, a quick fix might be to trade higher-weight content for lighter alternatives, like still pictures instead of video, or text instead of images—so long as the same user and business goals are served. Better yet, if you use a “content first” approach, you can bake the size considerations into your content planning, so as to make content choices that are appropriate for the audience and the data budget.
Interaction design: The experience definition phase of design is the perfect time to intercept the more data-hungry site features that threaten a page budget. The ubiquitous carousel is a prime offender—a typical one has three to six big images, plus the JavaScript needed to make it move, typically adding up to hundreds of kilobytes. The value of carousels is debatable anyway; if you need to make a metrics-driven case for reduction or replacement, take the Brad Frost Carousel Challenge. Other candidates for reappraisal include sharing buttons, embedded maps, auto-play video, Flash, ads, and syndicated third-party content services—all of which come with a hefty data overhead.
Visual design: Images are the largest part of the footprint for most sites (60 percent on average), and are ripe for data reduction. To start, can you get by with fewer images? Many images on the web are also saved in the incorrect format, are improperly sized, or are badly optimized. Free services like smush.it can optimize your images better than your regular editing tool, and they’ll do batch processing, too.
Consolidating all the small images on your site by using CSS sprites or web icon fonts will save data and HTTP requests; pure CSS icons will be the lightest-weight option, when browser support catches up. And since mobile data is so much more polluting than wired data, make sure responsive sites use a working responsive images solution. Good optimization could shave 72 percent off mobile image weight.
Code design: Front-end optimization is burgeoning with low-hanging fruit: shrinking scripts, compressing downloads, setting appropriate caching times, and combining files can all help reduce data overhead and HTTP requests. For a quick taste, point Google Page Speed at your site, and it will identify which techniques could be applied to help speed it up. For a deeper dive, I recommend reading “Web Performance 101,” or Lara Swanson’s recent ALA article.
Green hosting: Even before you start minimizing your site’s carbon footprint through design and optimization, you could consider moving to a green host. Many of these are powered by renewable energy—particularly in Iceland, where data centers have opened to take advantage of cheap geothermal power. Green hosting might not be for everyone yet (it can be more expensive, and Iceland might be far from your customers), but more local green hosts are starting to appear. Some cloud-based services are getting greener, too: Google, Apple, and Rackspace get some of their power from renewables, though according to Greenpeace, Amazon Web Services does not.
Offsetting the rest: Even after applying a lean design, optimizing, and moving to a green web host, your site will still have a carbon footprint. To account for that, you can buy an offset, which typically costs $19 per ton, depending on the project. Offsetting doesn’t actually take the CO2 out of the atmosphere, and it is a poor substitute for reducing emissions. However, many programs have additional benefits, such as funding education in the developing world or protecting fragile habitats.
Persuading people to optimize#section5
Optimizing for lower emissions is tantamount to optimizing for general performance, so even non-green businesses have several compelling reasons to put their site on a diet: faster pages make for happier users, especially on mobile; they convert better and have better SEO, too.
Adding climate benefit to that list makes an overwhelming case for cutting page size and data, especially for companies that are already sympathetic to a climate case (such as those that have signed the Climate Declaration).
The internet as climate hero#section6
Despite its huge carbon footprint, the internet could also be a climate savior. The transition of old industries and services to the internet has the potential to save eight billion tons of CO2 by 2020, more than counterbalancing the projected 1.4 billion ton 2020 internet footprint.
For instance:
- Teleconferencing has already reduced business travel by 30 percent.
- Home sharing (like AirBnB) is 66 percent more efficient than staying at a hotel.
- Car sharing services are taking cars off the road—as many as 20 regular cars per shared one, according to ZipCar.
- Meshing.it, the directory for the sharing economy, lists a further 8,000 startups, all focused on spreading ownership amongst communities, thus reducing consumption.
As we continue these shifts toward an increasingly online economy, though, we’ll also soon be welcoming five billion new users to the internet. As the internet’s overall share of world climate pollution continues to grow, so does the climate responsibility of those who architect it. But by building lean and clean, we can reduce the damage—and make happier customers and profitable businesses to boot.
Perhaps we’re conditioned to frame environmentally-friendly choices as sacrifices, but it isn’t so with the web. We can have cleaner, greener websites while also making users happier and improving the bottom line. And while the problem may be large, as any dietician can tell you, small changes add up. Why wouldn’t we get started?
Really cool stuff… until very recently I haven’t seen this consideration when it comes to web design AT ALL, and it makes a lot of sense on multiple fronts. It’s especially interesting that you don’t hear about the environmental consideration within the designer/dev community more often, as the “boo hummer, yay hybrid” mindset is certainly not unusual.
One avenue a lot of designers/developers really need to take a serious look at is their utilization of web frameworks like Bootstrap. Frameworks are very good for getting something off the ground very quickly — but they are seriously underutilized and should be heavily edited (or ideally removed) when the production of a site is winding down. I don’t know how many times I’ve popped open Chrome’s developer tools only to see something like
“Bootstrap.css: 95% is not used by the current page”
It’s completely silly!
So glad you mentioned the topic of image optimization. Although there are an increasing number of tools available to make your website pop/shimmer/dazzle *without* the use of images (SVG, CSS3, Transitions), images continue to take up most of the bloat.
The sad thing is – even taking a simple step like running your images through an optimizer (taking all of 5 seconds of your life) can make a world of difference in your page load time and the users’ overall experience.
You said it: “Small changes add up.” Little steps, people!
Let’s add the javascript that runs up the browser’s CPU costs and carbon emissions. This article looks mostly at transmission sizes, but the end-user CPU use should be a big part of the calculation as well.
Great article! Interesting to point out the greater energy costs of delivering the same content to mobile users.
You mentioned “green hosting,” something that’s been on my radar for years. I noticed hosts in Iceland showing up a couple of years ago, and while certainly their local power management is about as sustainable as it gets, I wondered about the energy cost of transmission—does sending information under the Atlantic outweigh the generation benefits, if your audience is primarily in the U.S. (or rather, if your audience isn’t primarily east-coast US + Europe)?
Great to see you got this published, James! It wasn’t too long ago that sustainability in the web realm was being pooh-poohed. I’m going to echo this over to sustainablevirtualdesign.wordpress.com right away!
It would be REALLY valuable to get a LCA (Life Cycle Assessment) model for the web. In the past, I’ve contacted a few of the LCA vendors about developing models for the web, but no interest. A formal model would be helpful, especially if it could somehow be integrated into design workflow tools. 3D modeling systems like SolidWorks allow Industrial Designers to see footprints as the design, but nothing equivalent for the web. I’ve been working on a system to compute footprints while optimizing downloads at http://www.greenboilerplate.com – still a work in progress.
One other issue that needs to be addressed, IMHO, is the relative impact of the Internet in different countries, like that for the Web Index at http://thewebindex.org/. The is an extension of Jeremy Carlson’s question. Some countries with inefficient electrical grids may also depend on the Internet for news and “democracy” (a component of most sustainability frameworks) more than others. So, if you download into China, where the client footprint will be “dirtier” you may have to weigh it by the value of the web in China, possibly with the Web Index. Interested in hearing comments. Computing this might be something that makes sense to centralize in an API.
No offense but are you high!? What is wrong with you!? You surely must be bored and have nothing to do. Carbon footprint for websites? Kilowatt hours and carbon dioxide and the size of my images? Holy hell! Some people are just nuts!
I see the photo of XYZ and his precious little family with 20 or so members! People are “proudly” screaming from the rooftops that their 4th children is on the way! (Sorry, meant to say the 5th.) Oh, how proud they must be! And these people asking what do I care how many kids they have? I’m not the one paying for their education, clothing, food, toys, books and such. And as long as the parents have the money, I should just shut up because it is not my business.
Great. These short sighted, selfish people will have their kids grow up, and they all want to have what everyone else have. They want their own house, with a backyard, a car or two, maybe three, a motorcycle, 4 cell phones, Fios internet, dogs, cats, and let’s not forget the most important: another 5 set of kids on their own.
Have you ever given a thought to all this? Ever seen how they killing the trees to make room for new housing projects? Why do you think that is? What is the carbon footprint and the environmental impact of all that?
Ever driven on a highway (well, maybe not where YOU live) where they killing the trees to make room for more lanes because the 8 lanes (4 lanes per direction) are completely clogged and they think adding an extra in each direction will ease the congestion?
Have you ever commuted to/from work and sit in agonizing traffic? Where do you think all the cars coming from? What is the carbon footprint and the environmental impact of all those drivers in the morning? And in the afternoon?
But how dare I criticize? You have the right to make as much babies as you want. After all, I am not the one paying for their upbringing, right?
However, what is more important above all this, is that I create a website with a minimal carbon footprint making sure my number of HTTP requests are up to par with the G-man’s recommendation.
Sorry, dude, but I think you are just completely out of touch with reality if you preaching about website carbon footprint, while others are making babies out of sheer ignorance and selfishness like there’s no tomorrow.
Cool article!
I’d second those mentioning javascript performances. More and more pages are viewed via mobile devices. A poorly optimised javascript script can quickly drain the battery, which would need to be re-charged.
interesting article! with the increasing reach and usage of internet across the world, the only way of reducing carbon footprint is advancement in technology. Of course, we have to do our share by building efficient websites with whatever is technology is available currently.
Here at Make Hay we have been running an Ethical Web Design company for 10years and have used Green Hosting for the last 7 years for all of our client sites and now have 3 servers across the U.S and Europe. This is simply the way we do business.
Web hosting is set to eclipse Air Travel in terms of CO2 as data centres use massive amounts of energy – ignoring this is folly.
Good to see other folks are starting to pay attention. It doesn’t matter what everyone else is doing – you pave your own way.
In general, these ideas are just good practice. Regardless of their positive environmental impact.
Isn’t the goal to reduce page bloat and serve the user a fast website with only the content they need / want?
Optimizing images and using reliable web servers helps all around.
So I guess it’s really cool to be helping the environment while doing so.
A good current source for trends in “bloatware” – HTTPArchive
http://httparchive.org/trends.php
good ideas to put into practice with the ever growing number of people viewing the web on mobile devices. now just get rid of all the nonsense about the carbon footprint crap and you have a really good article!
Awesome details about “Web Designing” you are providing in this website which are really allows me to get more about it. And there are efficient techniques to create sure a efficient designing process, so research on. It is best part for me that you are providing such a awesome details about it. Thanks a lot for it.
@olaf – I’m not in a position to have a large influence on world birth rates, but I can reduce the carbon footprint of the web sites I work on.
Should I do nothing? Continue contributing more carbon that I could be? Or do I do something about it?
Idealism v Pragmatism?
I would go for planting more trees 🙂
Page Bloat = Bad, but not a “world devastating” bad, more like “palm to face” bad. The fears of websites adding to climate change is laughable… mostly because climate change is laughable.
Interesting. Most of us develop/design/use the Internet without any thought for the environmental impact behind it – probably because the link between the two wasn’t obvious. Thanks for pointing this out, it certainly gives me an added incentive towards developing leaner and less flashy sites.
Interesting article – It is something we rarely think about but does fit in with what we do already with reducing page bloat, optimising images and serving relevant content to the users.
When I read that a data center has a “brute force hvac system” I realize that there are always people with different priorities
Fast, light sites = happy users = good environmental performance. Win, win situation.
The best place to reduce impact (outside the actual design of the site) is moving to a Green Hosting service.
If you are interested in eco-conception of websites (and if you are able to read french 🙂 ), you might love this book “Eco-conception web – Les 100 bonnes pratiques” http://www.amazon.fr/gp/product/B009YJH7SQ/ref=as_li_qf_sp_asin_il_tl?ie=UTF8&camp=1642&creative=6746&creativeASIN=B009YJH7SQ&linkCode=as2&tag=alsacreatio09-21
Web from a whole new perspective, Global platform which affects the globe. Thanks for inspiring article.
Thanks for this unusual post! It’s a pleasure to read it) really smth worthy that programmers can do for our planet in the environmental sense ))
the post is interesting,nobody argues.. but do we really can improve the situation by these small measures?!….
that link in french is quite useful, just use Chrome’s translate option
Thank you for your time and effort to summarize everything for the audience,. I am truly learning from your experience..
Thanks again for useful resource.
http://ganodermacoffeedxn.blogspot.gr/ganoderma
I find this article ridiculous. Stop eating meat, selling your car, and reducing your flights have infinitely more impact.
As Olaf wrote, I think the author is completely out of touch with reality. In his little bubble of web development neardiness.
Intersting article, and nice blog. Keep going bro, I will follow you for sure!
Assuming the changes to a site aren’t significant enough to warrant hosting or infrastructure changes, I’d be interested to know what the actual difference in emissions would be. Bearing in mind that the servers and networking equipment will be consuming a significant amount of power even when idling, I think the estimates of the change you can make in the article are rather high.
Also, a paper from 2008 will be rather outdated. Moore’s law doesn’t quite hold for power consumption processing a given problem, but the power consumed by the silicon parts of the chain will be significantly lower with modern equipment than when that paper was published.
This article has really given me a whole new insight to the inner happenings in web design.
Nice 🙂
.
I’m really glad to see this out there, as we’ve been discussing creating a website sustainability/software rating system, bringing awareness to both the coder/designer realm and the public as well.
People treat websites like light switches – there’s no connection between the action and the impact. Cumulatively, we can make a huge impact, especially on high traffic sites.
If anybody would like to be kept in the loop/play a part in this ratings system as it unfolds, please feel free to reach out.
Maybe I missed it but is there any info on the amount of energy required to render a white/light page versus black/dark?
Anyone that remembers http://www.blackle.com/ may have noted their claim that rendering a lighter screen consumes more energy.. While it may not have as much of an impact on the rest of the data, switching to more muted layouts may also play a role in how much energy the end device/machine uses to display the page.
Then again it could all be BS, but considering a monitor’s “off” state is essentially a black or gray screen, there may be some logic to it.
edit: Just seeing this was mentioned in the other energy-related article…
Thanks for sharing this post, i like that type of content stuff, Thanks for the share a new details…
I always care about site weight, however never thought about this ways. Inspiring article!
I love this article, another good reason to minimise page sizes (as if load times/performance weren’t enough). It inspired me to put together a page that calculates the carbon footprint of a site based on its page load size and the number of views a day it gets. Try it out here: http://www.joshcarllewis.com/website-co2-footprint/.
I think this article’s premise is deeply flawed when it uses 13 kWh of energy for a GB of info, so much so that it’s ridiculous.
First, if you read the study, their number is obtained by calculating the cost to run the equipment all year, then dividing by the amount of data that’s actually sent. Since networking equipment is idle a lot of the time but still using power, sending more data would actually bring the energy cost per GB down (crazy as that seems).
Let’s pretend the number is accurate though. Based on my calculation of my 28 Mbit/s internet connection (about 5 minutes to transfer a gig of data at full speed) and an average of number of hops (network routers) to a server of 20, each network router would be using 8,222 Watts of power while sending my data. Just for MY data.
That’s 80, 100 Watt light bulbs worth of heat/energy at EACH router that’s being given off, just for MY data. That would draw 68 amps at 120v, or about what a small household electric furnace kicks out.
My calculations follow, but even if I was off by a factor of 100, it’s still a ridiculous amount to estimate. 13 kWh is 130, 100 Watt light bulbs running for a full hour. If you put your hand on your home router, you can feel how cool it is and nowhere near a single 100 watt light bulb.
Calculations Summary:
Number of Hops
20
Download speed (Mb/s)
28.11
Download Size (MB)
1000
Time to Download (s)
284.59
Time to Download (m)
4.74
Energy Usage (kWh)
13
Joules (Ws)
46800000
Joules (Ws) for a Hop
2340000
Watts for a Hop
8222.175
This is an awesome analysis, but I do agree with dkrandom.
2008 data is so…..2008 🙂 Take a look at AT&T’s Greenhouse gas estimations from 2012. http://www.att.com/Common/about_us/files/csr_2012/key_performance_indicators.pdf (14.6MWh of energy!)
I know that this is not ALL of the energy used for a website, (but it is a LOT of the backhaul) and it comes to 170 metric tons/PB. 15.6lb/GB gives me 7400 mtons/PB. So, the 2013 number is 43x smaller.
With AT&T’s number, Tumblr is ONLY 60 tons/day. That’s still enough power for 2.7 houses for a year, or would require 1300 trees planted per day to offset the CO2. WE do have a lot of work to do!
OK, so this bent my mind a bit. I’ve never considered the carbon footprint that my designs leave behind. Thanks for the wake up. Now I’m going to have green grass and whales on my mind as I build new sites!
Thanks for sharing!
It’s nice to see, my source for great tech info cares about the environment as much as i do. I work on the GSA Carbon Footprint Tool http://www.carbonfootprint.gsa.gov. We help the US federal goverment reduce their GHG emissions.
Very informative and interesting post.It is really a big help for the MOTHER EARTH . Thank you so much for sharing it with us.
http://www.keshinformatics.com/webdesigning.html
Fantastic!!!! I bookmarked..sharing one more website http://www.psddrive.com…which is providing free icons, tags etc…
Thanks for sharing valuable information and it is useful for IMB WEB SERVICES provides the best WEB DESIGN Services
Interesting post and good idea to follow and increasing mobile web audience. I’ve optimized the images and server related content via folloing these suggestions
Great issue. Green Code Lab release a free tool to measure the impact of your website : http://webenergyarchive.com/
Measure is the first step to eco-design !
I entirely agree that a target should be “reducing CO2 by tackling page bloat”, which also has the effect of making content more accessible on slower connections and hardware. As Burk above says, you should also include client-side consumption, such as inefficiently-coded or unnecessary scripts. Actual data transmission is a relatively small part of energy usage, server usage larger, and when you consider a server should only spend a fraction of a section serving a page, but the browser spends a few seconds rendering it, and the user spends even longer reading it, it’s not so simple. Constant Ajax updates drain mobile device batteries, and have a correspondingly higher CPU usage on desktops. So CSS aggregation and so on help a bit with page speed, but actually the contribution of a few extra bytes of HTTP header is only a small part of this. Keep it simple!
There are some useful free handouts at http://www.apc.org/en/pubs/green-my-tech-tip-sheets (hosted on 100% renewably-powered servers!).
Excellent insight for modern day web design!
http://alistapart.com/article/sustainable-web-design#comment-form
#biolaebiz #wedesign