How to leverage browser caching

How to leverage browser caching is one important part in search engine optimization. Normally, we configure an app so that web browser will caches files it downloads from your server to user device. When user has cached data, it reduces the server request time to load website significantly fast. It speeds ups to load all of the resources a page uses, such as images, scripts, stylesheets.

How Browser Caching Works

The web browser caching works by having the HTTP response include an additional header that tells browser date and time to remain stable for the mentioned time / duration.

For example, a response header such as:

Expires: Thu, 30 Oct 2022 12:00:00 GMT

It tells the browser to not request the file again until October 2022.

Risks of Browser Caching

Browser caching system have some downsides as well. If you change the content of a page, script, stylesheet, or image, any visitor who has recently been to your site may be using a cached version of previous visit on the next visit. Sometimes it causes shown the broken site even though site working properly.  So, user need to clear caching data to see the latest version or changed content. If you are user can use hard refresh button Ctrl + F5 on laptop or desktop.

How to Use Browser Caching

You must have basic knowledge of hosting or cpanel to use it. If you didn`t do correctly your website will be down. To activate caching you have to edit .htaccess file in website directory in cpanel. i.e. public html has .htaccess file where you can add these code to define expiration date of images i.e. png, jpg, jpeg, javascripts, stylesheet etc. you can use the code which is mentioned below exactly the same to avoid any error or server down problem. And your server should be apache to support this code.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"


  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"


  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>