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:
- 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"
- 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.
- 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/ .
Comments on How to use browser caching to make your website load faster