Force cache thru header for dynamic generated JS/CSS files not working for all browsers

Question

I have a lot of JS and CSS files for my site. In order to minimize connection requests from browsers, I join them in a single php file. I'm using header parameters to force the files to BE cached. Here is how I do for the JS case (CSS is exactly the same way):

<?php
ob_start("ob_gzhandler");
$expires= 60 * 60 * 24 * 14;
header('Pragma: public');
header('Cache-Control: max-age=' . $expires);
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expires) . ' GMT');
header('Content-type: text/javascript');
include('file1.js'); echo "\n\n\n";
include('file2.js'); echo "\n\n\n";
/* ... bla bla bla bla ... */
include('fileY.js'); echo "\n\n\n";
include('fileZ.js'); echo "\n\n\n";
ob_end_flush();
?>

This works just fine in Firefox. For the rest of the planet those files are not caching! Both of them are quite big, so I have an annoying half second white screen in order the other browsers to load them again and again for each page request.

I suppose this has something to do with header's Content-Length. I try 2-3 things but I couldn't make it work. Any suggestions?

Thank you in advance. Any help is appreciate.

Answer 1

It would be a great idea to join all those .js in a single file on deploy time of the project and serve that file like any other, configuring your webserver with a big expiration time.

If you have no deploy script, that's another story. Adding headers as "Last-Modified" or "ETag" is your best bet.

Also, I'd suggest to build the big file once, and only rebuild it when any of the js had changed.

Answer 2

Looks like the file is caching after all in all browsers.

The reason of the delay on loading is the time each browser need to parse the file in DOM. The JS file is quite large. Just Firefox does that faster or 'smarter', this way the user doesn't get the felling of an instant pause on loading of the page.

It was wrong imprecation of mine, the file is not cached.

Solution to avoid the wait... move all the JS requests before closed of .