Getting numbers for web sustainability


One problem with Sustainable Web Design is that we don’t have numbers for the green-ness of particular libraries or strategies. We do have Web Performance (WPO) scores, which indicate that sites could be made more efficient. Based on what I’ve read in the WPO literature, a typical website might reduce its footprint by 2/3.

 In architecture they use Life Cycle Assessment (LCA) models to compute a more exact carbon footprint. In architecture, there are databases that provide an estimate of the “green-ness” of a material based on LCA models. There are certification programs (most notably LEED) where architects and interior designers use to credential themselves in the technique.

So, what would give us similar numbers for the web? We need a “green ingredients” or “sustainable virtual building materials” database for the web. This database could be checked against your web project, and the various libraries, tools, techniques, would be tested and give you a “sustainability score”. You might even get estimated “carbon footprint” for your current site. This could be a plug-in for web IDEs like Eclipse or Coda.

The way I’ve imagined developing a “green database” is listed below. It would be very similar to what they do in Architecture and Industrial Design, where they have programs that actually do this (SolidWorks).
For libraries (e.g. JQuery versus the similar, but smaller Zepto):
  • Find similar libraries, e.g. JQuery versus Zepto, and try them in a project. Probably a “headless” browser plus code could create a testing platform. It would be very similar to performance-tester tools used to scale large websites. One might use YSlow, since its codebase is open-source to develop a tool like this.
  • Make a website with JQuery, and then Zepto. This implies that both can be used in a similar way.
  • Compute download size, change in page speed loading for JQuery vs Zepto.
  • Do it for lots of web pages of varying complexity.
  • Store “before” and “after” scores in subscription database.
  • Database could be accessed by a “plug-in” in an IDE like Coda by people with a subscription to the database. A panel would provide a real-time estimate of the current carbon footprint as a designer works.
For techniques (using font dingbats instead of bitmaps in page design) one would need to collect data with a “before” and “after” the technique was used. Here’s how it might work:
  • Design a website with bitmaps
  • Test page speed
  • Replace bitmaps with font dingbats using CSS. Use @font-face for foreground, SVG “vector sprites” for background CSS.
  • Test Page speed and download size again
  • Also test overall site performance in something like Google Webmaster Tools
  • Calculate the increase in performance
  • Do this for several sites to get an average
  • Store in subscription database
Several sites would be averaged to give an “average benefit” for a technique.
Over the long run, one would need to also calculate the difficulty of using a library or technique. If using Zepto added 1 month to development, due to its lack of JQuery plug-ins, one would calculate the “Embodied energy” of a web page as the energy needed to keep the design shop running for 1 extra month.
Needless to say, this is a lot of work. To make the numbers meaningful, one would have to look at the WPO scores for thousands of websites. The sites would need to be sorted based on features and complexity. How would we get this data? Probably, we would need a JavaScript-based “reporter” script like that used in Google Analytics. We would also need a way to score web pages by “complexity,” which could be complexity of layout or complexity of information design. As a starter, one might use Jacob Neilsen’s estimate of page complexity.
This is what we need to move from WPO to sustainability, and make WPO a “green” issue.

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