CODEWITHSUNDEEP
htmlhttpcachingcache-control
German Latorre
German Latorre

Reputation: 11128

How can I make my HTML to be never cached, while caching all images, stylesheets, and other resources?

I have a site with a front page that is static HTML but whose content may vary from time to time. I want all browsers to update contents if changed since last page load. At the same time caching is great for images, stylesheets, javascript, and other resources.

Is Cache-Control header the right option? Would this Cache-Control header do the tricK?

Cache-Control: max-age=3600, must-revalidate

If not, which?

Upvotes: 0

Views: 262

Answers (3)

Jagtesh Chadha
Jagtesh Chadha

Reputation: 2672

Cache-Control: no-cache will work great if you don't want any part of the page to be cached.

But if you need to cache the page, except for a particular section, try using this alternative approach:

  1. Cache your entire page using Cache-Control: public, max-age=XYZ, where XYZ is the time in seconds.
  2. Load the not-to-be-cached section using Ajax.

Example code:

var loadSection = function(section) {
    $.ajax({
        url: '/section/' + section + '.html',
        cache: false
      }).done(function(html){
        $('#main-content').html(html);
        w.pageCache[section] = html;
      });
    }
};

For a live implementation, see http://jagteshchadha.com

Upvotes: 2

Doc Roms
Doc Roms

Reputation: 3308

why do you not use an .htaccess ?

with all Expires Header, you want to control all exipres files by type:

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5) 
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# rss feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

# media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# htc files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# css and javascript
  ExpiresByType text/css                  "access plus 2 months"
  ExpiresByType application/javascript    "access plus 2 months"
  ExpiresByType text/javascript           "access plus 2 months"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>

</IfModule>

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

For your css and javascript scripts you can use versions like:

<link rel="stylesheet" href="style.css?v=1.0.0" type="text/css" />

and with the next update you will change the version. You can do the same with .js scripts and also with images sources, if you really need it.

Upvotes: 0

Related Questions