Browser caching. You’ve heard of it, you guess it’s important, but you’re not entirely sure what it is or what to do with it.

You may have spotted the phrase "browser caching" while poking around your web host or during your many hours scrolling through tutorials on how to speed up your website. It’s also the first thing tech support mentions to you when you’re complaining about a website not looking right.

So what is this mysterious concept? How does it benefit you and why should website owners leverage it? All your burning questions will be answered right here.

What’s browser caching?

Imagine two guys sitting in a library with their laptops. They both want to watch a movie, so the first guy (we’ll call him Boris) decides to download it, while the second guy (Carl) streams it.

The next day, both guys want to watch that same movie again. Boris, already having it downloaded on his laptop, simply opens it up and begins to watch. But Carl has to go online and stream it all over again. While Boris is already past the opening credits, Carl is still waiting for his slow internet connection to buffer the movie. Poor Carl.

If you replace the "movie" with a website, then Boris would be the guy using browser caching. Caching is what happens when parts of a recently visited website are temporarily stored in your computer. This makes the website quicker to load next time because it already has some of it.

Still with us? Good. Now let’s expand on that definition a little so you can really say you get it.

Browser caching is a technique that strikes as soon as you load a website. It sniffs around, checking for elements it can safely store away. These elements are things that won’t likely change anytime soon, like logos, banners, CSS, HTML, and JavaScript. They’re then smuggled into the browser’s cache (a file on your computer), so the next time you visit that same web page, those elements just pop right up instead of being slowly downloaded all over again.

Makes sense? If it’s still a bit hazy, keep reading, it’ll get clearer as you go.

What are the benefits of browser caching?

You’ve probably already gleaned the main benefit from the movie analogy. It’s the same as keeping a water bottle nearby so you don’t have to go to the tap for a drink every time you’re thirsty. Like bringing your library books to the table instead of walking over to the shelves to read.

See where we’re going with this? It’s all about saving time and getting what you want faster.

Thanks to this nifty technique, the next time you visit a website your browser will quickly pull up what you already have in your cache and then just download the new stuff.

To wrap this up, here’s a quick list of the benefits:
  • Browser caching allows web pages to load faster
  • It saves extra effort and bandwidth for both you and the server
  • It’s especially useful when you have a slow internet connection
  • It keeps most of us from throwing our computer out the window.

As a website owner, why is browser caching important?

That’s a fair question. We’ve already gone through why browser caching is important for essentially everyone who uses the internet. But why is it such a big deal for website owners?

Improved website speed As you know, web speed is an important element for success on the internet nowadays. Not only does Google consider web speed when ranking your website, but users hate waiting for websites to load and will leave after three seconds. Ouch.

Better user experience With faster websites, come happier visitors. If they have to wait for your logo to load every time they click on a new page, they’re going to get frustrated and exit. That’s bad news for your conversions, your SEO, and your bottom line. So make your users happy.

Friendlier for mobile users With 52% of online web traffic coming from mobile, it’s pretty important for your website to be mobile-friendly.
Browser caching helps to cut down on data usage, which we all know is the main worry for most mobile users. The less bandwidth your website uses, the longer they’ll stick around on it.

Any disadvantages to browser caching?

As with everything good in this world, there are always pitfalls you should be mindful of.

The fact that browser caching stores your website’s images and resources on people’s computers can be both good and bad. You already know about the good, so let’s skip straight to the ugly.

Let's say you just swapped out your logo. You proudly make your changes live, and then ask a friend how it looks on their side. Your friend seems confused, they’re seeing the same logo you had before. They send a screenshot to prove it too. What the heck?

You have caching to thank for that. Users will see what their browsers have already stored, so if you make a change on your website, they may not see it until they manually clear their cache or their cache expires. (We'll talk about expiring cache later.)

Worried? Don’t be, there are ways around this. Plus, if you have someone savvy managing your website then you can always rely on them to sort it all out for you.

How to leverage browser caching?

Ah, the big question. Now there’s a bit of tech stuff that needs to happen to properly leverage browser caching, but you can still leave here with a basic action plan or at least a good idea of what it’s all about.

The first move is to run your webpage through Google’s PageSpeed Insights. It'll likely show "leverage browser caching" in the recommendations with a list of files that you should set expiry dates for.

So what does it mean by "expiry dates" and how do you set them? Well, there's the manual way and the easy way. We'll show you both.

Set an expiry date for your website files

The point of setting expiry dates for your files is so that browser caches don't stay stuck with the old versions of your website's files forever.

For example, if you're going to change your website's background every month, then you'd set the expiry date to one month so your visitors will see the change 30 days from their last access. On the other hand, if you know you're rarely going to change your logo then you can go ahead and set its expiry date to a year (which is the longest recommended time).

To actually do this, you're going to need to get your fingers typing (or ask a developer).

Ready? Okay, here goes.
  1. First, head over to your web host (HostGator, Bluehost, etc.), your FileZilla, or whatever you’re using to manage your website's files.
  2. Dig around for a file called ".htaccess". It's typically in the "root" or the "www" folder.
  3. Hold it! Make a copy of it first, just in case. Now, open it in a text editor and paste the following at the top.
          ## EXPIRES CACHING ##
          
          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"
          
          ## EXPIRES CACHING ##
    
  4. Save the file and refresh your webpage. You’re done! That wasn’t too painful, right?
Note: If you look carefully, you'll see this code is just a list of file types (jpg, css, etc.) with an expiry period next to them (1 month, 1 year). Feel free to change these. If you think you want your gifs to expire sooner, you just have to switch "1 year" to "1 month." Nothing too scary.

Install a browser caching plugin

Now for the easiest way. If your website is running on WordPress, then you can use a plugin to help you define how your website's caching will work for all your online visitors.

But since we're so nice, we'll give you a list of the most popular browser caching plugins right here.

WP Super Cache: Here's a no-frills caching solution that's priced at the amazing value of free. It works well for mobile users and also supports Content Delivery Networks (CDN) -- if you’re into that.

WP Rocket: With this plugin you can kill two birds with one stone. It takes care of caching and also improves web speed through minifying code and lazy loading images. It's also very easy to use for the non-techies among us. Only downside is that it's not free. Can't have it all.

W3 Total Cache: This is one of the most popular kids. It takes care of web speed and has a page for every type of file you'd want to define your caching settings. It can look overwhelming at first, but you can always use the default options and call it a day. You won't get more customization than with this fellow right here. Oh, did we mention it's free?

Want help leveraging browser caching for your website?

It's okay, you don't have to do everything yourself. The important part is you now have a pretty good understanding of browser caching. You can also have smart conversations with a developer about it, and know what you're paying for if they offer to "leverage your website's browser caching".

But now that you've seen how browser caching can improve your website's speed, user experience, and conversions, your next step is likely to get someone tech-savvy and reliable to do it for you.

Not to brag, but we’re particularly great at both of those things (#ShamelessPromo). Shoot us a message here for a free consultation where we can chat all about you and your website problems.

Chat with us today!