I've been trying to get this to work for hours now. The browser is downloading the file every time even though the Expires header is set to a week from now. Also tried on Firefox, same result. How can I specify that this resource is still valid and there's no need to download it every time?
Here is the Chrome network log
Here is the Chrome headers for the javascript file.
Here is my .htaccess code. I have confirmed that mod_expire is enabled.
ExpiresActive On
<FilesMatch "\.(css|js|gif|png|jpg|jpeg)$">
ExpiresDefault "access plus 1 week"
Header append Cache-Control "public"
</FilesMatch>
Change httpd.conf
<IfModule mod_expires.c>
<FilesMatch "\.(jpe?g|png|gif|js|css)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
</FilesMatch>
</IfModule>
Set cache to 2 years
Header set Cache-Control "max-age=63072000, public"
Related
I want to cache all images for 1 month and it works great but the problem is when I try to exclude a subdirectory from caching.
So there are images on:
/ (base dir)
/IMG/
/IMG/folder/
IMG/BIG/
so all images need to be cached, but i want to make it to not cache images that are on IMG/BIG/ folder
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
</IfModule>
the above code works but when
i try this code to exclude /IMG/BIG then it doesn't work
<Directory "/IMG/BIG">
<FilesMatch "\.(jpg|png)$">
<IfModule mod_expires.c>
ExpiresActive Off
</IfModule>
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
</FilesMatch>
</Directory>
I want to fix this in the .htaccess that is in the root folder and not by adding another .htaccess inside /IMG/big folder
ExpiresByType image/jpg "access plus 1 month"
Aside: The correct mime-type for JPEG files is image/jpeg, not image/jpg, so the above probably isn't doing anything.
The <Directory> directive is not permitted in .htaccess - this should have resulted in a 500 Internal Server Error (the details of which would be in your server's error log).
The <IfModule> wrappers are not required, unless you intend to use the same config on multiple servers where mod_expires and/or mod_headers are not enabled (unlikely).
To target everything else except the /IMG/BIG subdirectory then you can use an <If> expression and check against the REQUEST_URI server variable with a negated regex (!~ operator). For example:
<If "%{REQUEST_URI} !~ m#^/IMG/BIG/#">
ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
</If>
To specifically override any headers for requests to /IMG/BIG/ then you could add an <Else> directive:
<Else>
<FilesMatch "\.(jpg|png)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
</Else>
Unless there are other file types in the /IMG/BIG/ directory that you might want cached then you could remove the <FilesMatch> container.
Ok, I checked a lot of websites about how to manage the browser's cache memory with a .htaccess file, but it is still very not clear to me.
I want to cache specific files for one month. For the rest, I want it to be refreshed every time. So I tried:
<IfModule mod_headers.c>
Header unset Cookie
Header unset Set-Cookie
Header unset Cache-Control
Header unset ETag
FileETag none
</IfModule>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "now"
<Files "/css/jquery-ui.css">
ExpiresDefault "access plus 1 month"
</Files>
<Files "/js/jquery-1.10.2.min.js">
ExpiresDefault "access plus 1 month"
</Files>
<Files "/js/jquery-ui.js">
ExpiresDefault "access plus 1 month"
</Files>
<Files "/js/analytics.js">
ExpiresDefault "access plus 1 month"
</Files>
<Files "/matheos/img/*">
ExpiresDefault "access plus 1 month"
</Files>
<Files "/img/*">
ExpiresDefault "access plus 1 month"
</Files>
</IfModule>
But it doesn't work exactly as expected...
The HTML is correctly not cached, but the specific files like jquery-ui.css, which should be cached for 1 month, are also not cached.
Anyway, does this .htaccess seem ok for you ?
Ok, got it ! To target a specific file, the correct syntax is :
# to not cache css except jquery-ui.css
ExpiresByType text/css "now"
<FilesMatch "jquery-ui\\.css$">
ExpiresByType text/css "access plus 1 month"
</FilesMatch>
This is the only way that worked for me, at least in the case of an ovh shared host. I also tried all possible combinations with ExpiresDefault but it didn't work...
I have used this before;
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "now plus 2 weeks"
// Lots omitted here
</IfModule>
And this;
<IfModule mod_headers.c>
<filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|JPG)$">
Header set Cache-Control "max-age=1209600"
</filesMatch>
// Lots omitted here
</IfModule>
I can set the expires on by content-type and I can set any header I wish by file extension.
But neither of these seem to let you set any header you want by content-type.
I want to set the cache-control header based on the content-type of the response - note that this is not the same as the file extension. I have "friendly URLs" so there is no file extension to be captured by filesMatch so there is no file extension but the content-type is text/html.
How can I set the cache-control header for specific content-types?
In 2.4, you can append expr= to the Header directive instead of env=. For example:
Header set Cache-Control "max-age=3600" "expr=%{CONTENT_TYPE} == 'text/html'"
In the default (non-early) mode, mod_headers runs as an output filter – so the content type is already set and available by the expression parser.
http://httpd.apache.org/docs/2.4/expr.html
I guess you will need to append or set the Cache-Control header first. Please try the snippet below and do not forget the "no-transform" param.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif "now plus 2 weeks"
// Lots omitted here
//This is the magic
<IfModule mod_headers.c>
Header append Cache-Control "public, no-transform"
</IfModule>
</IfModule>
If you want to make the cache content-type you can enter it in this way:
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html "access plus 15 days"
</IfModule>
I am working on one of the cakephp2 website speed improvement.
now i need to setup some header expire and cache stuff.
but in cakephp in which htaccess I have to put my code.
And please suggest any nice htaccess codes.
I have tried
#Expire Header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 2 hours"
</FilesMatch>
but its not working, also I have tried couple of other code but none of them working for me.Is there any key configuration that am missing?
One more thing if is there any other tricks to improve performance then please suggest me.
add folowing code to .htaccess file
# cache images/pdf docs for 10 days
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif)$">
Header set Cache-Control "max-age=864000, public, must-revalidate"
Header unset Last-Modified
</FilesMatch>
# cache html/htm/xml/txt diles for 2 days
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>
more information http://tutorialpedia.org/tutorials/Apache+enable+file+caching+with+htaccess.html
below following can add it to modify the .htaccess files in your app/webroot/.htacces folder with impunity.
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/x-javascript A8640000
ExpiresByType text/javascript A8640000
ExpiresByType text/css A8640000
ExpiresByType image/png A8640000
</IfModule>
or if you can also see in detail at cakephp.org
hope this will sure help you
I'm tyring to implement browser caching and follow Google PageSpeed's recommendation about setting Last-Modified to a data that is "sufficiently far enough in the past." I have the following in my .htaccess:
<IfModule mod_headers.c>
<FilesMatch "\.(json|pdf|swf|bmp|gif|jpeg|jpg|png|svg|tiff|ico|flv|js)$">
Header Set Last-Modified "Fri, 01 Jan 2010 12:00:00 GMT"
</FilesMatch>
</IfModule>
I have mod_headers installed on my server.
Unfortunately, Google PageSpeed still complains and warns me:
Leverage browser caching
The following cacheable resources have a short freshness lifetime. Specify an expiration at least one week in the future for the following resources:
And then lists PNGs, GIFs, JPGs, etc. Yahoo YSlow says basically the same thing.
Looking at the response headers of one of my resources that should be caching, I see this:
Date: Tue, 19 Oct 2010 20:12:04 GMT
Server: Apache/2.2.14 (Ubuntu)
Last-Modified: Tue, 07 Sep 2010 23:51:33 GMT
Etag: "2e0e34-2a43-48fb413a96a20"
Accept-Ranges: bytes
Content-Length: 10819
Content-Type: image/png
As you can see, the Last-Modified data does not match what I specified in .htaccess.
Any ideas what I am doing wrong?
Removing Last-Modified is not what Google PageSpeed is asking. It wants to see the following headers in your servers response when browsers asks for static files:
Cache-Control max-age=...
Expires ...
in place of dots the server will place values.
In order to do this, you simply need to add to .htaccess the following lines:
<IfModule mod_headers.c>
<FilesMatch "\.(json|pdf|swf|bmp|gif|jpeg|jpg|png|svg|tiff|ico|flv|js)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
Header append Cache-Control "public"
</FilesMatch>
</IfModule>
You'll see Google PageSpeed stopping to complain.
Have you considered just using unset Last-Modified?
Example:
<IfModule mod_headers.c>
<FilesMatch "\.(json|pdf|swf|bmp|gif|jpeg|jpg|png|svg|tiff|ico|flv|js)$">
Header unset Last-Modified
</FilesMatch>
</IfModule>
The FilesMatch section looks fine, so it's probably just some fiddly bit with Header Set. Hell, might even be case sensitive. Try Header set instead of Header Set
If this isn't what you want, then let me know and I'll think about it a bit more. Unset should work though,
This works:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
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"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>