Recommendations for a Green Web for Developers

Support Caching on the Server Side

The caching capabilities of HTTP are designed to reduce the amount of HTTP requests and transferred data volume significantly. Content that is dynamically generated by scripts or programs on the server side is usually not treated to be cacheable and therefore not tagged with caching metadata by default.
However, there may be cases where dynamic content changes less frequently than once for each request. Therefore caching it may be possible without the risk of presenting obsolete data to visitors. In our opinion the following tasks are important:

  • retrieving presented content dynamically out of content repositories
  • presenting dynamically generated charts as images

Concerning the first point, well-engineered content management systems may be configured to use some kind of caching strategy and to support Expires and Last-Modified headers. Hence, we focus on websites or web applications that are not run via a Content Management System (CMS), but are implemented directly in scripts and programs. For instance, assuming a web based application that collects power meter readings of a family home, calculates its power consumption daily and presents it in charts on a website, the Last-Modified date can be set to the date and time where the last meter reading has been inserted into the database.
We recommend that web developers implement support for Expires and Last-Modified headers in their web programs and scripts whenever possible, to decrease the transferred data volume and thus power consumption. The following example code shows how this may be realized in principle, with the PHP scripting language. A more sophisticated example is given by Nottingham (2009).

header('Expires: ' . toGMT($expires));
header('Last-Modified: '.toGMT($lastMod));
if(!isModifiedSince($lastMod)) {
header('HTTP/1.1 304 Not Modified');
exit();
}
echo 'ANY CONTENT';

At first, the Expires header is set to a date that is acceptable for the given content type, to assume its freshness. The Last-Modified header is set with a value that indicates when the underlying content was modified last. After setting the headers, the Last-Modified-Since header of the HTTP request is compared against the Last-Modified date of the content. If the content of the browser cache is still valid, the HTTP Not-Modified status is sent. Otherwise the content is sent with an HTTP Ok status.

Minimize JavaScript

JavaScript is used widely on websites to enhance interactivity. JavaScript code fragments are often embedded directly in HTML or in specific JavaScript files. The former increases the response size, whereas the latter increases the amount of HTTP requests especially when more than one JavaScript file is used in a website. To minimize HTML content size we suggest externalizing any JavaScript code fragments embedded in HTML into special JavaScript files. On the one hand, this results in an extra HTTP request, but on the other hand it

  1. enables browsers to cache these files and to provide them in subsequent requests without calling the origin server
  2. reduces the HTML download size especially when the HTML content can not be cached because it must be recalculated for each request

If JavaScript code resides in dedicated files, we recommend defining distinct Expires header rules in web server configurations, so that these files expire further in the future than the HTML content files do (assuming that HTML content changes more frequent than the technical framework).
If more than one JavaScript file is used in a website, it may save some HTTP requests if these files are merged into one file. Despite increasing the JavaScript filesize, the number of transferred bytes is a little bit smaller, because only one HTTP request must be sent and probably revalidated when users are pressing the reload button in their web browser.
The JavaScript filesize can be significantly minimized by removing all unnecessary whitespace characters or comments. It can be further reduced by removing all functions, methods or code blocks that are not needed within a particular website. This is true for websites that use only a few functions or methods of huge JavaScript libraries.
Another technique is obfuscation. Most available tools first apply the minimization technique and than shrink the code by substituting variable, method or function identifiers and also method and function parameter names with shorter ones. Self defined API functions referenced within HTML code must remain untouched, of course.

Table 1: Minimization vs. obfuscation vs. compression.
prototype-1.6.0.3.js
Uncompressed (KB)
GZIP compressed (KB)
Total size 126.70 28.49
Minimized size JSMin 93.09 22.71
Obfuscated size Dojo ShrinkSafe 87.66 24.94

