Great example of “Swapping Green Ingredients”

A great post at Dyn  is right up the sustainability alley. In this article, Lara Swanson comments on the performance enhancements you can get from a site by doing the basic stuff practical for designer-developers.

According to the article, the worst offenders were:

  • not saving images effectively for web: +28% page load time
  • using @import to call one half of a stylesheet into the other half: +7.6%
  • using inefficient CSS selectors: +5.5%
  • adding 10kb of extra HTML: +4.8%

But the best part of this article is the table of performance results. This is exactly what a site designer/developer might create while “swapping green ingredients”. In physical design like architecture, the “green-ness” of a project is measured by an increased used of ingredients that are less toxic, and impact the environment less. On the web, swapping in optimized images for un-optimized ones is a “virtual green ingredient.”

Check out the great tables at: I don’t reproduce this data, because the actual pages contain some great tooltip rollovers describing the tests. There’s also a github summarizing the tests and providing the reference files at:

The great thing about the tables at this site is that they show the effect of swapping in “green” coding practices. In addition, they show the performance boost, as measured by WebPageTest for a variety of current and legacy browsers. This addresses the potential conflict between efficiency and maximum user support (both part of all common sustainability frameworks). One can see that older browsers are slower, and supporting them slows things down more. This is a push-pull situation – as the number of people using a legacy browser drops, if support affects new browsers, there should be a breakpoint where support drops to a basic, “progressive enhancement” default. What’s most interesting in the IE CSS tests is that new versions of IE are most impacted by supporting old IE – Chrome hardly notices “IE fix” CSS.

In addition to standard WPO, a sustainability table would build on the one at with additional features, including changes in SEO, changes in UX/design, and changes in the design process and workflow. The summary table would form a “sustainability deliverable” for clients that were interested in making their web presence greener.

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.