what is cache memory ?
A cache is the high speed temporary storage data. Let us give you a very straight forward example, we are aware of YouTube platform and its services. When watching videos on YouTube, request is sent to YouTube server and our browser starts buffering the video depending on internet plan we use. If the internet speed is slow, Video buffering takes time but what if we download the video to our hard disk ?As expected the video will play instantly without buffering because instead of sending request to server using browser, we can use our video player to play it from our local Hard disk. This can be considered a very straight forward example of caching.
what is a browser cache ?
Like the YouTube video example explained above, browser downloads the server resources at user’s computer when first time visiting any website. Next, when user visit the same website, the browser get resources locally instead of sending unnecessary server request.When a web browser loads any website, it sends multiple request to server for downloading images, CSS files, JS files and other resources as well.
Loading so many resources from server consume time & as expected website loads slow. Without cache enabled, Multiple times a browser loads the same website & still it has to download all the resources form server. This process repeats itself each time we refresh a website.
what is a leverage browser caching ?
“Leverage” browser caching means how browsers deal with their resources. Generally it means, we can specify how long the web browsers should keep images, JS & CSS files stored locally on our computer memory. This has been instructed by google webmaster to all browsers. Google recommend to enable leverage browser caching to increase the user experience and overall website performance.When browser caching is enabled browser start “remembering” all the website resources. The first time load of any website take longer time because browser has never stored its resources locally.
If you have ever used the google page speed insight tool, google strongly recommend to enable the leverage browser caching.
How to enable leverage browser caching ?
To enable browser caching you need to edit HTTP headers to set expiry for certain types of files.Login to your Cpanel account and find your .htaccess file which is located on root path of primary domain.
.htaccess is the Apache configuration file for adding and managing additional functionality on server.By default
.htaccess file is hidden but you can change settings from Cpanel. You can edit the .htaccess file with notepad or any basic text editor.Inside
.htaccess we will set our caching parameters to tell the browser what types of files to remember.The below code instruct the browsers , what to remember and how long it should remember. Setting a time duration for expiry is really very important because if you think your web-page is updated every week then you must set cache parameters not more than a week. This is because browser will update the cache resources. so setting a time period for cache expiry is indeed very important.
## 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 ##
Common caching issue explained by example
If we setExpiresByType image/jpg "access 1 year" for images, this means images will be cached for one year and if you update images on your website, returning visitors will see cached version of image.