Leverage browser caching using .htaccess

0
215
Leverage browser caching using .htaccess
Leverage browser caching using .htaccess

What is browser caching?

  • Browser caching used to store the webpage resource files like images on the local computer when a user visits a webpage.
  • “Leveraging browser caching” means when the webmaster instructs browsers to how their resources should be deal with websites.

When a user visit a website, the users’ web browser display your webpage which has to load several things like website logo, images, CSS file, JavaScript(JS) and other resources. These resources will be stored in the local browser storage automatically. When the user visits another sub page of the website the logo, CSS files, Java Scripts, etc., won’t load again. Reason the browser already remembers (saves) those details on the local browser storage.

This is why the first time of a new website load long time than other pages. When you setup your website to leverage browser caching, the website files will be stored on user’s local browser storage automatically; the website speed will be much faster than before.

When you enable browser caching, your website load performance will be improved and the number of visitors will be increase automatically. The website speed will be much faster for the repeated visitors since the resource files will be cached automatically.

Test your Website Leverage caching for free

Did you see any warnings/errors which indicate the leverage browser caching? Then here you can go for the solutions. Using the following method you can control your leverage browser caching using .htaccess file.

2 Simple methods to leverage browser caching:

  1. Change the request headers of website resources to use caching
  2. Optimize the caching strategy

We will explain these two steps below for your understanding.

Change the request headers of website resources to use caching:

The best way to enable leverage caching is to add the following code into a file named .htaccess on your website hosting provider.

To access the .htaccess file, login to your File Manager using your host provider or FTP clients like Filezilla(recommended), WinSCPCyberduck, etc., Once you log into your account, take a backup for your .htaccess file (Don’t forget since its really important). Copy the following code and add at the end of the file. To edit .htaccess file you can use any text editor like Notepad.

Important: The .htaccess file is controlling your whole website.  Do not Change anything if you really don't know what you're doing! This will leads to crash your website.

Leverage Browser caching for .htaccess

The code below tell to the browsers what to cache and how long to “store (remember)” it. This code must be added 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 ##

Once you finish this save this file and Check (refresh) your website.

Set different caching times for different file types:

In the above code, you can able to see some validity like “1 month” or “1 year”.  This means, the caching tells the browser to store the resources for given time period. In the above code, image files like JPEG, JPG, PNG, etc., stored for 1 year.

You can also change this validity by replacing “1year” to “1 month”. The above code is well optimized and we strongly recommend for normal websites.

Alternate caching method for .htaccess

The above method is called “Expires” and it work with most of the websites using .htaccess file. This method will take care of the caching for most of the Website beginners.

Once you very comfort with your website, you may want to control your cache. This is an another method which provides more convenient options.

There is an another possibility of the “EXPIRES” method is wont work with some hosting providers. In this case you should control your cache manually by the following

Cache-Control

Cache control help us to have more control of our website browser caching and its very easy to setup using the .htaccess file.

Add the code .htaccess file:

# 1 Month for most static assets

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

Header set Cache-Control "max-age=2593000, public"

</filesMatch>

This code is helping us to setup a cache control header depending on file types. To check the difference, refresh your website and try.

How actually cache-control works

Here I have explained each line-by-line how the cache-control code is working.

# 1 Month for most static assets

This line is just a note(in other words a comment). It won’t do anything; It just help us to have a note what exactly we are doing. This will be very useful for another user or in future reference. Actually .htaccess file ignores the lines which starting with the symbol (character) “#”. This is much recommended since you will use many different sets of caching solutions for your website in future.

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">

This line tells the user browser, “if the file is match with any of the listed file types, then we will execute something”.

The major part of this line is to check there are different types of files listed like CSS, JS, JPEG, PNG, JPG, etc., and the caching instructions will be applied to those file types. For example, if the website owner doesn’t want to cache PNG images, just remove the “PNG” line from the code.

Header set Cache-Control "max-age=2592000, public"

This line is very important where the actual headers are inserted and the values given to the browser caching

  • “Header set Cache-Control” part is setting a header.
  • The “max-age=2593000” part is tells the browser, how long it should be cached (using seconds). Here we are caching for one month which is equals to “2593000” seconds.
  • The “public” section is tells the browser, this is a public section which is allowed to use anyone (which is good if you want it to be cached).
</filesMatch>

This section is used to close the statement and which tells to the .htaccess file that the end of the block of code.

Common caching issue

Assume that you are trying to cache html and some image formats for one year or one month (or some long period of time), most important thing you could remember is “if you did any changes to your pages they may not be visible to all users.” Why because is the user’s browser cached files will be stored in the local browser storage. This can be avoided using automatic clear browser cache.

If you are updating a file very often, you can use URL fingerprinting.

URL fingerprinting

Renaming the particular file when we do updates will avoid this issue. For example, if we have a CSS file called “example.css”, rename this to “example1.css” on the new update.

Caching methods

It is very important to mention one of the caching type on .htaccess file that is “EXPIRES” or “ Cache control max age”. Also “Last modified” or “ETag” for all resources which we want to cache. It is very required to specify both “EXPIRES” & “Cache-control: max-age”, or mention both “Last Modified” & “ETag”.

Please don’t forget to write us, if you have any questions.

LEAVE A REPLY

Please enter your comment!
Please enter your name here