Geek Answers Handbook

Css and javascript caching

I have problems with caching ...

Im using this php file with url rewriting to compress and cache css and js

I got the impression that if I changed / updated one of my files, the browser will work the updated file. But that doesn’t do it if I didn’t clear the cache or refresh the page.

Is my coding wrong? Or should the browser not receive updated content before the cache expires?

<?php $file = $_SERVER['DOCUMENT_ROOT'].'/'.$_GET['file']; $last_modified_time = filemtime($file); $etag = md5_file($file); $expires = 60*60*24*7; if(file_exists($file)) { if($_SERVER['HTTP_IF_NONE_MATCH'] != $etag) { header("Pragma: public"); header("Cache-Control: maxage=$expires, must-revalidate"); header('Expires: ' . gmdate('D, d MYH:i:s', time()+$expires) . ' GMT'); header("Last-Modified: ".gmdate("D, d MYH:i:s", $last_modified_time)." GMT"); header("Etag: \"{$etag}\""); if($_GET['type'] == 'js') header('Content-type: application/javascript'); if($_GET['type'] == 'css') header('Content-type: text/css'); if($_GET['type'] == 'ico') header('Content-type: image/x-icon'); ob_start("ob_gzhandler"); include($file); } else { header('HTTP/1.0 304 Not Modified'); } } else { header("HTTP/1.0 404 Not Found"); } ?>

rewrite the rules

 RewriteRule ^(.*).js$ /compress.php?file=$1.js&type=js [L,QSA] RewriteRule ^(.*).css$ /compress.php?file=$1.css&type=css [L,QSA] RewriteRule ^(.*).ico$ /compress.php?file=$1.ico&type=ico [L,QSA]

---------

EDIT: Maybe I should do it differently? what do large companies do for caching and how to get browsers to get updated content before the cache expires?

EDIT 2: Thank you guy for the help. Im working with cache in 1 hour

+4
source share
3 answers

The browser does not update the cached files until the specified Expires header expires. If it has expired, it will request a file with an If-None-Match header (I think).

But why didn’t you manage cache management through .htaccess ? You can check mod_expires :

 # Expires-Header ExpiresActive On ExpiresByType application/javascript "access plus 7 days" ExpiresByType text/css "access plus 7 days" # ETag FileETag All

Gzip compression also with mod_deflate :

 AddOutputFilterByType DEFLATE text/css application/javascript

Edit: "Large companies" do not use Expires or max-age headers, or they will set these headers so that cache files for ~ 1 hour → caching conflicts are minimized. You install it for 1 week.

+6
source

You missed this part, I believe ...

  $last_modified = filemtime($file); // Check for cached version if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) OR isset($_SERVER['HTTP_IF_NONE_MATCH'])) { // these part should do that... if ($_SERVER['HTTP_IF_MODIFIED_SINCE'] == gmdate('D, d MYH:i:s \G\M\T', $last_modified)) { header('HTTP/1.0 304 Not Modified'); return; } } header('Last-Modified : '.gmdate('D, d MYH:i:s \G\M\T', $last_modified)); header('Cache-Control : max-age='.$expires.', must-revalidate'); header('Expires : '.gmdate('D, d MYH:i:s \G\M\T', $last_modified + $expires)); // and so on...

btw, to help you determine, and much more, related to how the performance of your cache or, even better, your entire application, you can test it using the performance of the Google API or these sites: http: //www.webpagetest. org / (PS: for example, this is my last result for my working blog: http://www.webpagetest.org/result/110803_SB_17PVH/ )

+1
source

Yes, theoretically, the browser should pay attention to the information of Cache-Control , Expires , etc. that you send back, but in practice it is not always a good idea to trust the browser to do the right thing.

What you might want to consider is adding a second step to your compress.php script file ... if it redirects to the actual compressed file and adds something like "?ts=".$last_modified_time to the file path Thus, the URL will change when the file changes, and the browser will be much more believable and will make the most recent file. I used to use a similar technique.

0
source

More articles: