Leverage Browser Caching to Speed Up your Blog - Make Money Online


Friday, 17 May 2019

Leverage Browser Caching to Speed Up your Blog

Chances are that you stumbled upon this page because you want to improve your blog’s loading speed. When a blog’s performance is analyzed using Google’s PageSpeed insights or GT Metrix, a suggestion often pops up. These tools suggest the webmaster to ‘leverage browser caching’.

Improve loading speed by leveraging browser caching!

Okay, it seems that your blog, right now is not leveraging browser caching. And you are not aware about how this stuff works or how to get it fixed. You know that getting it done will significantly improve your blog’s speed and performance. Wait, you’ll also see an increase in your blog’s PageSpeed and Y! Slow scores! What an awesome prospect that would be!

Here, I will tell you what ‘browser caching’ is all about and how it will improve your blog’s performance.

What exactly is browser caching?

To understand that, you must first know how a site/blog is loaded by a browser. Imagine that you are trying to access your favorite blog (I guess it is smartbloggingtips.com!). When you enter the url and press enter, the browser starts looking for the server hosting your blog.

Once it finds the server, the browser will start downloading each part of your blog. By ‘part’, I mean images, CSS files, JavaScript files, jQuery component, HTML files etc. So, for showing the complete blog/site, the browser has to look up repeatedly for the server and download these files! For this, the browser sends http requests to the server.

This process usually sucks, because it uses up CPU and server resources. Also this entire ‘looking out for server’ and ‘downloading each file’ requires much time. The larger the number/size of these files, the longer time the browser will take to display the blog!

So, as you can see, every time you click on a link within the blog, the browser re-download the same stuff again. This prospect sucks, because it makes a blog load terribly slow! This is when leveraging browser caching comes handy!

By leveraging browser caching, you are setting expiry time for various files of your blog. You may put expiry time for files like images, CSS files, HTML files, JS files etc. So, after a browser downloads these files once, it will get ‘saved’ in the browsers cache! It won’t be removed unless the expiry time you set is met or the user manually clears browser cache.

By keeping the files of your blog cached in the browser, you can save a lots of server look ups and http requests. When a visitor clicks on a link in your blog, the browser readily serves the static file like CSS file, HTML files etc from its cache. Thus the blog loads faster. Server resources won’t face strain! It is a win-win situation for both parties!

So, you must be wondering how to get this done. Brace yourself, the solution is on the way!

How to leverage browser caching?

# Solution for WordPress users

If you are using WordPress CMS (Content Management Service) for blogging, there is a plugin that’ll get this job done. This is the most trusted plugin to get this job done- W3 Total Cache.

This plugin has a built in feature to leverage browser caching. Install it, activate the feature and you’re good to go. If you don’t want to use this plugin , the next solution will help you out.

# Doing it through .htaccess file

This method is all about accessing your blog’s .htaccess file and inserting a few lines of code to it. Hey, don’t get worried, this really is a simple process. Just follow the instructions-

1 Open C Panel of your blog

2 Go to the File Manager icon and click it

3 Make sure that you open the root directory (and the ‘show hidden files’ button is clicked)

4 Find the .htaccess file in the depository

5 Edit it and paste the following code at the beginning of the file-
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “expiry time”
ExpiresByType image/jpeg “expiry time”
ExpiresByType image/gif “expiry time”
ExpiresByType image/png “expiry time”
ExpiresByType text/css “expiry time”
ExpiresByType text/html “expiry time”
ExpiresByType application/pdf “expiry time”
ExpiresByType text/x-javascript “expiry time”
ExpiresByType application/x-shockwave-flash “expiry time”
ExpiresByType image/x-icon “expiry time”
ExpiresDefault “expiry time”

NB: The ‘access time’ is the expiry time you have to decide. Replace that term with the time limit you want to put, like- 1 month, 1 year, 1 day etc.
Before doing this process, make sure that you backup the .htaccess file. I highly recommend this step.

6 After inserting the code, save and exit the file manager.
That’s it, you’ve just finished it! So, as I said before, leveraging browser caching is simple! And doing it has many advantages like- a fast loading speed, improved user friendliness, less server resource strain etc. I hope that you’ll get this job done successfully!

No comments:

Post a comment