How do I Add Expires headers for CSS file with ?ver=4.1

Question

I'm optimizing my website with Gtmetrix and in Add Expires headers section it shows the below error-

There are 49 static components without a far-future expiration date.

css/front.css?ver=4.1

How do I Add Expires headers for CSS file with ?ver=4.1? I want to pass it to my .htaccess file.

Answer 1

I'm assuming you want one file to process different CSS based on different parameters.

I have a better answer, and as a benefit to this answer, you can have pretty urls instead of requiring a client browser to call actual CSS files.

I'm gonna assume a standard LAMP setup (Linux, Apache, MySQL, and PHP) is done on the remote computer. First, ask the server administrator to enable the Mod_rewrite module. Then create a new text file using windows notepad or similar, and type in the following contents:

RewriteEngine On
RewriteRule ^css/version/(.+)$ css.php?ver=$1 [L]

Save the file as .htaccess and then upload it to your css folder (or the folder where front.css is expected to go).

Next, create a new text file in notepad (yes, again.) and then type in the following:

<?php
error_reporting(7); //suppress most errors including undefined errors
$version=$_GET["ver"];
$tm=60*60*24*8; // 8 days in future.
header('Expires: '.gmdate('D, d M Y H:i:s',time() +$tm).' GMT',true);
header('Cache-control: max-age='.$tm,true);
header('Content-type: text/css',true);
switch ($version){
    case "4.1":
       ?>
       .style4point1body {background-color: blue;}
       .style4point1button {color: red;}
       .style4point1header {font-size: 200%;}
       <?php
    break;
    case "2.0":
       ?>
       .style2point0body {background-color: red;}
       .style2point0button {color: green;}
       .style2point0header {font-size: 300%;}
       <?php
    break;
    default:
       ?>
       .undefinedstylebody {background-color: black;}
       .undefinedstylebutton {color: yellow;}
       .undefinedstyleheader {font-size: 50%;}
       <?php
    break;
}
?>

Save it as css.php and put it in the same folder where you put the newly created .htaccess file.

Now you can access these urls (where ... is what you normally type in before css/front.css?ver=4.1):

...css/version/4.1
...css/version/2.0
...css/version/<anything you want>

Now this is where it gets interesting. If you access the first URL, the following code will load:

.style4point1body {background-color: blue;}
.style4point1button {color: red;}
.style4point1header {font-size: 200%;}

And if you access the second URL, the following code will load:

.style2point0body {background-color: red;}
.style2point0button {color: green;}
.style2point0header {font-size: 300%;}

And if you access the third URL or any other URL that starts with .../css/version/ then you'll get this code:

.undefinedstylebody {background-color: black;}
.undefinedstylebutton {color: yellow;}
.undefinedstyleheader {font-size: 50%;}

I made the code so the page expires 8 days later from the current time, but if you need to adjust the days, change the 8 in the line starting with $tm.

Answer 2

You should set your expires for all CSS content by mime type this way:

  ExpiresByType text/css "access plus 6 months"

You could also set the expires just for a single file:

<Files css/front.css>
    ExpiresActive on
    ExpiresDefault "access plus 6 months"
</Files>

That would take effect for that file whether or not there are URL parameters (?ver=4.1) on it or not. The logic behind this is that you want to cache the file indefinitely. If you make a change to your CSS file, you update the link to ?ver=4.2, forcing everyone to download the most recent version (which, in turn, will be cached indefinitely).