A few months back, I presented a stunningly simple CSS minifier that enables you to pack your CSS while still maintaining format and readability. Soon after that, I presented a system called Lateral Cache that you could use to store the minified CSS and deliver it quickly.

Although the Lateral Cache system works well and is great for general purposes, the CSS minifier can be aided by a more intelligent caching system. Well, what do I mean by that? That’s what you are going to find out.

Please note that the demo link above directs you to Lateral Code’s own CSS file, where intelligent caching is used.

Re-caching for no reason? Say whaaat…?

Any general caching system normally allows you to provide a time interval to cache. This interval is used in a simple manner:

1. Store an initial cache of the data in a file.
2. Check if the time of the last cache is greater than the specified time interval.
3. If so, re-cache a new set of updated data and deliver it.
4. Otherwise, deliver the data in the cache
5. Repeat steps 2 – 4 indefinitely.

This system is a basic standard and has been used with much success. By re-caching at a specified interval, data will eventually be updated and the user won’t have to wait excessively after each request to the website. Essentially, if this system is used, a website will not have to check for new data at each user request; rather, it will check only after the specified time interval.

Note that the above works very well for data that is updated at a specific time interval. For example, if new data arrives every 30 minutes, a cache is ideal because it can be configured to update only when new information is available.

Returning back to the CSS minifier, it’s important to realize that the need for re-minifying only occurs when the original CSS file has been modified. Only under this circumstance will the cache have to be updated. In essence, keeping a cache with a specified interval such as one day will produce excessive re-caching that is not useful. On the flip side, if you were to use a very large cache interval, such as 30 days, updating the CSS file would be a pain, as you would have two main choices:

• Wait 30 days until the cache refreshes
• Change the code to temporarily stop caching

The first option is much worse than the second, but both are still a pain.

How can you check if a file is modified?

Now there’s the golden question you were all waiting for. If you know that the cache should only be updated when the original CSS file is modified, how would you adapt the code to meet this criterion? Luckily, the answer is simple due to magic filemtime PHP function, which can tell you the last time the file was modified.

The algorithm to accomplish the task now becomes quite trivial:

1. When caching, store both the last modified time and the minified CSS. This can be done by using two files or just one.
2. When checking what to deliver to the user, compare the stored time to the last modified time. If they are the same, return what is in the cache. Otherwise, re-cache and re-minify the CSS. Consequently, deliver the new data to the user.

Writing code using the algorithm

From the algorithm comes the following code:

header( "Content-type: text/css" );

// config --->
$dataFile = 'cache/styles'; // Make sure a cache directory exists
$timeFile = 'cache/styles-time';
$origFile = '/path/to/css/file'; // Change this
// < --- end config

$lastTime = -1;
if( file_exists( $timeFile ) )
	$lastTime = (int) file_get_contents( $timeFile );

$cache = false;
if( file_exists( $dataFile ) && file_exists( $origFile ) && $lastTime == filemtime( $origFile ) ) {
	$css = file_get_contents( $dataFile );
	$cache = true;
}
else {
	$css = file_get_contents( $origFile );
	$css = minify( $css );

	file_put_contents( $dataFile, $css );
	file_put_contents( $timeFile, filemtime( $origFile ) );
}

echo $css;

Remember to change $origFile to point to your CSS file and also ensure that a cache/ directory exists (you may change the name/placement of this directory by editing the $dataFile and $timeFile variables).

Note that the minify function used in the above code is present in the original article.

As a quick overview:

1. The configuration options set the location of the original CSS file. They also point to the data files for storing minified CSS and the last modified time.
2. The time file is loaded into a variable and compared with the filemtime of the original CSS file.
3. If the two differ, minification is applied and the data is re-cached. It is then delivered.
4. Otherwise, the cached file with minifed CSS is delivered.

Conclusion

So, with some simple analysis and one useful PHP function, caching can become much more intelligent for the CSS minifier.

Do you have any thoughts about the minifier? Do you know some way to make it better? It’s now your time to talk, so feel free to do so in a comment below!