Browser Caching for WordPress

Categories SEO, WordPress
Browser Caching for WordPress

With Browser Caching you can store files of your website on local computers. Once a client visits your website files like CSS, Images, scripts and HTML files will be stored in the cache of his webbrowser. The next time he visitis your website, his browser does not have to download the stored files a second time. In result your website loads faster.

How does Browser Caching work?

Websites consist of many files. There are CSS-Stylesheets, HTML-files, JavaScript-files and images. Theese files usually do not change very often. Once you created the design of your website, I guess you will not change that design every month. The same Counts wth Images , JavaScript and HTML. Once created you do not change them frequently.

This means, every time a user loads you website, his browser downloads the same files again and again. Wouldn‘t it be great if you could store the files you do not change frequently on the Computer of your users? This would result in less bytes to download for the client and in result your website gets loaded faster. This is exactly what Browser Caching does. It stores files on your clients‘ browser. When you consider that the Bunde Rate increases dramatically each second your website loads, then Browser Caching is a must have for you.

How to leverage Browser Caching?

There are two ways to set u Browser Caching for your website. Expires and Cache-Control. In both cases you make some entries in your .htaccess-file. With this file you can set Options and functions for your Apache-webserver. The following Code example gives you a short insight of Expires:

ExpiresActive On

ExpiresByType text/css “access plus 1 month”

ExpiresByType text/javascript “access plus 1 month”

ExpiresByType text/html “access plus 1 month”

As you can see, you easily select the file type and you set the time, how Long the files will be stored on the client’s computer. In the examle above, CSS-files will be stored fr one month on the Computer. You can choose between years, months, days and hours.

The Code for Cache-Control looks a bit different:

# 1 Month for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public”

Cache-Control does basically the same as Expires. The Syntax is different and you put the time in seconds. Since in some cases Expires works better and in other cases Cache-Control works better I recommend you to put both Options in your .htaccess-file.

How to use Browser Caching in WordPress?

The easiest and most secure way to set up Browser Caching in WordPress is to use a Plugin. The .htaccess-file is extremly sensitive. One small mistake and the Server will not load your website anymore. Since you are not farmiliar with the work on .htacess, I recommend you to not set up Browser Caching manually. Better use a WordPress Plugin.

I recommend the the Plugin Browser Caching with .htaccess. It does exactly what i describe in this article. You can set up Browser Caching with Expires and even check your .htaccess-file in case you are not sure if you already use Browser Caching.

Browser Caching for WordPress
4.5 (90%) 2 votes

Leave a Reply

Your email address will not be published. Required fields are marked *