Compressing without mod_deflate

So, what do you do when you hosting company won’t allow you to use Apache’s mod_deflate?

I wanted to use PHP’s “auto_prepend_file” and php_value directive in .htaccess to automatically prepend a file, but my server evidently doesn’t support “php_value” directives.

method I found here which ________

Here’s what I came up with.

The first step was to tell the PHP engine to compress all PHP files.

php.ini:
zlib.output_compression=on
# let the server decide which level to use
zlib.output_compression_level=-1

auto_prepend_file=

Now, I had to make my static files PHP files. That was fine, but then it was returning the Content-Type as “”.

styles.css.php:
<?php
header (“Content-Type: text/css”);
?>

combined.js.php:
<?php
header (“Content-Type: application/x-javascript”);
?>

.htaccess:
# Check to see if the browser accepts gzipped files
RewriteCond %{HTTP:ACCEPT-ENCODING} ^.*gzip.*$
# Now, see if that file appended with “.php” exists.
RewriteCond %{REQUEST_FILENAME}.php -f
# If so, point to that file. (Don’t allow files that start with “.”.)
RewriteRule ^([^.]+.+) /home/path/public_html/$1.php [L]

Comparison of 10 CSS Compressors

I decided to evaluate different CSS compressors to see which one was "the best". I really didn’t expect it to take a week to put this together. Along the way I discovered more ways of compression: some from the tools I evaluated and some I thought of along the way.

I began my research by taking the list of 10 compressors from Design Shack’s 18 CSS Compression Tools and Techniques article by Joshua Johnson. I replaced one with the tool I currently use, YUI compressor. YUI compressor is the only tool that can be downloaded and added to the build process. I also consulted the wonderful resource found at Lottery Post. The next step was to create a CSS file, feed it to each of the compressors and compared them. I was going to use the color name “ForestGreen” but because it wouldn’t pass CSS validation I used the CSS-compliant color name “fuchsia”. The original file has a size of 4.01KB. Keeping the CSS file simple was difficult. Compressors were thrown off I placed comments in strange places, but in the end I left those fringe cases out.

Compressors

Here are the compressors, listed alphabetically.

Compression Techniques

The compression techniques that I was looking for spanned from "simple and expected" to "difficult and potentially behavior-changing". Lottery Post does a good job explaining some advanced compression techniques and why they are dangerous. I decided to break up the compression techniques into categories.

  1. Safe
  2. Unconventional
  3. Dangerous

Safe

  1. Removes comments
  2. Removes whitespace
  3. Removes empty blocks
  4. Removes decimals
  5. Removes units from zero values&sup1
  6. Removes quotes from URIs
  7. Reduces margin, padding, border-width
  8. Compresses hex colors
  9. Compresses colors by hex or name, whichever is shorter
  10. Converts RGB to hex

The "safe" techniques I expected to see from most compressors, although some did surprise me. These should have no ill effects, such as removing quotes around URIs².

Unconventional

  1. Removes duplicate rules
  2. Removes overwritten rules
  3. Compresses font weight
  4. Changes color names to lowercase
  5. Changes color hex values to lowercase

These techniques shouldn’t affect the behavior of the page and were either not very common or I hadn’t seen them before — especially compressing the font weight. Only two compressors did this — CSS Compressor and CleanCSS. You might wonder why changing the colors to lowercase would help. Well, using lowercase letters helps when you GZIP your files³. In a simple test, using lowercase RBG hex values saved me two bytes after GZIP compression.

Dangerous

  1. Converts tag names to lowercase
  2. Combines styles for the same element
  3. Combines font styles
  4. Combines margins, paddings, borders
  5. Combines same styles from different elements

Techniques 2-5 match up to the ones Lottery Post won’t perform because of the possibility of changing the behavior. I often don’t use the "Cascading" part of "Cascading Style Sheets" so I don’t think it would affect any of my CSS. Again, changing the case where you can will help GZIP compression. Beware, though. This is safe for HTML, but not safe for XML4. In a simple test, changing "DIV" to "div" did save one byte after GZIP compression. (I know, "1 byte". But we’re talking about micro-optimizations.) Since none of the compressors changed the tags’ case, I didn’t include it in the summary table.

Commonalities

All compressors removed some comments and most whitespace. Most compressors tried to compress hex color values. But besides this, there were very little that all compressors shared.

Compressor Results

Arantius CSS Compressor

I wasn’t too impressed with the Arantius compressor. It removed spaces and single line comments, but not multi-line ones. The compressor removed all possible semicolons, minus the extra one in the “removesExtraSemicolons” class. Everything else was unchanged.
Output CSS – 1.95KB

CleanCSS

CleanCSS applied most techniques, but did miss 2 "safe" ones (removing the decimals and removing quotes around URLs) and one "dangerous" technique of combining font styles. Otherwise, it was one of the better compressors. It was one of only two that compressed the font-weight and was smart enough to remove overwritten and duplicate rules. It combined individual margins and paddings when all four sides were present and grouped classes with the same style. It tied for second place in smallest file size.
Output CSS – 1.51KB

CSS Compressor

CSS Compressor had some options and I tried to use the most aggresive ones. Here is the setup I used: "Highest" compression mode, checked "Remove last ;" and unchecked "Only safe optimisations"
This compressor was the best. It removed all possible spaces and semicolons. CSS compressor also compressed the font-weight and did a remarkable job of combining rules, even combining the “removesURLSingleQuotes” and “removesURLDoubleQuotes” which some other compressors missed. CSS Compressor had the smallest compressed file size.

Output CSS – 1.50KB

