Speed up your web site by automatically combining multiple module and theme CSS files into one large file using Drupal's CSS file aggregation feature. The single large CSS file is more efficient to send to a visitor's browser, speeding up the site. The large file also has white-space removed, making it a bit smaller and faster to send. This article shows how to enable the feature and it benchmarks the performance improvement.
Table of Contents
This article is part of the series on Essential steps to speed up a Drupal web site. Other articles in this series discuss enabling MySQL, PHP, and Drupal caching to optimize a site's theme and page layout.
How to enable Drupal CSS file aggregation
Drupal's CSS file aggregation is disabled by default. Enable it to reduce the total CSS file size and speed up page load times.
- Log in as your Drupal site’s administrator.
- Go to the Administer » Site configuration » Performance page.
- Check the Enabled checkbox for Aggregate and compress CSS files.
- Click the Save configuration button.
What does it do?
A site's theme and many of its modules each have CSS files to style content. These files take time to send to a visitor's browser, slowing down page loads. When enabled, Drupal's CSS file aggregation automatically combines all of these CSS files into one large file. As it combines them, it removes white-space (spaces, tabs, blank lines, and comments), making the data smaller. The smaller data is faster to send, speeding up the site.
The aggregated CSS file is automatically updated if you:
- Enable, disable, or update a module.
- Select a different theme.
The aggregated CSS file is not automatically updated if you:
- Edit a module’s CSS file.
- Edit a theme’s CSS file.
To see your changes while editing a module or theme CSS file, disable aggregation. Re-enable it when you're done.
How well does it work?
I benchmarked the effect of CSS file aggregation on a test web site (see the appendix for details on how I tested). The site uses the default Garland theme and a typical set of blocks on the left and right sides of the page.
Effect on total CSS file size
The table shows the number of CSS files, and their total size before and after enabling CSS file aggregation.
|Test case||# of files||Size|
CSS aggregation reduced the total CSS file size by 52% from the removal of unneeded spaces, carriage-returns, and comments.
The 18 separate CSS files used by this test site were reduced to just two files. One of these two is the aggregated CSS file. The other file is one added by the "Garland" theme by using a CSS "@import" statement, which bypasses Drupal's aggregation. If the web site had used a theme that never used "@import", there would have been just one CSS file after aggregation.
Effect on total CSS load time
I measured the time to load all of the site's CSS files while simulating two network bandwidths:
- 64 Kbps: Home and small businesses may elect to host their web site on a spare PC on a cable modem or DSL connection. While these connections are great for browsing web sites at home, they have fairly slow upload speeds for sending data back out to the Internet. Your web server's delivery speed is limited to the 64 Kbps (kilobits per second) typical of these types of connections (though they've been getting faster recently).
- 6 Mbps: Larger business sites served by IT departments, ISPs, or web hosting services use commercial Internet connections that are much faster than a cable modem or DSL connection. When served over a commercial connection, your server's delivery speed is now limited by the slower connections of your visitors. A typical cable modem or DSL connection is around 6 Mbps (megabits per second).
|Test case||Time (ms)|
|Test case||Time (ms)|
CSS aggregation improved CSS load times by 63-87%. The aggregated CSS file with white-space removed is faster to send to your site visitors.
As network bandwidth goes up, the time to send the data goes down, of course. But whether you're on a fast or slow network connection, there is always about the same amount of latency or delay time between asking for a file and receiving that file. On a slow connection, that latency is a minor factor compared to the slowness of the connection. But on a fast connection, latency becomes a dominant factor. The more files your web page needs from the server, the more file requests the browser must issue and the more time is spent waiting because of network latency. Since you can't make the network latency go away, your best fix is to reduce the number of files you need per page. This is the principal benefit of CSS file aggregation.
Effect on total page load time
|Test case||Time (ms)|
|Test case||Time (ms)|
CSS files can be a substantial part of the data your web server must send to every site visitor. Aggregating and optimizing CSS files, while leaving the rest of the site unchanged, reduced the page load time of this site by 41-72%.
When doesn't it work?There are a few rare quirks:
- If a CSS file uses a full path in a URL (e.g. “background-image: url(/a/b/image.jpg) no-repeat top left”), the URL will be improperly handled in the aggregated file and the image will not be found. Avoid this problem by moving the image into the same folder as the CSS file, then use a relative path (e.g. “background-image: url(image.jpg) no-repeat top left”).
- If a CSS file imports a second CSS file (e.g. “@import second.css”), only the import statement is added to the aggregated CSS file, not the entire second file. When the page is loaded, the browser will import the second file and the site will look fine. However, the second file doesn't benefit from white-space removal. Avoid this by putting all the CSS for a module or theme into one file; don’t use imports.
- If a module changes its CSS file from page to page, it must notify Drupal not to aggregate its CSS file. If it doesn't tell Drupal, the module’s CSS changing will break. This is a bug in the module, so check for a newer version with the bug fixed.
Drupal has a main style sheet. Each module may add its own style sheet. And your site's theme has one or more style sheets. For a complex site, these style sheets can be large. Combining them with Drupal's CSS file aggregation feature reduces their size and creates just one file to download, instead of many. This is such a clear win that every site should enable aggregation before it goes live.
File sizes and page download times were measured using the Charles proxy server to monitor a page loaded into Firefox on a Mac. Charles also provided bandwidth throttling to simulate connections at 64 Kbps and 6 Mbps. To discount variations in network and server load, the same page was loaded repeatedly until the standard deviation between the five best load times dropped below a threshold.
As with all benchmarking, your results will vary due to differences in web server CPU speed, memory size, and web site attributes, such as your choice of theme and modules. Use this article's results only as a rough guideline.