Minimizing load time for web pages

Validating CSS

It is easy to forget to check formatting guides in the form of CSS. However, detecting errors in these files is quick and easy with CSSTidy [28].

CSSTidy not only validates CSS code, it also analyzes and optimizes key terms in the code. The program uses RGB notation to translate things like colors from word form to the corresponding color code; for example, the word "white" is translated to #FFF.

Moreover, CSSTidy removes superfluous spaces, semicolons, and redundant assignments. The output shown in Listing 1 illustrates this with a sample invocation. Altogether, CSStidy reduces the size of the example by more than 25 percent.

$ csstidy style.css
Selectors: 24 | Properties: 100
Input size: 2.922KiB  Output size: 2.134KiB  \
Compression ratio: 26.97%
-----------------------------------
body {
background:#FFF;
color:#000;
font-size:medium;
}
img {
border:none;
}
[...]
3: Optimised color: Changed "white" to "#FFF"
4: Optimised color: Changed "black" to "#000"
20: Optimised color: Changed "#DD0000" to "#D00"
38: Optimised color: Changed "white" to "#FFF"
46: Optimised color: Changed "white" to "#FFF"
47: Optimised font-weight: Changed "normal" to "400"

Combination

Many websites distribute the format templates into different files, putting them back together later. As far as possible, you should collect these different files into one single file so that the browser need not open a new connection for each additional CSS file.

Be careful to reference the format templates in the heading section of the HTML file, because modern browsers try to load referenced files in parallel. The cache for the web browser takes on the role of buffering external files. The browser will only reload the files from the original source via an explicit reload.

You should also check whether the content of the web page becomes accessible to the reader even without a format template. It is possible that many readers will use the text browser you offer, but others may have deactivated CSS in their web browser or the format template may have gotten lost during transmission. You should likewise be careful that the web crawlers for the search engines are only interested in the contents of the web page and that CSS itself attracts little attention.