Browser Caching and How to Leverage

Thursday, 05 January 2017

During a few recordings we found a recurring item in the speed tests: browser leverage caching. But what is this? Does it affect performance? What’s the issue with browser leverage caching not being set? How do I set it?

What is browser cache?

Every time your browser loads a website it downloads files needed to be shown and used. Like pictures, HTML, CSS and JavaScript files. Caching is when those files are stored in the browser for later use. So that when the same page is loaded again. It does not need to re-download those files. This helps reduce the number of requests made to the server and increase load time.

What does it mean to leverage Browser Caching?

In short, it is to use and to set a time limit on the cached items. Think of it as a parking lot sign: “60 minutes”. Your browser needs to be told how long it must keep cached pictures, JS files or CSS files. Unlike you and I who would leave the mall after a few hours- if the browser is not told otherwise, then it just keeps the items parked forever. The files that are cached are stored in the user’s browser forever… or until the user clears the browser’s cache.

Does Browser Caching affect performance?

Not on an initial visit, but has significant performance benefits for future visits. Keeping too many files could lead to excess memory storage. But it won’t affect load time. Well managed cache can greatly improve user experience. Having items cached for too long can lead to a browser not downloading your website’s newest update.

Why do speed tests pick it up?

If items are not cached then each time the page is loaded, the browser must download all the images and files again. Caching eliminates that when the site is revisited- therefore decreasing load time and render speed.

How do I set Browser Caching for my website?

It is rather simple. Siteground wrote a nice article which you can read here.

## 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 application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”

## EXPIRES CACHING ##

  1. Copy Code above
  2. Open your .htaccess file or see 2.1 if you need to make one.
    1. Creating a .htaccess file
      1. Create a text file named “htaccess.txt”Create a text file
      2. Save as “htaccess.htaccess”
      3. Set Save as Type to “All Files”
      4. Name it “htaccess.htaccess”Save file as htaccess.htaccess
      5. Save!
  3. Paste code from point (1) in your .htaccess file.
  4. FTP to your site (usually public_html or in subdomain directory) and copy your new .htaccess to the appropriate folder.FTP htaccess to site root directory
  5. And you are done! That simple.

Read more

iStock-532486881-768x576.jpg
Browser Caching and How to Leverage

During a few recordings we found...

Depositphotos_11629409_original-resized-768x512.jpg
What is shared web hosting? – Feature Article

There are four main types of web...

Depositphotos_67272849_original-resized-768x527.jpg
What is web hosting? – Feature Article

Web hosting can be described as ...

Depositphotos_125287930_original-resized-768x512.jpg
What is operating system hosting? – Feature Article

Firstly, an Operating System, or...

Top 5 hosts

 Logo

Feature Rating

 Logo

Feature Rating

 Logo

Feature Rating

 Logo

Feature Rating

 Logo

Feature Rating