Comments on Sustainable Web Design

47 Reader Comments

Back to the Article
  1. 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!

    Copy & paste the code below to embed this comment.
  2. 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!

    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. 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)?

    Copy & paste the code below to embed this comment.
  5. 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.

    Copy & paste the code below to embed this comment.
  6. 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.

    Copy & paste the code below to embed this comment.
  7. 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.

     

    Copy & paste the code below to embed this comment.
  8. 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.

    Copy & paste the code below to embed this comment.
  9. 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.

    Copy & paste the code below to embed this comment.
  10. 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.

    Copy & paste the code below to embed this comment.
  11. A good current source for trends in “bloatware” - HTTPArchive
    http://httparchive.org/trends.php

    Copy & paste the code below to embed this comment.
  12. 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!

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. @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?

    Copy & paste the code below to embed this comment.
  15. I would go for planting more trees :)

    Copy & paste the code below to embed this comment.
  16. 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.

    Copy & paste the code below to embed this comment.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. When I read that a data center has a “brute force hvac system” I realize that there are always people with different priorities

    Copy & paste the code below to embed this comment.
  20. 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.

    Copy & paste the code below to embed this comment.
  21. 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

    Copy & paste the code below to embed this comment.
  22. Web from a whole new perspective, Global platform which affects the globe.  Thanks for inspiring article.

    Copy & paste the code below to embed this comment.
  23. 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 ))

    Copy & paste the code below to embed this comment.
  24. the post is interesting,nobody argues.. but do we really can improve the situation by these small measures?!....

    Copy & paste the code below to embed this comment.
  25. that link in french is quite useful, just use Chrome’s translate option

    Copy & paste the code below to embed this comment.
  26. 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

    Copy & paste the code below to embed this comment.
  27. 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.

    Copy & paste the code below to embed this comment.
  28. Intersting article, and nice blog. Keep going bro, I will follow you for sure!

    Copy & paste the code below to embed this comment.
  29. 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.

    Copy & paste the code below to embed this comment.
  30. This article has really given me a whole new insight to the inner happenings in web design.
    Nice :) .

    Copy & paste the code below to embed this comment.
  31. 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.

    Copy & paste the code below to embed this comment.
  32. 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…

    Copy & paste the code below to embed this comment.
  33. Thanks for sharing this post, i like that type of content stuff, Thanks for the share a new details…

    Copy & paste the code below to embed this comment.
  34. I always care about site weight, however never thought about this ways. Inspiring article!

    Copy & paste the code below to embed this comment.
  35. 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/.

    Copy & paste the code below to embed this comment.
  36. 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

    Copy & paste the code below to embed this comment.
  37. 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!

    Copy & paste the code below to embed this comment.
  38. 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!

    Copy & paste the code below to embed this comment.
  39. Thanks for sharing!

    Copy & paste the code below to embed this comment.
  40. 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.

    Copy & paste the code below to embed this comment.
  41. 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

    Copy & paste the code below to embed this comment.
  42. Fantastic!!!! I bookmarked..sharing one more website http://www.psddrive.com…which is providing free icons, tags etc…

    Copy & paste the code below to embed this comment.
  43. Thanks for sharing valuable information and it is useful for IMB WEB SERVICES provides the best <a href =” http://www.imbwebservices.com/web-design/”> WEB DESIGN </a> Services

    Copy & paste the code below to embed this comment.
  44. 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

    Copy & paste the code below to embed this comment.
  45. 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 !

    Copy & paste the code below to embed this comment.
  46. 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!).

    Copy & paste the code below to embed this comment.
  47. Excellent insight for modern day web design!
    http://alistapart.com/article/sustainable-web-design#comment-form
    #biolaebiz #wedesign

    Copy & paste the code below to embed this comment.
  48. Sorry, commenting is closed on this article.