Table 1 compares the effectiveness of the minimization tool JSMin (http://javascript.crockford.com/) against that of the obfuscation tool ShrinkSafe (known from the popular Dojo Toolkit www.dojotoolkit.org) while minimizing the well known JavaScript library Prototype (http://www.prototypejs.org/). As one may notice, obfuscation is more effective than minimization in the case of special tools used here. This results from the fact that minimization does not substitute any function identifiers with shorter names as the default obfuscation configuration does. In contrast to GZIP compression the overall savings of minimization or obfuscation are less effective (and in that special case of obfuscation even counterproductive, because there are fewer repetitions left in the JavaScript code that may possibly lead to better compression results). Further comparisons with JavaScript libraries lead to similar results (Dojo Toolkit, script.aculo.us).
Against this background we recommend to minimize JavaScript with a tool like JSMin and to compress the HTTP response with GZIP to achieve lower data transfer volumes. We recommend using obfuscation in scenarios where compression can not be used (e.g. if HTTP clients are not fully compatible with compression algorithms).
Additionally, we recommend minimizing or obfuscating the files before they 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

Minimizing and optimizing CSS files offers many possibilities to reduce HTTP requests. Savings from 40% to 60% are possible, if HTML or JavaScript operation is implemented with CSS. Through a layout, which is designed with CSS (King 2008, p. 177), it is possible to save 25% to 50% of HTML filesize (King 2008, p. 180).

Table 2 shows the filesize of an exemplary CSS stylesheet after optimization and minimization with different strengths.

 

Table 2: Comparison of CSS filesizes after minimization.
Without minimization 2,812 Bytes
With standard minimization 2,181 Bytes
With high minimization 2,040 Bytes
With highest minimization 2,021 Bytes

These results were obtained with CSSTidy (http://csstidy.sourceforge.net/). This tool uses some techniques to optimize CSS code in different ways and strengths. In this case, the standard, high and highest minimizations were tested.

Standard minimization means that the compression goal is to reach a balance between size and readability. With this minimization, the file is 631 bytes smaller and the compression ratio is 22.4%. One technique the tool uses are abbreviations, for example with colour definitions. The long definition {color:#ffcc00;} can be written as {color:#fc0;}.
The second minimization is "higher"; the readability should be moderate and the size small. The example file was reduced with this compression by 27.5%. In addition to the other techniques unnecessary whitespaces, strings and blank lines are deleted. This may constrain the readability but reduce filesize.
The third minimization is the "highest". Its main goal is to achieve the smallest filesize. The readability is not considered. The compression ratio is the highest: 28.1%. In this case, additionally wordwraps are deleted. The whole code therefore is in one line.
There are further techniques, which optimize CSS. Examples are to replace inline styles with type selectors, to remove unnecessary code or to use descendant or contextual selectors instead of inline classes. CSS provides grouping multiple selectors with the same declaration and grouping multiple declarations with the same selector in one rule set. Duplicate element declarations can be avoided through the use of inheritance. Some separated property declarations can be combined in one single declaration. Margin, border, font, background, list-style and outline are special shorthand notations which combine separate single properties. Names of classes or IDs should be short or abbreviated. Long names are only important for developers, not for users. On the other hand, short names should be meaningful for developers in the context, too.
The CSS declarations should generally 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.

CSS can also be used to replace less efficient code. One example is the table definition in HTML, which can be replaced by CSS. Another point is the usage of embedded JavaScript, as 84.4% of web pages use it. These methods can often be replaced with more efficient CSS code. Examples are dropdown menus and the rollover effect (King 2008, p. 177).

Optimize Graphical Elements and Logos

54% of an average website is graphics (King 2008, p. 157). Because of this, optimizing images is a promising way to minimize HTTP responses.

A logo, unlike a picture is a graphical object, which symbolizes mostly a company or an organisation. The logo is normally included many times in a website. Thus, optimizing the logo can be more efficient than optimizing a picture, which is mostly shown once on a website.

Typically a logo is not a photograph or chart and in comparison to these smaller, so it can be saved as a GIF or PNG file. PNG has a better compression algorithm and especially flat-colour images are 10% to 30% smaller than in GIF (King 2008, p. 169)

There are some possibilities to optimize a logo. The most efficient ones are: changing the colour mode from RGB to an indexed palette, compressing, saving with special web settings and replacing graphical text with CSS formatted text.

The following example shows how a logo can be optimized. The logo consists of a graphical object, a background with colour gradient and graphical text (see Figure 1). The first step is to reduce the colours from RGB to an indexed palette. In this special case the colours can be reduced to six. Table 4 shows the filesize after optimization.

Table 3: Comparison of PNG filesizes after optimization.
Original logo with RGB colours 16,959 bytes
Logo with 16 colours 2,956 bytes
Logo with 6 colours 1,984 bytes
Logo with 4 colours without text 604 bytes
logo_rgb.png

Figure 1: Original logo with RGB colours.

The next step is the transformation from graphical text to CSS text. First, the graphical text will be deleted from the image. Afterwards, the text will be included in the image with CSS code, which defines a layer that has the logo as a background image. The dimensions are equal to the image dimensions. The CSS code for the example is as follows:

div.logo {
margin: 0;
width: 370px;
height: 64px;
padding: 10px 70px;
font: 700 21px "Arial Narrow","Arial",sans-serif;
color: #000;
background-image: url("logo.png");
background-repeat: no-repeat;
}

The final logo with CSS formatted text is shown in Figure 2. Looking at this example the filesize can be reduced from 16,959 bytes to 604 bytes (96% reduction).

Software Development Platform
Umwelt-Campus Birkenfeld

Figure 2: Final logo with 4 colours and CSS font.

Single-pixel, plain-coloured images, e.g. GIFs, are often used to achieve a certain stretching distance. These images can be replaced with CSS-code, where spacing cells have the same function as the images. This causes the layout to be the same, but through the usage of CSS the download of the images is not necessary anymore.

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-map (King 2008, p. 165). Another possibility to combine images is to use CSS sprites. Sprites can be very effective, if many small images like icons are on a website. The required part of the whole image will be shown with the background-position rule at the designated position on the website (Souders 2007).

Optimize Photographs

The filesize of a photograph is mostly greater than that of a logo. Consequently, there are more options to reduce the filesize.

reduce the filesize. 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 others (King 2008, p. 169).

ad-photo-normal-80.jpg

Figure 3: File with 100% quality (to increase download performance, we published here only the 80% quality version).

Figure 3 shows the image with 100% JPEG quality and no blur, the filesize is 126,246 bytes. After blurring the background with strength 8, the filesize is only 18,162 bytes; this image is shown in figure 4. It shows that the person in the foreground is in a satisfying quality whereas the less important background is blurred. But still, the main image information is conveyed.

ad-photo-blurred-80.jpg

Figure 4: File with 80% quality and blurred background.

Optimize Videos and Animations

Multimedia files like videos account for 98.6% of the transferred bytes in the Internet (King 2008, p. 159). Hence, minimizing multimedia files can reduce traffic. Basic techniques are editing with special web settings, using special codecs, reducing the frame rate and using professional equipment Other types of multimedia files are Flash animations. These can also be reduced and optimized.

Here, non-optimized images and too many animation frames are the problems. The pictures should be optimized with image processing programs before they are imported in Flash. Animations should have a reduced frame rate (King 2008, p. 170).

References

  • King, A., 2008. Website Optimization. 1st ed. Sebastopol: O’Reilly Media.
  • Nottingham, M., 2009. Caching Tutorial. [Online] Available at: www.mnot.net [Accessed 10 Oct. 2009].
  • Souders, S., 2007. High Performance Web Sites. Sebastopol: O’Reilly Media.

Acknowledgements

This text has been published by INSTICC Press:

  • Dick, Markus; Naumann, Stefan; Held, Alexandra: 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. Filipe, Joaquim; Cordeiro, José (eds.): WEBIST 2010 : Proceedings of the 6th International Conference on Web Information Systems and Technologies, April 7 - 10, 2010, Valencia, Spain, Volume 1. Setúbal: INSTICC Press, 2010, pp. 48 - 55.