Add Expires Headers for Specific Images - .htaccess

All of the expires headers articles I've looked at give more or less the following solution:
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
But it doesn't make sense to me because I know which of my images are going to change and which aren't, so I want to be able to add specific expiration dates to specific image files. How would I go about this?

You can use a FilesMatch, eg.
<FilesMatch "\.(js|css)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</FilesMatch>
Or for some specific files:
<FilesMatch "^(example.js|sample.css)$">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</FilesMatch>

Note that using ExpiresDefault for specific files will not work if you already used ExpiresByType. You need to use ExpiresByType again.
So this will NOT work (service-worker.js would still have +1 year expiry):
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
<FilesMatch "^(service-worker.js)$">
ExpiresDefault "access plus 0 seconds"
</FilesMatch>
</IfModule>
But this will work (service-worker.js will have +0 seconds expiry):
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
<FilesMatch "^(service-worker.js)$">
ExpiresByType application/javascript "access plus 0 seconds"
</FilesMatch>
</IfModule>
You might also use Header unset Expires. This would remove Expires header no matter what was set above it. You should also modify (or remove) Cache-Control header. It seems that mod_expires sets both.
<FilesMatch "^(service-worker.js)$">
Header unset Expires
Header set Cache-Control "max-age=0"
</FilesMatch>

Related

Add expires header for all files except specific files

I'm trying to add expires headers to all files except some specific files. In fact, I'm using a caching tool, that adds the following code to my htaccess:
# BEGIN LBCWpFastestCache
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$">
<IfModule mod_expires.c>
AddType application/font-woff2 .woff2
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/webp A2592000
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType image/svg+xml A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/font-woff2 A2592000
</IfModule>
<IfModule mod_headers.c>
Header set Expires "max-age=2592000, public"
Header unset ETag
Header set Connection keep-alive
FileETag None
</IfModule>
</FilesMatch>
# END LBCWpFastestCache
I want to make an exception for two different images on my page. Let their names be file-a and file-b, here is what I tried:
I put this code after the code from the plugin.
<FilesMatch "\.(file-a|file-b)$">
ExpiresDefault "access plus 1 hour"
</FilesMatch>
Since that didn't work, I also tried putting it before the code, which didn't work either.
Then I tried manipulating the FilesMatch part of the code added by the plugin, so that it excludes my files.
<FilesMatch "(?!.*/(file-a|file-b))(\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$)">
Didn't work either.
How do I achieve this?
It is not enough to assert the banned files names since the following capture group can sill match the allowed file extensions. You should be able to solve it using a tempered greedy token:
^((?!\/file-a|file-b).)*(\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$)
Demo
You can use a negative lookbehind regex search.
Check out this regex101 playground
<FilesMatch "(?<!file-a|file-b)(\.(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)?$)">

Upload new files when .htaccess cach is set to one week?

I need to upload a new version of a CSS-file, but nothing happens. Then I discovered that the cach of CSS files was set to one week in the .htaccess file one the Apache server like this:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 week"
ExpiresByType text/html "access 1 week"
ExpiresByType text/x-javascript "access 1 week"
ExpiresDefault "access 1 week"
</IfModule>
## EXPIRES CACHING ##
Is there a way to override this, so that the new CSS file can be used? I have tried to just remove this lines, but the old CSS files is still active on the site.
For Disabling cache you can use this piece of code in your htaccess file
# DISABLE CACHING
<IfModule mod_headers.c>
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</IfModule>
You will have more information over this link

expiration set but still showing as not set

I've been trying to speed out our site and using gtmertix.com to check.
I've been adding / removing code all day and have this in the htaccess file.
I have the following set in .htaccess -
# Leverage Browser Caching
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
<IfModule mod_headers.c>
<filesmatch "\.(ico|flv|jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=2678400, public"
</filesmatch>
<filesmatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, private, must-revalidate"
</filesmatch>
<filesmatch "\.(pdf)$">
Header set Cache-Control "max-age=86400, public"
</filesmatch>
<filesmatch "\.(js)$">
Header set Cache-Control "max-age=2678400, private"
</filesmatch>
</IfModule>
But i still get the following messages when i check on gtmetrix.com
http://cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css (expiration not specified)
http://downloads.mailchimp.com/js/goal.min.js (expiration not specified)
http://buttons-config.sharethis.com/js/58ac087b20428700112b0504.js (1 minute)
http://platform-api.sharethis.com/js/sharethis.js (10 minutes)
https://connect.facebook.net/en_US/fbevents.js (20 minutes)
https://connect.facebook.net/signals/config/247608415681348?v=2.7.10 (20 minutes)
https://google-analytics.com/analytics.js (2 hours)
What can i do to add expiration to the above ? or is it not possible ?

Leverage browser caching not working using htaccess

I am trying to add browser caching in my .htaccess to boost my google page speed score (currently at 86) however its not working. I have used 2 different types and both keep failing the google page speed results.
It was working on our old site (build on laravel php) however just not the new one which is just HTML/CSS/JS
I have used the following:
<filesMatch ".(css|jpg|png|svg|ico|js|php)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
and also
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/html "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/plain "access 1 month"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType application/pdf "access 1 year"
ExpiresByType application/x-shockwave-flash "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
and both keep failing. I have placed it at the very top.
I have looked at other responses from here before posting this and still couldn't get it to work. Any help will be greatly appreciated
Thanks
David
Try this syntax:
ExpiresByType image/* A31536000
And try adding backslashes and a question mark:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf|mp3|vtt|)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
Ok thanks for the reply
Will give it a go tomorrow when at work and will update - thanks again

How to specify a cache validator for PNG files in .htaccess?

I would like to cache all images and videos on the website for at least a month at user cache to speed up the loading process.
But the http://gtmetrix.com Speed Report gives me following error:
The following resources are missing a cache validator. Resources that
do not specify a cache validator cannot be refreshed efficiently.
Specify a Last-Modified or ETag header to enable cache validation for
the following resources:
// all *.png files currently on my page listed here //
Expiration times:
### CACHING ###
<IfModule mod_expires.c>
ExpiresActive on
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"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/rss+xml "access plus 1 hour"
# media: favicon, images, video, audio
ExpiresByType image/x-icon "access plus 1 month"
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 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 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
Cache control:
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpe?g|png|gif|swf|ogg)$">
Header set Cache-Control "max-age=2592000, public"
Header unset Last-Modified
Header unset ETag
FileETag None
</FilesMatch>
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(js)$">
Header set Cache-Control "max-age=604800, private"
</FilesMatch>
<FilesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=216000, public, must-revalidate"
</FilesMatch>
<FilesMatch "\.(x?html?|php)$">
Header set Cache-Control "max-age=1, private, must-revalidate"
</FilesMatch>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
</IfModule>
### / CACHING ###
What can I do to fix it?
BTW i found this: htaccess 'Header unset Last-Modified' caching issue but it looks like the guy doesn't have a problem with images
Given this warning:
Specify a Last-Modified or ETag header to enable cache
validation for the following resource
I suspect these lines in your config is the culprit:
Header unset Last-Modified
Header unset ETag
FileETag None
Your config is removing the header info used for cache validation.

Resources