CSS Drive

CSS drive didn’t do a very good job. It did a mediocre job removing spaces. It didn’t remove any empty blocks or change RGB colors. It had the second to largest file size.
Output CSS – 1.94KB

CSS Optimiser

This compressor did an adequate job compressing styles. Some quirks though: it took my one class of "removesDuplicateRules" and declared it twice.
.removesDuplicateRules,.removesDuplicateRules{width:4%}

It removed zero value pixel units, but not percentages or ems. It did simple hex color compression, but didn’t touch the RGB colors. It was one of two that compressed my font styles into one font declaration. It tried to reduce the size of the margin classes, but because of the length of the class name, actually increased the size of the file. (“.combineIndividualMargins3” is larger than “margin-left:2px”.)

Output CSS – 1.57KB

Lottery Post

Lottery Post is a very good CSS compressor for what it says it will do. Except for removing decimals it used all the other "easy" techniques. It doesn’t try the "unconventional" or "dangerous" techniques and gives good reason not to. Lottery Post also boasts that it is the only compressor to fix a CSS bug in IE6 pertaining to ":first-line" and ":first-letter".
I was disappointed to see my decimal RGB colors incorrectly converted. "rgb(250, 150, 50)" should have changed to "#fa9632" but instead was "#FAFAFA". And both RGB percentages were converted to "#FFF" If those two issues were fixed I would confidentally call this one a very good "safe" compressor.
Output CSS – 1.75KB

PHP Insider

This compressor removed new lines, tabs and comments. And that’s it. It had the largest compressed file size.
Output CSS – 2.00KB

Pingates

The good: Pingates did a good job of removing spaces and combining styles. It removed duplicate and overwritten rules. It was one of only two to compress the font styles and the only one to change color values to lowercase.
The bad: RGB colors were incorrectly changed. URL quotes values were escaped instead of removed.
The ugly: It replaced my class name "removesAllWhiteSpace" to "removesAll#ffffffSpace".
Output CSS – 1.51KB

Seven-forty

A light compressor, it only tried the "easy" compression techniques and then, not real well. Whitespace was removed, but it didn’t remove trailing semicolons, something I’ve come to expect. It incorrectly changed my "background-color: rgb(255, 0, 0)" to "#ff00".
Output CSS – 1.86KB

YUI compressor

"Ah. Saving the best for last," I thought. I thought wrong. I was surprised when the YUI compressor didn’t even remove trailing semicolons! Yikes! Because it is open-source, you can download it and change what you want to. And because it is packaged as a jar file, it can be easily integrated into an Ant build process. But as far as removing bits, it lacked, settling only on trying the "safe" techniques.
Output CSS – 1.84KB

Conclusion

The conclusion I came to is no compressor does it all. And as for my development, I should probably look for something other than YUI compressor. I might have to develop my own compressor that I can plug into my build process.

Arantius CSS Compressor CleanCSS CSS Compressor CSS Drive CSS Optimizer/ Optimiser Lottery Post PHP Insider Pingates Seven- forty YUI compressor
Removes trailing semi-colons Yes Yes Yes Yes Yes Yes Some Yes No No
Removes empty blocks No Yes Yes No Yes Yes No Yes Some Yes
Removes decimals No No Yes No No Yes No No Yes Yes
Removes units on zero lengths/widths/size No Yes Yes No Only for "px" Yes No Yes Yes Yes
Removes quotes from url() values No No Yes No No Yes No Escapes them instead No No
Reduces the number of sides specified for margin, padding, and border-width No Yes Yes No No Yes No Not border-width No No
Compresses 6-digit hex colors to 3-digits No Yes Yes Yes Yes Yes No Yes Yes Yes
Reduces colors by color name or hex No Yes Yes No No Yes No No No No
Changes rgb() values No Yes Yes Yes No Yes No Yes Error Not %
Removes duplicate rules No Yes Yes No No No No Yes No No
Removes overwritten styles No Yes Yes No No No No Yes No No
Uses lowercase color names/hex values No Yes Yes No No No No Yes No No
Combines styles for the same element No Yes Yes No Yes No No Yes No No
Combines individual font styles No No No No Yes No No Yes No No
Combines individual margin, padding, or border styles No One case One case No Error No No Once case No No
Combines styles for multiple elements No Yes Yes No Yes No No Yes No No

References:

¹ "After a zero length, the unit identifier is optional." – http://www.w3.org/TR/CSS2/syndata.html#length-units

² "The format of a URI value is ‘url(‘ followed by optional white space followed by an optional single quote (‘) or double quote (") character followed by the URI itself, followed by an optional single quote (‘) or double quote (") character followed by optional white space followed by ‘)’. The two quote characters must be the same." – http://www.w3.org/TR/CSS2/syndata.html#uri

³ http://www.julienlecomte.net/yuicompressor/CHANGELOG

4 "The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive." – http://www.w3.org/TR/CSS2/selector.html

Friday, January 29 at 7:09 PM: Updated table to reflect that Lottery Post’s compressor does remove decimals and therefore uses all “safe” compressions (including two I forgot!). Thanks to Todd for pointing that out.

Rounded Corners

One of my goals for my websites, including this one, is to look presentable both in print and on a handheld. Well, I found out today that this blog doesn’t look so hot in either mode. I also found out that my tool for rounding corners (a jQuery plugin) runs even when in print mode. So I’ve got to change my site to use CSS so the rounded corners don’t show up in print mode.

(If you hover over “CSS” you’ll see that I’m using the abbr tag. For a good article of abbr vs. acronym, read this.)