CSS minification: an empirical study based on the July 1, 2011 HTTP Archive

One of the many common recommendations for accelerating the download of web pages is to minify JavaScript and CSS content. Among content optimization practices, minification is a safe bet: it never slows down a web page the way script combining sometimes does, and it never breaks on older browsers the way image inlining does. Back when I started Jitify, streaming minification was one of the first content optimizations I implemented.

Even though minification does no harm and is relatively easy to implement, it is worthwhile to ask a basic question: how much does it really help?

The HTTP Archive project provides some useful data with which to explore this question. The project periodically retrieves the home pages of a large number of public-facing websites (over 15,000 as of July, 2011) and records the HTTP requests and responses for all of the objects that a browser must fetch for each page. The project then publishes the details of all these HTTP transactions in a form suitable for loading into a MySQL database. From this database we can get the URLs of many tens of thousands of CSS and JavaScript files used by real-world websites.

Using the database from the HTTP Archive’s July 1, 2011 run, I conducted an experiment:

  1. Fetch, via HTTP, every CSS document listed in the archive. (The selection criteria used to obtain a list of CSS URLs from the archive’s Requests table were: status=200 and (resp_content_type="text/css" or resp_content_type like "text/css;%").)
  2. Upon retrieving each CSS document, use YUI Compressor to minify it, and record the pre- and post-minification sizes.
  3. Using “gzip -6,” compress the pre- and post-minified forms of the CSS document to measure the effects of minification in combination with compression.

A small number of URLs that resulted in unusable data, due to a problem in the fetch script’s handling of servers that returned gzipped content in response to requests without an Accept-Encoding. With these URLs excluded, 64,470 CSS URLs remained in the data set.

The 50th percentile benefit observed from applying minification was:

  • 17.9% reduction in the uncompressed CSS file size
  • 13.9% reduction in the compressed CSS file size

The following graphs show the distribution of minification benefit, from no benefit at the 0th percentile (corresponding to CSS files that were already minified) to a 100% reduction in download size at the other end of the scale (corresponding to CSS files that contained nothing but comments and/or whitespace).

Based on the data from this experiment, most websites could decrease their total CSS download size measurably by implementing CSS minification.

It is important to note, however, that CSS represents only a small fraction of the download time of a typical web page.  From the July 1, 2011 HTTP Archive trend report, CSS objects accounted for only 3.5% of the (uncompressed) weight of the average page surveyed. HTML and JavaScript were 4.6% and 16.9%, respectively, so reducing the size of those resources could yield a bigger win.  I plan to run follow-up experiments to measure the opportunity for HTML and JavaScript minification.

Leave a Reply