To use browser cache for your visitors all you need to take are a few simple steps. Install the best free plugin for this, the W3 Total Cache W3TC plugin.
It is an absolute demi-god when it comes to enabling cache.
If it isn’t obvious to you already, enabling browser cache has the immediate benefit of improving website load times.
But before you begin to leverage browser caching check your site speed. Here’s how to do that.
Go to gtmetrix, a free website and key in your site to see the load times yourself.
What happens when someone tries to access your site on their browsers?
A few things:
When a person accesses a certain domain, there are multiple processes happening in the background. Everything that composes your WordPress website is transmitted to the user’s browser, making the site visible. These components of the website include content, images, stylesheets, scrips and more. They must be moved from the website’s server to the user’s browser whenever it is required. The steps behind this process are:
The vistor first types the url and enters the site
This generates a request to the server called an http request where your site is hosted.
The server generates a copy of your site and send it over to the browser. If the server sends everything at one, it would take a long time to load. Instead, people are smart and send it in small packets.
The data gets transmitted and a user is able to access the site.
The process is repeated for every page the user accesses across all pages on the domain.
What happens with the server is if there are way too many requests, the response slows to a crawl.
That’s where cache plugins work their magic.
The data that’s stored on the user’s browser is called web cache or the html cache. When a user visits the same website again, a bit of information is stored on their computer and specifically on their browsers. The browser when it is accessing the same site once again uploads the data directly fromthe browser.
That makes it easy to load.
To make sure if the cache is used properly, use Google page speed insights and run your website on the tool and see what happens.
-
Use w3 total cache
Next, install W3 total cache plugin.
Go to W3tc settings. You will find a box that says browser cache. Clicking on it enables the browser cache.
Step 2: Enable The Specific Cache Option
Once you do that it becomes active and will start storing your site’s visited pages on user browsers.
You will be able to enable cache functions as well.
To make the plugin do the work save your settings. Click on purge all cache to start the plugin.
2. Edit the .htaccess file to enable browser caching
Playing with the htaccess file may render your site unreachable by other users. So whatever yo do be careful with it.
If you’re not too sure you can even ask your host’s tech support guy to do it for you.
There’s a file in your host called the .htaccess. The file handles requests and directory folder requests.
To edit the .htaccess file and enable browser caching here’s what you must do.
Copy and paste this code at the top.
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType text/html “access 600 seconds”
ExpiresByType application/xhtml+xml “access 600 seconds”
ExpiresByType text/css “access 1 month”
ExpiresByType text/javascript “access 1 month”
ExpiresByType text/x-javascript “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 application/pdf “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
With this code all static files, css and javascript would be cached in the visitor browser for a long period.
If you’re unsure of editing the .htaccess files directly you could use a dedicated ht access plugin to do the job. I went to plugins>>add new>> and keyed in ht access to get a list of plugins that you edit the .ht access files directly.
In addition, you can also use the Yoast SEO plugin to access and edit .htacess files.
Editing the .htaccess file is very easy with either of these plugins. All you need to do is activate the plugin and copy paste the code.
3. Using Cache-Control Header In Nginx Server
If you’re hosting your website directly on vps, you must be using either Apache servers or the Nginx servers.
The problem with Nginx is that they don’t have .htaccess so running WordPress plugins is difficult. But, Nginx loads quickly. It’s an optimized server for your sites.
That’s why it’s not easy to edit it.
Here’s what you can do.
Find the server configuration or the root block and copy paste the code below.
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control “public, no-transform”;
}
And then copy/paste this:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}
Find the config file to enable browser caching this way.
By Using A CDN
With a CDN it’s pretty easy to enable browser caching. A cdn handles http requests quicker
Using a CDN directly means you’re going to lower the website speed.
You can manage the cache and browser requests as well.