How to use browser caching to make your website load faster
By
11 July 2019 (Edited 12 July 2019)

Shorter page loading times provide the user with a better experience of your website and make Google happy

Subscribe to my blog

Share This Article


Source: David|11 July 2019

If you've ever run the Google Test My Site tool or any other tool that looks at page loading time, among the results you may have received a cryptic recommendation similar to this:

Here's a plain-English explanation of what that means:

Unless somehow prevented from doing so, each time a browser loads a web page it fetches from your server all the necessary HTML text, CSS stylesheets, image files, JavaScript, etc. Some of these files can be quite large, and accordingly take a long time to download. That creates a delay before the user is able to see your page.

If the user has never before visited your site, there's nothing you can do about that.

But when a user has visited your site previously, unless that user's browser is set to "reload every time" - unusual - some of the files used in your page will be cached in the user's browser. That's true even if the user hasn't before visited this specific page, as some of your files - think logo, header graphic, tagline text, some JavaScripts - are common to some or many of your pages.

If the user's browser can use these cached files when rendering your page instead of having to fetch them from the server, the page will load faster, providing the user with a better experience of your website (and making Google happy).

So, how can you enable browser caching? You do it by editing your HTTP headers to set expiration dates for various files, based on how often you generally change each type of file.

At this point, it's important to note: certain preconditions are needed in order to be able to do what I'm going to describe below:

  • Your site must use Apache server software. (If your site is using Microsoft IIS, see the link at the bottom of this page to an article that shows how to do browser caching on that server.)
  • You need FTP access to your site, and FTP client software. FileZilla is a good, free one for Windows. Be sure to get a version that works with your computer's operating system.
  • To edit one of your server files you need a simple HTML editor. Notepad++ is a free one for Windows.

To begin:

  • Set up your FTP client so you can see the files on your server.
  • Find in the root of your domain - where your home page resides on the server, like mydomain.com/index.html etc. - the file named .htaccess. You may have to activate a setting in your FTP client to "show hidden files."
  • Download .htaccess to your local computer.
  • Open .htaccess in your HTML editor. It might look like this (below) or be more complicated. Doesn't matter.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^mydomain.com
RewriteRule (.*) http://www.mydomain.com/$1 [R=301,L]

  • Add to your .htaccess file lines of text similar to those below:

# BEGIN expire headers
<ifModule mod_expires.c>
ExpiresActive On
# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifmodule>
# END expire headers

  • Here's what that code does:
    • Lines beginning with # are comments - you can put any text here.
    • The active expiration codes must be between the <if></if> lines of code. Copy those 2 lines exactly.
    • In this example, expiration dates are set 2 different ways:
      1. text/html is set to expire after 604800 seconds which is one week. This does the same thing as would ExpiresByType text/html "access plus 1 week"
      2. ExpiresByType image/jpeg "access plus 1 year" tells the user's browser to use cached jpg images for one year after first seen, then download a new version from the server.
      3. Other types of files get the same treatment, with expiry dates set according to how often you expect to update them.
  • When done, save .htaccess as .htaccess, the leading period is essential. That's an HTML file - It won't work on the server if saved as a text file "htaccess.txt" or similar.
  • Re-upload .htaccess to the root of your server by FTP.
  • Check site in browser to confirm nothing is broken.

Now, to confirm that what you did worked correctly, go to https://www.giftofspeed.com/leverage-browser-caching/ and run their Browser Caching Test on your site.

You should get back lists of Cached and NonCached files similar to this (partial output shown in screencap):

As you can see, that screen shows the length of time for which each file will be drawn from browser cache instead of from the server.

Rerunning Google Test My Site or whatever speed test you ran earlier should now indicate that your pages load faster, and that uncached files are no longer a problem.

Regarding Microsoft IIS server as mentioned earlier: we use Apache server exclusively, so I'm unable to give you first-hand advice on browser caching for Microsoft IIS. But there's what looks like a pretty good article on that subject at www.srapsware.com/how-to/l...g-for-windows-servers-iis/ .


If you found this article helpful and would like to see more like it, please share it via the Share This Article link at the top of the page.

And if you have questions or comments, you can easily send them to me with the Quick Reply form, below.


David Boggs    - David
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
Subscribe to my blog

   
Rating
4/5 based on 1 votes.
Show Individual Votes
Tags , , , , ,
Related Listings
External Article: 


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article