Preventing the same CSS file to be downloaded over and over

Question

From what i've been noticing, if I have 1 CSS file and 10 web pages using this same CSS file, everytime I go to a new page, it redownloads the CSS file.

Is there anyway I could prevent this from happening? So if the client has downloaded it once, then don't bother to do it again?

Set up caching correctly on your web server. See this similar question: http://stackoverflow.com/questions/841209/why-isnt-my-javascript-css-caching — Merlyn Morgan-Graham, Dec 09 '11 at 11:34

score 1 · Accepted Answer · answered Dec 09 '11 at 11:34

1

It's already like this 'cause of the browser cache. Don't worry about that.

answered Dec 09 '11 at 11:34

lorenzo-s

16,603
15
54
86

I think the OP is saying that they've observed the file to be re-downloaded each time, which could happen if the settings were wrong on the server-side. – nnnnnn Dec 09 '11 at 11:38
Do you recommend a way to test this? What I did was have the same CSS file referenced in many pages, and changed the CSS file and when I went to a page it read in the changes which implied it downloaded the file. I assumed that it is downloading the CSS file everytime the page is loaded: how could I test for your theory? – D. Rattansingh Dec 11 '11 at 01:16
You can try it downloading Firebug for Firefox inspecting the "Net" panel to see requests. Or you can do the same using Chrome console (Ctrl+Shift+I). Google it if you cannot know how to use these tools. – lorenzo-s Dec 11 '11 at 10:50
Yes you're right. It's actually being retrieved from the cache --> checked it on chrome console. Thanks for the information – D. Rattansingh Dec 11 '11 at 16:05

score 0 · Answer 2 · answered Dec 09 '11 at 11:39

0

Add expires header to your css files, so browsers won't try to download newer version. Even if your css files are cached, your browser will send a request to the server if the file has been changed.

answered Dec 09 '11 at 11:39

wintercounter

7,500
6
32
46

score 0 · Answer 3 · answered Dec 09 '11 at 11:45

Threre are two ways 

1. use .htacess in that folder and set something like this  

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

2. Use PHP 

    function __read($files)
    {
        $data   = '';
        foreach ($files as $file)
        {
            $FileName   =WEBROOT . $file;
            if (file_exists($FileName))
            {
                $fileHandle = fopen($FileName, 'r');
                $data      .= "/*--#--".$file."--#--*/".fread($fileHandle, filesize($FileName));
                fclose($fileHandle);
            }
        }
        return $data;
    }

    $files[] = "css/frontend/registration.css";
    $files[] = "css/frontend/default.css";
    $data = $this->__read($files);

    // Tell the browser that we have a CSS file and send the data.
    if (isset($data))
    {
            header("Content-type: text/css");
            header("Cache-Control: public");
            header("Expires: " . gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT");        
            header("Etag: ".md5_file(__FILE__));
            echo $data;
    }

score 0 · Answer 4 · answered Dec 13 '11 at 22:29

Do you have access to the httpd.conf or .htaccess configuration files? (In case of an Apache server ofcourse)

If so, consider the following settings:

Header unset ETag
FileETag None
Header set Cache-Control "max-age=2678400"

The first two rules disable ETag's completely, so the browser is somewhat forced to listen to the Cache-Control header. The last rule tells the browser to cache the file 2678400 seconds, or 1 month. Tweak the settings to what suits you the most. And apply this configuration on your dir which contains the static files (by, for example, placing an .htaccess file in that dir)

Optional, if your using multiple servers to serve static content, and/or are not sure about the last-modified times those servers report, consider using:

Header unset Last-Modified

It tells Apache to not serve any Last-Modified headers, so browsers can only listen to the Cache-Control max-age header.

This settings are used by myself on lots of hightraffic websites, and disabling of ETag's and Last-Modified headers sure helped to drive traffic down to one fifth of what it used to be. Especially Internet Explorer is very sensitive to those settings.

Oh, and if you're not sure about your caching; use http://www.redbot.org/ to test your assets, it tells you quickly what your headers mean to a browser, and how to interpret different cache-control settings you use.

score -1 · Answer 5 · answered Dec 09 '11 at 11:40

I think you should use same domain for your css for example if you have 3 webpages:

http://example.com
http://example2.com
http://example3.com

so on every host you should use for example this css url:

<link href="http://static.example.com/css/style.css" rel="stylesheet" type="text/css" />

Then browser should cache this file and not download it everytime because url is always the same.

Preventing the same CSS file to be downloaded over and over

5 Answers5