Green Web Engineering

According to Dick et al.1 “Green Web Engineering describes the art of developing, designing, maintaining, administrating, and using a website in such a manner, that direct and indirect energy consumption within the complete life cycle of a website is reduced.”

Based on that article, we will present some suggestions to support the movement to a “Green Web”, especially by reducing the data transfer of the net. The aim is to address the different stakeholders within this field: Designers, web designers, authors, administrators and users. A more detailed description is to find in Dick et al.1

Configure HTTPs Caching Support

In order to reduce the total amount of HTTP requests or HTTP payload sizes, set far future expiration dates and cache-control headers for resources that infrequently change. Additionally use Last-Modified headers and Entity Tags for all resources that do not need recalculation on subsequent requests (mainly static content).

Use Compression

Compression should be used for files that are well compressible like text based files. Do not use it for all content types, because it might be counterproductive for e.g. compressed image file formats, compressed music and video files or PDF documents.

Apply “Green IT” Concepts

So far, several web hosters exist that offer web hosting with renewable energy. Additionally, administrators can apply the newest techniques regarding Green IT like virtualization strategies.

Support Caching on the Server Side

By implementing support for Expires and Last-Modified headers in web programs and scripts whenever possible, it is possible to decrease the transferred data volume and thus power consumption.

Minimize JavaScript

Tools like JSMin help to minimize JavaScript. Additionally the HTTP response should be compressed with GZIP to achieve lower data transfer volumes. If compression cannot be used (e.g. if HTTP clients are not fully compatible with compression algorithms) obfusca-tion should be used. These action should be done before the files are deployed on the server instead of minimizing or obfuscating them dynamically for each HTTP request to save processor time and thus power consumption.

Minimize and Optimize CSS

CSS as well as JavaScript declarations should be saved in an external file and then included in the website documents. This minimizes the filesize of the web document and the CSS declarations will be loaded once and not with every request of the website. There are different ways to minimize and optimize CSS files:
  • Using abbreviations, e.g. long color definition {color:#ffcc00;} can be written as {color:#fc0;}
  • Deleting unnecessary whitespaces, strings and blank lines
  • Writing the whole code in one line by deleting word-wraps
  • Replacing inline styles with type selectors
  • Removing unnecessary code or to use descendant or contextual selectors instead of inline classes
  • Using grouping multiple selectors with the same declaration and grouping multiple declarations with the same selector in one rule set
  • Combining separate single properties, e.g. for margin, border, font, background, list-style and
  • Shorting or abbreviating names of classes or IDs
One possible supporting tool in this context is CSSTidy.

Optimize Graphical Elements and Logos

There are some possibilities to optimize a logo. The most efficient ones are: changing the color mode from RGB to an indexed palette, compressing, saving with special web settings and replacing graphical text with CSS formatted text. It is advisable to save the logo as PNG file since it has a has a better compression algorithm and especially flat-color images are 10% to 30% smaller than in GIF 2.
Additionally, spacing cells, decelerated by CSS-code, should be used to achieve a certain stretching distance. Images, which are lying relatively close to each other, can be combined into one picture. Additionally, links on the single pictures can be set with an image map2. Another possibility to combine images is to use CSS sprites3.

Optimize Photographs

Generally spoken, images should be stored with special web settings and the dimensions should be equal to the desired dimensions on the website. A special technique to reduce the filesize is blurring the background. The blur technique can be used for images, where some parts are not as important as others2.

Optimize Videos and Animations

Basic techniques are editing with special web settings, using special codecs, reducing the frame rate and using professional equipment. In the context of Flash animations, the pictures should be optimized with image processing programs before they are imported in Flash. Animations should have a reduced frame rate2.

Configure the Web Browser

Regarding the Web browser, large caches should be configured, the caches should not cleared during browser shutdown, browsers supporting GZIP compression as well as advertisement blockers to block advertisement images and Flash should be used.

You will find more detailed recommendations for Green Web Engineering on the GreenSoft Website.

  1. Dick, M., Naumann, S., and Held, A. 2010. Green Web Engineering. A Set of Principles to Support the Development and Operation of "Green" Websites and their Utilization during a Website’s Life Cycle. In WEBIST 2010 - Proceedings of the Sixth International Conference on Web Information Systems and Technologies, Volume 1, Valencia, Spain, April 07-10, 2010, J. Filipe and J. Cordeiro, Eds. 1. INSTICC Press, Setúbal, 48–55.
  2. King, A. B. 2008. Website optimization. Speed, search engine & conversion rate secrets. O'Reilly, Beijing.
  3. Souders, S. 2007. High performance web sites. Essential knowledge for frontend engineers ; [14 steps to faster-loading web sites]. O'Reilly, Beijing.