Leverage browser caching

[Tom Dean]

Hi,

Google doesn't seem to be recognizing the code i have at the top of my .htaccess file for browser caching. Am I doing something wrong? Code below.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "access 60 minutes"
ExpiresByType CSS/slideshow.js "access 60 minutes"
ExpiresByType CSS/flexslider.css "access 60 minutes"
ExpiresByType CSS/main.css "access 60 minutes"
ExpiresByType images/front-title.png "access 60 minutes"
ExpiresByType js/jquery.flexslider-min.js "access 60 minutes"
ExpiresByType CSS/vertical-new.css  "access 60 minutes"
ExpiresByType images/Bamboo_Leaves_trans.png  "access 60 minutes"
ExpiresByType images/Karate_4.jpg "access 60 minutes"
ExpiresByType images/defense-first.jpg "access 60 minutes"
ExpiresByType images/facebook.png  "access 60 minutes"
ExpiresByType images/header2.jpg "access 60 minutes"
ExpiresByType images/leftborder-bg.jpg "access 60 minutes"
ExpiresByType images/logo_75.jpg "access 60 minutes"
ExpiresByType images/red-bg.jpg "access 60 minutes"
ExpiresByType images/roundedcornr_bl.jpg "access 60 minutes"
ExpiresByType images/roundedcornr_br.jpg "access 60 minutes"
ExpiresByType images/slideshow/empty.jpg "access 60 minutes"
ExpiresByType images/slideshow/slide-1.jpg "access 60 minutes"
ExpiresByType images/slideshow/slide-2.jpg "access 60 minutes"
ExpiresByType images/slideshow/slide-3.jpg "access 60 minutes"
ExpiresByType images/slideshow/slide-4.jpg  "access 60 minutes"
ExpiresByType images/top-roundcorner.jpg  "access 60 minutes"
ExpiresByType images/wmaflogo2.jpg "access 60 minutes"
ExpiresByType slider/slide-1.jpg "access 60 minutes"
ExpiresByType slider/slide-3.jpg "access 60 minutes"
ExpiresByType slider/slide-2.jpg "access 60 minutes"
ExpiresByType slider/slide-4.jpg "access 60 minutes"
ExpiresByType slider/slide-5.jpg "access 60 minutes"
ExpiresByType images/pages/adult-kids-judo-holliston.jpg "access 60 minutes"
ExpiresByType images/pages/cormiers-judo-individualize.jpg "access 60 minutes"
ExpiresByType images/pages/kids-jujitsu-cormiers.jpg "access 60 minutes"
ExpiresByType images/pages/kids-karate.jpg "access 60 minutes"
ExpiresByType images/pages/teen-adult-jujitsu-cormiers.jpg "access 60 minutes"
ExpiresByType images/pages/teenadult-karate-472.jpg "access 60 minutes"
ExpiresDefault "access 60 minutes"
</IfModule>
## EXPIRES CACHING ##

[Dave Mankoff]

Howdy Tom.

What is the URL of your site?

I see a few things in the code you posted that are wrong.

First, this line won't work:

ExpiresByType http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js "access 60 minutes"

You can't specify the expiration for a resource that you don't host yourself. That resource is already set to expire an hour in the future by Google.

Second, you are misusing the "ExpiresByType" directive: http://httpd.apache.org/docs/2.2/mod/mod_expires.html. You are specifying individual files instead of types. A type would be something like "text/html" or "image/png". It encompasses all files that match those types, instead of individual files. I know that its a little confusing, as the way that types are specified look a lot like file paths.

Some quick searching turned up this article which provides a decent example: http://www.simonwhatley.co.uk/how-to-set-an-expires-header-in-apache. I can't claim that it will work perfectly for you, but a little digging around should set you on the right path.

-dave mankoff

man...@google.com

