How to set Browser caching and expires headers via .htacess - browser-cache

Ive got a centOS lamp server running a static html, css, js site. Google's page speed tool suggested i "Leverage browser caching" (as this may be a google seo ranking factor we want to implement it). Is this something that can be done via the .htaccess file of my site ?
Ive set this up in the past but only via a wordpress plugin so it was pretty much one click.


Try to add this to the top of your htaccess-file:
## 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 ##

Related

Apache Not Cacheing Images

# 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 application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
I am using the above code in my .htaccess, but Page Speed Insights, GtMetrix etc are still saying my images not being cached. I tried various different examples posted and nothing is working. My host saids the issue is outside their scope... Any tips or direction to go in to try and diagnose the issue?

Leverage Browser Caching js?ver=

I'm facing an odd problem with my Leverage Browser Caching. In my .htaccess I use the following:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
This successfully caches my website. But the issue I'm facing is it is missing out some non-external JS files:
http://example.com/wp-content/themes/tracks/js/build/production.min.js?ver=4.7.2 (2 days)
http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1 (2 days)
http://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 (2 days)
http://exmaple.com/wp-includes/js/wp-embed.min.js?ver=4.7.2 (2 days)
http://example.com/wp-includes/js/wp-emoji-release.min.js?ver=4.7.2 (2 days)
I tried to fix it by adding the following lines, but the result was still the same:
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/json “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
Any idea why it is not picking up the js?ver= and how to fix this problem? In case it helps:
Hosting: Hostinger
Server: Apache 2.4

OK, I managed to fix the issue. I was correct in using the following four lines:
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/json “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
However, the quotation marks around the access plus section are for some reason curly quotations. This was therefore returning 500 and 503 server errors. After replacing the quotation marks it has since fixed my issue and now correctly caches js?ver= files too.
My final Leverage Browser Caching code looks like this:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Leverage Browser caching working For css and javascript but not for images

In my website in htaccess I added
## 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/javascript "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES CACHING ##
After testing my site with
https://developers.google.com/speed/pagespeed/insights
It is showing Leverage browser caching is working for css and javascript but not for images (both jpeg and png)
Please tell me if there is any error in above htaccess

Do I have to reboot my server after updating the htaccess file

I made several changes to my htaccess file. Mostly to edit the expires values:
ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 7200 seconds"
When I run PageSpeed on my website, the changes are not taken into account.
Do I have to reboot my server for these changes to be applied ?

If you change .htaccess, not. If you do similar changes in the web server configuration then you need to reload apache. But beware that these headers might be cached so you might need to wait a bit before re-trying.

Specifing Expiration Date For Static File's Caches

When i test my website for SpeedTest i'm seeing a lot of expiration not specified error.You can see at this page .
I added this code to my .htaccess file
## 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 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 2 days"
</IfModule>
## EXPIRES CACHING ##
But nothing changed . Can you give an advice me, for can i specify expiration date for my static files ?
Server : Linux - Apache

i like the html5boilerplate way :
<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 (thx 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"
# rss feed
ExpiresByType application/rss+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/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 2 months"
ExpiresByType application/javascript "access plus 2 months"
ExpiresByType text/javascript "access plus 2 months"
<IfModule mod_headers.c>
Header append Cache-Control "public"
</IfModule>
</IfModule>
Hope this can be useful to you.
Source:
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

You can use mod_headers to do the trick:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>
Or you can use mod_expires:
ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

I see you have PHP installed (reference wordpress), so we'll try to diagnose your problem:
restart your apache web server. If you own the apache server (command line access), you can do it like such.
create a phpinfo page. This will allow you to view the apache modules installed. Check for the mod_expires.c module your looking to use (should be able to do a CTL-F (find) request in your browser for mod_expires). If you find it - GOOD! If not, you need to install mod_expires in your apache server. If you own your apache server, you can search on for how to install modules for your specific operating system. If not, you can check with your hosting provider on how to get this module installed. Once installed, proceed.
modify your http.conf entry to include "plus" in your expression
restart Apache again
Test =)

You just need to add:
ExpiresByType application/javascript "access plus 1 year"

Maybe you didn't load mod_expires, so the entire stanza is a no-op. Or, AllowOverride is None and your .htaccess file is not processed.