How to Leverage Browser Caching Part 2

Last month, I talked about the importance of checking your site speed and the limitations many small-time bloggers can face with this metric. Generally, fewer team members and a less technical website mean a slower website.

Your goal as a blogger or site owner should be to lower your site speed to under 4 seconds. Anything above that and visitors are going to leave. You'll lose 10% of your traffic if it takes more than 2 seconds to load; nearly 30% if it takes more than 5.
f
There are many different ways to improve overall site speed, but browsing cache optimization has got to be one of the best. A few simple changes can make any website load faster for returning visitors, customers or subscribers.

You may be asking, “what is browser caching?”. Simply put, browsing caching involves storing various files used by your website on a visitor's computer whenever they arrive at your website. This isn't something that necessarily happens by default, which means there's a chance your visitors are having to load every resource file every time they visit your website. 

Wouldn't it be great if you could dictate if – and how long – your website's resource files remain in a visitor's cache? 

This is where leveraging your browser caching comes in handy. In a few simple steps, you can ensure that resource files are being stored whenever somebody visits your site for the first time. In addition to that, you can also specify which files are cached based on type and based on browsing situation. 

In order to leverage browser caching, you need to be familiar (and comfortable) with editing your .htaccess file and (optionally; for more advanced editing) understand the cache HTTP headers available for use. Other than that, it's a pretty straightforward process.

Enable Caching via .htaccess

The .htaccess file is a core component of your website. You should be able to locate this file in the root directory. In short, .htaccess is a config file that helps execute specific requests that wouldn't automatically occur on your server.

By using either a web-based file manager or FTP client, navigate to your website's root directory and locate the .htaccess file. If for some reason you're lacking a .htaccess file, see this tutorial for creating one. Download/access the file for editing. Be sure to make a copy of this file in case you make any mistakes and need to restore it.

What you'll be doing is adding some simple code to the .htaccess file in order to leverage browser caching. This is to be added at the top of the file. Here is an example of what you might add:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/[type] "access [time]"
ExpiresByType text/[type] "access [time]"
ExpiresByType application/[type] "access [time]"
ExpiresDefault "access [time]"
</IfModule>

## EXPIRES CACHING ##

The first three and last three lines should be added regardless. The “ExpiresByType” command is used to specify which exact file types you wish to cache, and for how long. In some cases, it makes sense to cache some files longer than others. The “[type]” and “[time]” variables should be completely replaced with the relevant variables (and without brackets). The “ExpiresDefault” is used for any files not explicitly included via “ExpiresByType”.

As an example, if I wanted to browser cache png files from my website for two months, then I'd add ExpiresByType image/png "access 2 months". In the case of PDFs, I might choose ExpiresByType application/pdf "access 1 year".
​
This is a great way to ensure that the more dynamic aspects of your website are regularly updated with each visit, while more static elements (logos, menus, etc) load quickly due to browser caching. The exact combination of resource files to store – and for how long – should be largely determined based on which elements of your website frequently change or not. 

     Credit to liquidweb.com

Other Browser Caching Options

In addition to the “Expires” method above, there are other ways to customise how your website is cached. Various HTTP header fields can be used to provide more generalised cache instruction. For instance, you can disable caching entirely with the “no-cache” header. You can also tweak caching so that it is only available for private, local usage or available on proxy servers.

Cache-Control is also an option for more experienced or tech-savvy users. It provides more flexibility in terms of what is stored, for how long and under what situations. Here is a list of some common Cache-Control headers.

If your current site speed is averaging a couple of seconds, then this simple change probably won't produce a huge shift for you. If your pages are taking several seconds to load, however, then this could be a life-saver. 

Related Posts

8 Guest Blogging Opportunities For Virtual Assistants
The Anatomy Of A Viral Guest Post
7 Ways To Add Personality To Your Writing 
Why Your Mindset Is In Control Of Your Marketing Results