1

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.

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.

1

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).

  • Thank for your Answer Stephen :) Do I need to add each file with such format? I have around 49 files that includes both CSS and JS? – Anand Vaishnav Jan 16 '15 at 6:08
  • ExpiresByType will handle all of them in two statements: one for css and one for js – Stephen Ostermiller Jan 16 '15 at 10:37
  • this is correct. also check so/118884 for an in-depth discussion of how browsers are(not) specs compliant to caching uri parameters, and elaborate resource version control solutions – rogerovo Apr 16 '15 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.