What is browser caching and expires headers?


The point of using browser caching and expiry headers is to reduce the number of HTTP requests, which improves the performance for your returning visitors.

The first time someone visits your site, their browser will fetch all your images, css files, javascript files, etc. Normally that happens every time the same visitor comes back to your site.

With Expires headers you tell your website visitor‘s browser that the files you specify are not changing until after a certain time, for example a month.

This means that the browser doesn‘t have to to re-fetch images, css, javascript etc every time your visitor comes back to your site.


How To enable browser caching


Edit .htaccess and append
With same Expiry Date
<ifmodule mod_expires.c>
  <filesmatch "\.(jpg|gif|png|html|gif|js |css)$">
       ExpiresActive on
       ExpiresDefault "access plus 1 month"
   </filesmatch>
</ifmodule>

With different Expiry Date
<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"   # Expires header for your favicon
</IfModule>

Time option are: