Expires headers – in htaccess

  • Hi
    want to use the code below from html5-boilerplate github its mentioned by Chris Coyier on https://wordpress.tv/2012/08/26/chris-coyier-10-things-to-make-your-site-faster/ —– how could I add code to be able to update my site without content being frozen in cache 

    # ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------

# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".

<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 (thanks 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"

# Feed
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+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/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 application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-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 1 year"
  ExpiresByType application/javascript "access plus 1 year"

</IfModule>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Mark Shirley

    (@ravalde)

    Im going to add this to top the top of my child theme style.css
    and then change the version number when I update the style sheet. But im not sure what the number stands for.

    @import url('../twentyeleven/style.css?v=20090107');

    the last number is a string that is added by the PHP filemtime function, that adds a string to your filename everytime a change to your css file is made. So, by automatically giving your css file a new name you prevent the browser to use the old, cached version.

    You will have to add this function in your header.php file to make it work.
    Just replace:

    <link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” type=”text/css” />`

    with:

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />

    //edit: If you already see the version number in the css filename your theme most likely already does this. So no need to change anything and no need to manually add a version number.

    hope this helps

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Expires headers – in htaccess’ is closed to new replies.