htaccess leverage browser caching for images - .htaccess

I have this code on .htaccess file
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
# Media
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 image/x-icon "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"
# Codes
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 year"
# Webfonts
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType font/opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
But I am still having the error of "leverage browser caching" when I am trying to test my website speed!
When I tried to view the error details:-
Before using the code above, I had a lot of links!
Now I have only png,jpg,js files.
Hope you can help me.

You need to enable mod_expires.
With apache :
a2enmod expires
service apache2 restart

Related

Why is ExpiresDefault taking precedence over ExpiresByDefault

I am running an ElasticBeanstalk instance running apache.
I have the following file in .platform/httpd/conf.d which should set my cache policy.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 day"
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 text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/ico "access plus 1 year"
ExpiresByType text/html "access plus 1200 seconds"
ExpiresByType "text/javascript; charset=UTF-8" "access plus 1 month"
</IfModule>
It works, except all images are being set to 1 day (the default), rather than 1 year as specified by the ExpiresByType.
What have I got wrong?

How do I improve broswer caching

I added the following code to my .htaccess file to leverage browser caching for my website:
## 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 ##
In GTMETRIX it showed that the problem of the browser caching improved a little bit - it went from 0 to 56 in the results - it's in the pic below. But there are still some things that are causing the site to load slowly, should I add some specific code to it or should I use a different one? Or is there a way to resolve the specific issues that are left?
enter image description here

Is setting Expires Header in .htacess a terrible idea for a Woocommerce site?

I have added the following to my .htacces file in order to set the expiry time for the various files types. The speed impact on my woocommerce site has been huge - it's flying now. And everything seems to work.
But surely this is a bad idea as if all the script files, thumbnails etc are cached then things shouldn't work properly one editing the cart / returning customers etc?
It just seems too easy??
# Optimize cache-control
<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 Nov 2018 10:10:10 GMT"
</IfModule>
</IfModule>
Setting up all of the expires in htaccess can break the shopping cart functionality. When this happens, customers cannot remove products from the cart or update the cart because the cart will continue to show the old contents. However, you can set some of the expires. See my example below.
#Woocommerce friendly expires
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
#
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 text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
#
ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

How to leverage cache on static images only?

I've read that one needs to add the below code to leverage caching for static images. However, the images on our website change frequently and are dynamic (using asp.net). There are static ones but how do I indicate to only cache those static images?
The below code seems to cache all images.
<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"
</IfModule>
EDIT:::
Using another example, I would do like this:
<Directory /var/www/images/>
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
</IfModule>
</Directory>
Is this the correct way?

Leverage browser caching - updates not working

I am using Google page speed insights to improve the performance but no matter what I do I can't get the 'leverage browser caching' to disappear.
I have modified the htaccess file as described on several online articles and added every combination I can. In page insights it's complaining about CSS/PNG/JS/JPG files.
# Expires Caching Start #
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 2 day"
ExpiresByType text/html "access 2 day"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/x-javascript "access 1 month"
</IfModule>
# Expires Caching End #
You seem to be missing you plus in "access plus 1 month" in many lines.
Default should be your second line for readability
Here is part of the h5bp template:
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/css "access plus 1 year"
ExpiresByType text/html "access plus 0 seconds"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
...
https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
If you're using Apache, you might want to run these as this worked for me:
sudo a2enmod headers
sudo a2enmod expires
service apache2 restart
You also might want to try this code:
## 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 ##
Maybe try this:
# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Resources