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.
- 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.
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|
|BBC Science and Nature||64||683||88||LINK|
|Mother Nature Network||64||1118||119||LINK|
|The Living Principles (AIGA)||64||1494||152||LINK|
|Rocky Mountain Institute||64||1983||109||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.
(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
|Versions – Subversion Client for Mac||87||777||12||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|
|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|
|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.