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
Related
I have website built on Codeigniter and on product page which has loads of images etc so I setup htaccess caching as following:
## EXPIRES 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>
## EXPIRES CACHING ##
<IfModule mod_deflate.c>
However issue is when customer go through the check out process and place order I am using codeigniter sess_destroy to destroy use session. However when I go back to product URL it shows there is items in cart. When I click to check out again. I have nothing in my cart which means codeigniter did destroy the session.
How to resolve this? Please help
I'm trying to get the browser caching right. I added this to my .htaccess file:
<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>
I'm having the typical problem though that when updating my site, which I do quite frequently, the site doesn't update for frequent visitors. I started using URL fingerprinting for my CSS files, which works well.
However, what can I do about HTML files?
Any best practice to not run into caching troubles when updating content on any pages? I would appreciate your help!
Generally, the correct strategy (and the one used by HTML5Boilerplate) is to disable caching for HTML files, by setting the Expires time to access plus 0 seconds.
I'm trying to optimise a WordPress site of mine - Type & Music based on reports I've been getting from GTmetrix. One of the things I'm being advised to do is add expires headers and leverage browser caching. I may be wrong, but I assume these are kind of the same thing?
Anyways, I've been looking at tutorials online such as How to Add Far Future Expires Headers to Your WordPress Site and How to Leverage Browser Caching in WordPress via .htaccess from Thomas Griffen Media, which all seem to be just a case of copy and paste (I am aware that the settings are specific to each site though, depending how how regularly you update/edit certain content and files) but these settings never seem to register at all when I retest the site.
Here are the contents of my .htaccess file:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month”
ExpiresByType image/jpeg "access 1 month”
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 week”
ExpiresByType text/css "access 1 week”
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 week"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
I have since installed the Quick Cache plugin too, but to the best of my knowledge that doesn't really conflict, especially since the settings in my htaccess file aren't registering in the first place.
Any help would be greatly appreciated as I've found nothing of help myself.
Here's what you need to add to your .htaccess file in order to get rid of this problem. This is the entire script for most type of files. Hope this helps.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "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 text/html "access plus 3 days"
ExpiresByType text/xml "access plus 1 seconds"
ExpiresByType text/plain "access plus 1 seconds"
ExpiresByType application/xml "access plus 1 seconds"
ExpiresByType application/rss+xml "access plus 1 seconds"
ExpiresByType application/json "access plus 1 seconds"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType image/x-ico "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/pdf "access plus 1 month"
<IfModule mod_headers.c>
Header unset ETag
Header unset Pragma
Header unset Last-Modified
Header append Cache-Control "public, no-transform, must-revalidate"
Header set Last-modified "Tue, 1 Oct 2014 10:10:10 GMT"
</IfModule>
</IfModule>
The problem has to do with missing Apache2 Modules on your LAMP server (specifically mod_headers and mod_expires). If you can get in via SSH, go there and access root through the following command:
sudo -i
Then paste in the following to enable Mod Headers:
sudo a2enmod headers
You will then see this message: To activate the new configuration, you need to run: service apache2 restart
Paste in the command below to restart:
service apache2 restart
Next, paste the command below to enable content caching:
sudo a2enmod expires
Restart again with what you see below and you will be good:
service apache2 restart
That's it. Everything hosted on your server should now be caching correctly. Note that if you're using a CDN, you will need to go there and specify a far future cache date as well. If you're using MaxCDN, you just navigate to Zones > Pull Zones > Settings > Cache Settings, then dictate 12 months.
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.
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>