Green Design vs. Sustainable Web Design – Some Data


Here is a re-post of a 2012 post which shows a visual chart of web sustainability. It was created by checking about 170 self-styled “eco” or “green” websites with Yahoo’s YSlow (http://developer.yahoo.com/yslow) tool for analyzing site optimization, which is a major component of Sustainable Web Design. The study was done on March 10, 2012. The sites were taken from a variety of lists on the Internet, and vary widely in traffic and specific goals. It isn’t meant to be comprehensive, and the site scores do vary by 5-20% from day to day. If you see a bigger mistake, let me know.

Despite these caveats, one can see that many very popular ec0-websites are “unsustainable” in Internet terms – they’re energy and resource hogs. Sure, if we took a couple hundred popular websites we would probably find something similar.

But these are explicitly “green” websites and all about sustainability in the physical world. So many fail here.

Websites with a green message, checked for web sustainability

Sustainability of “Green” websites

(Click on Thumbnail Image above for the full-sized image)

The X axis shows the average downloaded content, in kilobytes. You can see that the Internet average as of March 2012 was about 1 megabyte, as reported by the HTTP Archive (http://www.httparchive.com). The sites vary widely in the size (10k to almost 5 megabytes), and in the media type comprising the downloads. Some have lots of inline images, others have lots of background CSS images, and a few have huge Flash downloads (e.g. Carbon War Room at http://www.carbonwarroom.com). A few have lots of everything (e.g. Inhabitat at http://www.inhabitat.com, which is off the charts at upper right). The lowest in the set is “The world’s shortest recycling guide” at http://obviously.com/recycle/guides/shortest.html, which is pure HTML.

The sites were checked twice, and many vary by several percent over a space of a few days due to media updates.

The Y axis shows the number of HTTP requests needed to build the page. All external files – CSS, images, JavaScript – are summed up to create this number. The HTTP requests are a measure of poor optimization. There are lots of tools for combining and/or compressing JavaScript and CSS files. Some of the fattest sites have over 200 HTTP requests.

What do the results mean? The X axis is partly dependent on the content being presented. It’s a significant issue for Sustainable Web Design, but it is possible that a given site must use heavy images or rich media to convey its message.

The Y axis is the most disturbing figure. The number of HTTP requests is largely independent of content. An efficient site will have its code files fused into a few larger files for the most efficient download. Inline images can be moved into CSS, and these in turn can be fused into “CSS sprites”. In other words, there’s no excuse for >100 HTTP requests for a single web page.

It’s worth noting that many of the sites with the highest HTTP requests have a distinctly “newspaper-like” or “printed brochure” feel – but many of the “good guys” are also virtual newsprint. In the former case, I suspect that the site was built in a tool like Adobe InDesign, then “burned” out to HTML, creating massively inefficient sites. In contrast, the sites in the blue shaded area were almost certainly built by hybrid designer/developers working in HTML and CSS.

It’s ironic that those sites which try to promote “Reduce, Reuse, Recycle” among their visitors are frequently the worst offenders. Look at the message on Inhabitat (http://www.inhabitat.com) – “design will save the world” – and muse on how the site operators and designers created a real Hummer to take them to the green rally.

Here’s a chart of the “worst of the worst”

Site Name YSlow Score Download Size(kb) HTTP Requests Site URL
The Daily Green 65 1281 203 LINK
TreeHugger 65 1378 111 LINK
Green Options 65 2051 127 LINK
BBC Science and Nature 64 683 88 LINK
Mother Nature Network 64 1118 119 LINK
The Living Principles (AIGA) 64 1494 152 LINK
Ecorazzi 64 1846 146 LINK
Rocky Mountain Institute 64 1983 109 LINK
Eco-Chick 63 4458 141 LINK
CleanTechnica 61 1584 209 LINK
Earth Times 61 2067 194 LINK
One World – where the good guys gang up 59 2570 148 LINK
Inhabitat – design will save the world 59 4471 389 LINK
United Nations Environment Program 58 1232 100 LINK
Eco Environments, LTD 39 2484 115 LINK

The following plot shows the full YSlow score (Version 2 rules) for these same sites. YSlow computes its overall score adding features that any site administrator could implement, e.g., using a Content Delivery Network (CDN), and adding “Expires” headers to pages. In this plot, a low Y axis value is bad.

Sustainability of green websites, measured with Yahoo! YSlow
Sustainability of “green” websites, YSlow

(Click on Thumbnail Image above for the full-sized image)

In this plot I didn’t name as many sites, since many more of them cluster around the current YSlow average score of 69-70%. The take-home is that some of the less sustainable sites in the other plot are partly optimized, and do better here (though that doesn’t explain their large download size).

But, the worst offenders in the other plot also show up as unsustainable measurd by the combined YSlow score. The exceptions are those sites that use Flash for their entire interface, like Carbon War Room (http://www.carbonwarroom.com). YSlow gives Flash-heavy sites a high score due to the low number of external files on those sites. Since Carbon War Room is just a big Flash movie in a web page frame, it gets a high score which is not justified given its huge size.

What’s more interesting are the sites in the upper shaded region. These sites have good YSlow scores, demonstrating that some sites have been optimized. Some of these sites also have small download footprints. These sites should be of great interest to any artist or designer creating a web page – their design follows principles of Sustainable Virtual Design.

I’ve listed a few of the more interesting sites below. I removed blogs with simple default templates, and Flash-heavy sites that were getting high YSlow scores because they hardly used HTML and CSS in their layout:

Site Name YSlow Score
Download Size (kb) HTTP Requests
Site URL
Versions – Subversion Client for Mac 87 777 12 LINK
Mountain Forum 84 821 44 LINK
Planet Ark 84 332 22 LINK
Canvas Dreams Sustainable Web Hosting 84 305 43 LINK
Attra – National Sustainable Agriculture Information Service 84 293 31 LINK
Buy Nothing Day 84 245 13 LINK
Aiso.net Web Hosting 83 573 41 LINK
Alternative Energy 83 467 19 LINK
International Institute for Sustainable Development 83 276 25 LINK
U. of North Dakota Energy & Environment Research Center 82 837 42 LINK
Sustainable Agriculture Research & Education 82 515 45 LINK
SuperGreen Web Hosting 82 191 29 LINK
National Council for Sustainable Development 81 535 15 LINK
Le Moulin de Sauvage 81 250 24 LINK
ThinkHost 80 193 29 LINK
Green With Glamour 79 403 24 LINK

It is heartening to see that “green” web hosting companies like Aiso.net and Canvas Dreams do well here. Even more interesting are sites like Le Moulin de Sauvage (http://www.le-moulin-de-sauvage.com/), which displays an interface that other sites take 5x the amount of glump to create.  Can your site do the same?

Even these sites could be optimized much further – their YSlow results reveal several areas that could be improved. But they are on the path to Sustainable Virtual Design.

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s