[Thomas Hey'l]

Great answer, Dave! I was just typing my own when I luckily saw it in time.

@ Tom Dean:
Give this prototype a chance:

    # Set cache-control
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresDefault "access plus 2 days"
        ExpiresByType text/html "access plus 6 hours"
        ExpiresByType image/gif "access plus 3 months"
        ExpiresByType image/jpeg "access plus 3 months"
        ExpiresByType image/jpg "access plus 3 months"
        ExpiresByType image/png "access plus 3 months"
        ExpiresByType image/x-png "access plus 3 months"
        ExpiresByType text/css "access plus 8 days"
        ExpiresByType text/javascript "access plus 7 days"
        ExpiresByType application/x-javascript "access plus 7 days"
        ExpiresByType application/javascript "access plus 7 days"
        ExpiresByType image/x-icon "access plus 3 months"
    </IfModule>

Regards, Thomas

[Tom Dean]

Hi Dave,

I have gotten a lot of mixed signals on this. Thanks for your insight. Is there a way to do this and specify different time values to the files on the server using their file path? I just uploaded this .htaccess file and Google page speed still says I should fix this. :(

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On

ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
ExpiresByType application/javascript "now plus 1 months"
ExpiresByType application/x-javascript "now plus 1 months"
ExpiresByType text/javascript "now plus 1 months"
ExpiresByType text/css "now plus 1 months"
ExpiresDefault "access plus 1 days"

</IfModule>
## EXPIRES CACHING ##

http://cormierselfdefense.com/ is the website.

Thanks - Tom Dean

[Dave Mankoff]

Howdy Tom.

I can sympathize that this process can be confusing to people new to the area. Let's get this straightened out for you.

Looking at the response for one of your resources, I see the following relevant headers:

1. Cache-Control:
   max-age=3600, public
2. Expires:
   Fri, 25 Apr 2014 14:30:16 GMT
3. Last-Modified:
   Mon, 24 Mar 2014 13:23:05 GMT

The first thing to note is that your "Cache-Control" header conflicts with your "Expires" header - one specifies an hour (max-age=3600) and the other specifies a month (25 Apr). This is what PageSpeed is complaining about. Per PageSpeed's documentation (https://developers.google.com/speed/docs/insights/LeverageBrowserCaching): "It is important to specify one of Expires or Cache-Control max-age, and one of Last-Modified or ETag, for all cacheable resources. It is redundant to specify both Expires and Cache-Control: max-age, or to specify both Last-Modified and ETag."

At this moment, it is unclear to me where your Cache-Control header is coming from. Your Expires header appears correct. Is it possible that there is another part of the server configuration that is setting the Cache-Control? I see the following in Apache's documentation: "When the Expires header is already part of the response generated by the server, for example when generated by a CGI script or proxied from an origin server, this module does not change or add an Expires or Cache-Control header". That implies to me that maybe the Cache-Control header is coming from somewhere else and is being left untouched.

If you want to set cache headers on a per-file basis, it requires a little more work. You can specify custom headers using the "Header" directive. You can also limit where those headers apply by using one of "<Directory>", "<Files>" or "<Location>". "<Directory>" and "<Files>" is used to match files on your machine. "<Location>" is used to match individual URL's on your website. Often there is a 1:1 mapping between files and urls, but this is not always the case. Use whichever suits your needs best:

https://httpd.apache.org/docs/2.2/mod/core.html#directory

https://httpd.apache.org/docs/2.2/mod/core.html#files

https://httpd.apache.org/docs/2.2/mod/core.html#location

https://httpd.apache.org/docs/2.2/mod/mod_headers.html

<Files stylesheet.css>  # Matches all files that are called stylesheet.css

  Header set Cache-Control "max-age=290304000, public"

</Files>

<Location /css> # Matches all urls that start with /css, such as http://example.com/css/stylesheet.css

  Header set Cache-Control "max-age=290304000, public"

</Files>

I am not an Apache expert by any means, but please don't hesitate to ask further questions. Others on this mailing list may be able to help. You may also have luck asking for details on the Apache mailing lists: https://httpd.apache.org/userslist.html

-dave mankoff

man...@google.com

[Tom Dean]

Thanks Dave. I guess I'll contact my web host and see if they can help with this. I appreciate the time you took to answer.

Tom Dean

On Tuesday, March 25, 2014 4:09:20 PM UTC-4, Tom Dean wrote: