Case in point:
I picked on this blog in particular because it combines some of the worst features of naive “green design”.
There is a confusion between spreading a ‘green’ message and making green websites.
In particular, the content of the blog post is awesomely ironic. It contains the pious hope that all of us green tech-geeks (who care so much about the environment) will be “saved” by the godlike engineers at Google.
In other words, we designers and “cultural creatives” have to convert the rest of the world to green, but our own industry – well, well, we’ll just let Google fix that. After all, didn’t they say they aren’t evil?
The site itself is non-optimized. It loads lots of big default libraries. I ran it through a couple of site performance testers, and let’s just say that the results were not good. This site is closer to 1/2 gram per second CO2 than the 30 mg per second we see on many sites. It’s like showing up for an environmental rally in a squadron of Hummer H2s.
- Total HTTP Requests: 58
- Total Size: 385539 bytes
- Total Images: 28
- Total CSS imports: 4
The image tags are also missing width and height attributes, resulting in multiple re-rendering of the page as new images are downloaded.
To be fair, the page is using GZIP compression, but the designer was probably unaware it even existed, probably enabled by default. There’s been no attention to multiple HTTP requests, not compressing headers, and so on.
Well geez, isn’t this just a problem with WordPress templates? Sorta. I ran my own page here at https://sustainablevirtualdesign.wordpress.com, and got the following, on a default WordPress (Free) template. Not great, but better. And I don’t have green leaves on my site.
- Total HTTP Requests: 12
- Total Size: 198422 bytes
- Total Images: 4
- Total CSS imports: 4
Well, am I being too hard? After all, “she’s just a designer”. Actually the blog was written by a SEO optimizer. Some technical skill is required for that. I agree she may not have had control over the coding, but she did have control over the outcome. And SEO and “sustainability” go hand in hand – there’s lots of talk about the need to optimize websites in the SEO community.
My point. If you create a site on the web, even with a designer and a CMS system, you’re a designer/programmer hybrid or you hired one. Even if you don’t do all the code, you have to understand how your site impacts sustainability of the web.
As a final zap, consider the footprint of these Eco-Organizations – they put the blogger above to shame – if shame means “super-size my website!” These groups are using wasteful techniques to carry their message.
It’s the same issue that emerged in Graphic Design (for paper) several years ago – fancy brochures with expensive blank sheets of paper, plus toxic inks telling the unwashed masses to “cut back”…
It’s my version of Web Pages That Suck – http://www.webpagesthatsuck.com
Note: The average page size of the top 100 websites is about 900k – see the HTTP Archive at http://www.httparchive.com. Letter grades are from YSlow.
Here is the gallery of shame:
- YSlow Grade: D (65/100)
- Total HTTP Requests: 106
- Total Size: 1,350,000k (WOW! a 1-megabyte download)
- Total Images: 54
- Total CSS imports: 6
Greenpeace website (http://www.greenpeace.org):
- YSlow Grade: D(68/100)
- Total HTTP Requests: 70 (WOW!)
- Total Size: 1,095,500k (WOW! a 1-megabyte download)
- Total Images: 27:
- Total CSS imports: 6
The Living Principles, sustainable design, (http://www.livingprinciples.org)
- YSlow Grade: D(64/100)
- Total HTTP Requests: 155 (WOW WOW WOW!)
- Total Size: 1,513,000k (50% over the 2012 web average)
- Total Images: 90
- Total CSS Imports: 23
A few more sites to prove my Point – you can see a chart of about 170 eco-websites at a more recent post.
World Green – http://www.worldgreen.org – “D” – small footprint (507kb), but way to many separated CSS images, no compression, no Expires headers
Earth Day – http://earthday.org – “C”, but almost 3000kb in download! 269 images (YEOW) – someone need to check how they created their slidehow!
To be fair, most eco-blogs are much better, but this is due to the blog software. And some sites really have been optimized for sustainable use of the web. Here are some that do better than the unsustainable average.
World Wildlife Fund – http://wwf.panda.org – “C” – 100kb, not too many HTTP requests.
renourish, sustainable graphic design http://www.re-nourish.com
- YSlow Grade: C (72/100)
- Total HTTP Requests: 50
- Total Size: 333,400k (pretty good, 1/3 the others)
- Total Images: 24
- Total CSS imports: 5
Another reasonable site: GoodGuide – http://www.goodguide.com
A nice Web 2.0 look at about 1/3 the cost of the other sites above. Needs Expires headers, checking to ensure that all CSS is loaded in the head region.
What’s the difference? Compare the DESIGN of the decent sites to the not-so-decent ones. The bad sites were designed by designers who don’t really understand the web as a medium. In general, they don’t apply principles of responsive design, progressive enhancement, “mobile first”, and other sustainability design goals. They don’t do elementary things like make CSS sprites. This is not engineering. If “the medium is the message”, what is the medium saying?
As Nate Shredoff says…
Design is the problem.