Last month the first International Conference on Green Computing took place. The conference agenda included a broad range of topics but, in essence, was eagerly addressing issues surrounding the carbon footprint of computing and how computers can contribute to the well being of our world. So what better time to raise a few questions about green web design. What is our role in contributing to a greener computing world?
We are, after all, steering the Internet1 towards being a safe storage of every kind of data. Every now and again it is good to step back and look at where we fit into this bigger picture of a green computing world. We as web designers and developers are the lead architects of the Web. We are the ones carrying the main blocks and putting them in place. Layering and cementing the blocks of information together. Brick by brick. The new Rome!
But who is actually making sure the outer walls of our construction run true? Do we have our eyes on the bigger picture? Are our processes as eco-friendly as they could be / should be? And this is not just about optimization for speed of delivery. Are we true to ourselves in considering the energy efficiency of our web constructions, or are we more concerned for aesthetics? Are these relevant questions for a web designer?
So, How Much Does The Web Cost? Link
What a complex little question. Discovery Magazine has already asked the question: How Much Does The Internet Weigh?2 (if you are one of those designers/developers who love a little reading about the science behind your work, you’ll find this interesting). In another reference to this question, apparently the Internet weighs 56grams (two ounces), but takes fifty million horsepower to run.
Someone has actually also published some back-of-the-napkin figures for How much energy per Tweet?. According to Google’s own published comparisons of how Google Searches tally up against everyday activities in terms of CO2 emissions, a five mile trip in the average U.S. automobile is equal to 10,000 Google searches.
One web page carbon footprint measured Link
One crucial irony in this relatively new global concern for energy efficiency is that as broadband internet technologies improve speed of delivery, web designers and developers seem to be designing and building more cumbersome websites.
According to statistics, since 2003, the average web page size has quintupled. That is to say it has increased five-fold. “From 2003 to 2009 the average web page grew from 93.7K to over 507K”. While performance has improved, it seems we have forsaken basic compression logic for increased quality, hence larger files behind our web pages.
Author note: Heaven knows I have been guilty of throwing in a 180kb full-screen image on a web page thinking simply, what the heck, my target audience is in Germany, broadband services here can handle it! Five years ago I can remember aiming for no more than 20kb per graphic.
So what needs to be highlighted here is the fact that the richer and more interactive website experiences we are creating are not going unnoticed. The files we create to build websites are “stored on servers, viewed by personal computers, and connected via networks”. This all requires energy to then house, cool, power and deliver the data that makes up a website.
Dr. Alex Wissner-Gross, a Harvard University physicist and Environmental Fellow, has researched the environmental impact of computing and calculated the CO2 emissions caused by individual use of the internet. His research, published in 2009, indicates that viewing a simple web page generates about 20 milligrams of CO2 per second. This rises to about 300mg of CO2 a second when viewing a website with complex images, animations or videos.
“So, when you are sitting in London viewing a website hosted in California, there are power plants on at least two continents actively pumping carbon dioxide into the atmosphere in order for you to watch that video or read that online newspaper…
Since millions of people are surfing the web every hour of every day, that carbon footprint adds up to an astounding 2% of international emissions each year. In fact, according to the American research firm Gartner, the carbon footprint of information and communications technology exceeded that of the global aviation industry for the first time in 2007.”
Now while scientific measurements of CO2 and kilowatt hours are, to the average person, still a foggy area to get our heads around, what is important to consider is simply that every website we produce has a consequence. According to figures from worldwidewebsize.com, as of the 31st August 2010, there are at least 15.26 billion indexed pages. A very simplistic analysis here would be that, contrary how fast my broadband service is, because we make our graphic files larger together with the fact that we are producing more web pages, any new efficiency is counteracted. As noted, this would be a very generalized conclusion to draw.
One measuring tool Link
Dr. Wissner-Gross has co-founded CO2Stats53, an online “environmental trustmark” calculator, designed to allow web designers and bloggers make their sites greener in an accountable way. CO2Stats says that it automatically monitors and neutralizes the end-to-end carbon footprint of websites — “not just the servers, but the visitors’ computers (while they are on your site) and the networks that connect them”.
The changing face of an average web page Link
“In 1997, 90% of videos were under 45 seconds in length (Acharya & Smith 1998). In 2005, the median video was about 120 seconds long (Li et al. 2005). By 2007, the median video was 192.6 seconds in duration (Gill et al. 2007). The median bit rate of web videos grew from 200Kbps in 2005 to 328Kbps on YouTube in 2007. So by late 2007, the median video weighed in at over 63MB in file size. On YouTube, the average video size is 10MB, with over 65,000 new videos added every day”.
The conclusion of the report is:
The Long-Term View Link
The World Wide Web Consortium10 (W3C) is, for all intents and purposes, the one central point where responsibility for the future development of best practice web design can be attributed. The W3C points out quite clearly and early in its Mission Statement11 that “long-term growth of the Web” is of utmost importance. The key individual areas of its Mission Statement then address:
W3C Principles Link
- Web for All
- Web on Everything
W3C Vision Link
- Web for Rich Interaction
- Web of Data and Services
- Web of Trust
- HTML and CSS
- Scripting and Ajax
- Audio and Video
- Mobile Web
- Math on the Web
It would appear that we are successfully delivering the W3C’s vision of a world wide web for rich interaction. And we have the creative licence to produce visually stimulating content. In its definition of “What are Graphics?” it states: “Web graphics are visual representations used on a Web site to enhance or enable the representation of an idea or feeling, in order to reach the Web site user.
Graphics may entertain, educate, or emotionally impact the user, and are crucial to strength of branding, clarity of illustration, and ease of use for interfaces”. It goes on to say that “Graphics are used for everything from enhancing the appearance of Web pages to serving as the presentation and user interaction layer for full-fledged Web Applications”.
So Let’s Do Our Part Link
Consider offering your clients green web initiatives Link
It can be a valuable collateral marketing tool for your design business if you promote the fact that you encourage green website initiatives. There is, for example, a Danish project – CO2 Neutral Website – which is on a global march to rein in the energy consumption of the world wide web. Your financial registration with the CO2 Neutral initiative contributes to climate projects, provides you a certificate as a climate-friendly website plus gives you use of tools to help energy optimization.
You can make the Web a better place by keeping your website clean and well-organized. And if you do, you can put badges to make it clear to your potential clients, for instance CO2 Neutral Website14 (not free) or My Blog Is Carbon-Neutral Badge15 (free).
Black could be greener Link
While there is controversy16 over whether a black color palette is more energy efficient than light colors on a website, there are still proponents of the darker website design. The emergence of the search engine Blackle17 in 2008 (founded by Sydney-based online media company, Heap Media) was the result of a proposed theory in 2007 that a black version of the Google search engine would save a fair bit of energy (750 Megawatt-hours).
“The principle is based on the the fact that different colors consume different amounts of energy on computer monitors”. Blackle searches are powered by Google Custom Search and states that it saves energy because the screen is predominantly black. “Image displayed is primarily a function of the user’s color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.” Roberson et al, 200218
Beyond the actual color information behind our web pages, some developers have considered the automation of standby mode intra-surfing. That means a website can be put in standby mode while a user is surfing other pages. Online Leaf has developed a WordPress Plugin19 that installs a green standby engine on blogs.
The low wattage color palette Link
Boston-based green computing consultant Mark Ontkush (incidentally, whose blog post in January 200721 started the black-white Google controversy mentioned above) has published the EMERGY-C22 low wattage color palette which is claimed to consume only 3 to 4 watts more than an all black page.
The hex codes are as follows:
- #822007 (rusty red)
- #000000 (black)
- #b2bbc0 (blue grey)
- #19472a (forest green)
- #3d414c (cobalt)
- #ffffff (white)
100% renewable web hosting Link
Using 100% renewable energy to store and dish up our websites is certainly a service worth considering when building a new website for clients. Or even when doing a re-brand, it could be mentioned to the client as a value-add marketing concept.
Treehugger24 lists wind and solar-powered web hosting companies that are increasing in popularity. And here is another Top-10 list of green web hosting companies as listed by Web Hosting Geeks25 where the web hosts proclaim to use only renewable energies to run their servers.
Think, be aware, optimize AND be methodical Link
Small behavioral changes can make a big difference
Upon recently revisiting Tim Berners-Lee27’s proposal for the web28 two words struck a chord: portability and usefulness. After facing a situation of ‘Information Loss’ at the European Organization for Nuclear Research (CERN), the conclusion of Berners-Lee’s proposal for better information management goes like this: “We should work toward a universal linked information system, in which generality and portability are more important than fancy graphics techniques and complex extra facilities.
The aim would be to allow a place to be found for any information or reference which one felt was important, and a way of finding it afterwards. The result should be sufficiently attractive to use that it the information contained would grow past a critical threshold, so that the usefulness the scheme would in turn encourage its increased use.”
What I personally gained from this was: If it’s not portable, don’t use it. If its not useful, get rid of it.
Tools to find and remove unused files Link
There are various (but not many) software that crawl websites and identify pages and files that are unused. Here are two to consider for finding unused files: Windows Inspyder Orfind29 and Mac SiteCleaner30. There are also some software, such as WebsiteCleaner, that profess to optimize complete websites by stripping unnecessary characters and metadata.
How does your website measure up? Link
You can get a breakdown of overall file size and number of external objects for a web page here at websiteoptimization.com31 or you can use the Firefox Firebug32 Extension in conjunction with the Page Speed Add-On33 to analyse your website pages. Advice is also given on where you can save on size and speed.
Set yourself ‘golden rules of thumb’ Link
As mentioned above, I used to always aim for a graphic size no greater than 20kb. Why, then, should this be any different today? Admittedly, to a great extent the tools we use to build websites have control over the optimal efficiency of our work. But these are also improving. Image compression processes are mostly defined by the JPEG, the Gif and the Png. While more than 60% of the average web page is made up of graphics and multimedia, there are better optimizing practices that we can employ as designers. Popular scripting libraries such as Jquery35 and MooTools36 have also greatly advanced the lesser-impact level of dynamic web pages.
You may want to take a look at the following articles on image optimization:
- Website Performance: What To Know and What You Can Do37
- Clever JPEG Optimization Techniques38
- Clever PNG Optimization Techniques39
Wrapping Up Link
This article actually started out as a good web design house-keeping article, and is not meant to be environmentally evangelistic. The Web is growing so quickly, it is actually difficult to fathom how we are all working away independently in our little corners of the world and yet at the same time working together to build what is destined to be the greatest infrastructure of all time. Each website construction phase is a virtual sojourn for us as web designers and developers, but nevertheless leaves an imprint that can be physically measured.
Some of us may think this is not a web designer’s problem. As far as I am aware, we have no established maximums that cap our build of web page sizes nor restrict how much ‘litter’ we leave on the world wide web. To a degree, we (or our clients) do pay premiums to web hosts based on website sizes. So therefore by passing the environmental buck onto the web hosts means it is their responsibility to put in place energy efficient processes. But as noted above, within the past six years our web pages have increased in size five-fold to an average of around 500kb. At this rate, one could forecast that by 2020 we are looking at pages that are at least 1MB. Therein lies some responsibility.
Or, an alternative conclusion would be that we have reached the page size threshold? That is to say, we are punching out full-size images and streaming video. What else could we possibly want/need?
Whatever your stance on these questions and whatever web technology evolves over the coming 5 to 10 years, some things will always remain true: good things come in small sizes!
Partial Bibliography Link
- Revealed: the environmental impact of Google searches40
- How you can help reduce the footprint of the Web41
- The Internet weighs two ounces42
- World Wide Web Consortium43
- Average Web Page Size Quintuples Since 200344
- Google: Efficient computing
- International Conference on Green Computing
- The full story on Black Google, Blackle, etc.45
- 1 https://www.smashingmagazine.com/2010/08/11/the-future-of-the-internet/
- 2 http://discovermagazine.com/2007/jun/how-much-does-the-internet-weigh
- 3 http://www.co2stats.com/
- 4 http://www.co2stats.com/
- 5 http://www.co2stats.com/
- 6 http://www.websiteoptimization.com/speed/tweak/average-web-page/
- 7 http://www.websiteoptimization.com/speed/tweak/http/
- 8 http://www.websiteoptimization.com/speed/tweak/css-sprites/
- 9 http://www.websiteoptimization.com/speed/tweak/suture/
- 10 http://www.w3.org
- 11 http://www.w3.org/Consortium/mission.html
- 12 http://www.w3.org/standards/webdesign/
- 14 http://www.co2neutralwebsite.com/
- 15 http://www.kaufda.de/umwelt/carbon-neutral/how-you-can-join/
- 16 http://www.infoworld.com/t/platforms/google-energy-issue-not-black-and-white-687
- 17 http://www.blackle.com/
- 18 http://enduse.lbl.gov/Info/LBNL-48581.pdf
- 19 http://wordpress.org/extend/plugins/online-leaf/
- 20 http://wordpress.org/extend/plugins/online-leaf/
- 21 http://ecoiron.blogspot.com/2007/01/black-google-would-save-3000-megawatts.html
- 22 http://ecoiron.blogspot.com/2007/01/emergy-c-low-wattage-palette.html
- 23 https://www.smashingmagazine.com/wp-content/uploads/2010/08/EMERGY-C.jpg
- 24 http://www.treehugger.com/files/2007/05/plethora_of_opt.php
- 25 http://webhostinggeeks.com/greenwebhosting.html
- 26 https://www.smashingmagazine.com/wp-content/uploads/2010/08/chalkboard.gif
- 27 http://en.wikipedia.org/wiki/Tim_Berners-Lee
- 28 http://www.w3.org/History/1989/proposal.html
- 29 http://www.inspyder.com/products/OrFind/Default.aspx
- 30 https://www.macupdate.com/app/mac/12275/sitecleaner
- 31 http://websiteoptimization.com/services/analyze/
- 32 http://getfirebug.com/
- 33 http://code.google.com/speed/page-speed/
- 34 http://getfirebug.com/
- 35 http://jquery.com/
- 36 http://mootools.net/
- 37 https://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/
- 38 https://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
- 39 https://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
- 40 http://technology.timesonline.co.uk/tol/news/tech_and_web/article5489134.ece
- 41 http://www.timesonline.co.uk/tol/news/environment/article5488934.ece
- 42 http://adamant.typepad.com/seitz/2007/06/the_sincerest_f.html
- 43 http://www.w3.org/
- 44 http://www.websiteoptimization.com/speed/tweak/average-web-page/
- 45 http://ecoiron.blogspot.com/2007/08/history-in-january-2007-mark-ontkush.html
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.