Hosting Plugins WordPress

How to Enable Browser Caching in WordPress

How to Enable Browser Caching in WordPress

The speed of your website plays an important role in providing a good user experience. And Browser caching is one of the essential factors in improving the speed of a WordPress website or any website in general Slow site traffic can cause marketing disruption, conversion rates, and, over time, can have a profound effect on both customer satisfaction and the average number of visitors.

In a nutshell: Every little thing you can do to compress your loading times will be calculated. Below, we’ll cover browser caching, including what it is, what it means with WordPress, and how you can customize it on your site.

Let’s start…

What is Browser Caching?

safari browser caching

A website actually has many files that come together to create a series of web pages. Some of them will contain text (like the main body of a blog post), some will contain details of the page style elements (header, footer, sidebar, etc.), some will be images, and so on.

Now, whenever you browse the website, you will see many common things: All pages are aligned (all share the same colors and materials), the logo is always the same, drop-down menus are always available, and so on. So, if there are standard features, why download every time someone downloads a new page? The best idea would be to load normal items once, store them inside the browser and reuse them as needed – such as when someone moves from one page to another within the site, or when someone visits the site later.

This is the context of browser caching. In fact, the browser saves look at any of the files you defined as files that do not change very often (above and below) and upload them to the visitor’s browser just once. Once uploaded to the browser cache, these files will never be downloaded again. This means that, instead of downloading too often, they will be ready to use it temporarily – thus reducing the load on your site’s servers AND, more importantly, greatly reducing the time it takes to load the following pages.

Check Out – How To Make WordPress Website Faster – The Essentials (2021)

Note: When a new visitor comes to your site, the speed at which the first page visitors visit will actually be the same whether browser caching is allowed or not, because, since they have never visited your site before, their browser may ‘have the opportunity to save any files for your site yet. The benefits of browser caching, therefore, will only be felt when a visitor uploads more than one page and / or reviews your website.

How to Leverage Browser Caching in WordPress

wordpress admin panel

Enabling browser caching is not difficult, however, because it requires editing a fraudulent site file (your .htaccess site file), requires initial information.

Note: Browser caching is not specified in WordPress, the enable method is the same no matter what application you use.

There are two ways to do this.

THE SUPER EASY WAY: TALK TO YOUR HOST

talk to the hosting provider

To enable browser caching, you will need to edit – or perhaps create – a file called .htaccess file. The typo in this file may result in your entire website being temporarily inaccessible, so, if you have doubts about what to do, it might be best to ask your manager to do it for you – for your own safety. If you use a large hosting company (do you need a better manager?), They will certainly be able to set this up within a few minutes (if they haven’t already).

EDITING THE .HTACCESS FILE ON YOUR OWN

editing code to enable caching

An .htaccess file can be a scary place; is an old example of “with great power comes a great burden”, which allows you to speed up your site, create redirects, and do amazing things. All of this power comes at a price, however – an error in this file may cause your entire site to go downhill.

Adjustment is a matter of postponing what you have added, but, for beginners, it can be a daunting task. I highly recommend trying a test site before getting your hands dirty with an important live site.

The first thing you will need is how to access your server files. The most common way to do this is with FTP (file transfer protocol – read more). The file may be tricky to find because it is a dot file – a file hidden in the Linux-based system (which file has dots?) – but most FTP editors have a ‘show hidden files’ option that should allow you to view these files. (Note: If you’re using a Mac, read our article on how to download, edit and reload an .htaccess file without changing any of your computer settings.)

Check Out – Best Cheap WordPress Hosting Services (2021)

The file. If you don’t get it, that’s fine, it probably isn’t – then you’ll need to build it (something not covered here, I’m afraid). Once found (or created), you will want to add the following code using a plain text editor, NOT a word processor!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>

These lines tell a user’s browser how to cache each file type. Above, I’ve set jpg, jpeg, gif, icons and png images to be cached for a year (since these hardly ever change), and CSS, JavaScript and Flash files to be cached every month (since these are more liable to change). I’ve also set the default to two days for any files that aren’t otherwise specified.

Disabling Browser Caching for Development

Since these files will be stored for a certain period of time (whichever time you decide to specify each file type), upgrading can be difficult, so I strongly recommend not using browser caching for still developing websites. You can go to your browser settings and manually delete the cache every time, of course, but this will soon be boring (again, not so easy to clear someone else’s archive – tips below).

When you start to change things, you will want to start changing the cache to a very short one, like one day – then, users will see new resources after 24 hours.

Another method that developers use to update saved files is to place query restrictions on their resources. When you upload a script. To circumvent this, developers often insert the tool version into a URL. Therefore, instead of “http://mysite.com/script.js” the URL becomes something like “http://mysite.com/script.js?version=1.0”, when the script changes again developer and replaces a used URL, making it “http://mysite.com/script.js?version=1.1”, for example.

Depending on the browser, this is actually a new application, so it will be downloaded and repositioned – for another year.

Testing Your Work

GTMetrix cache test

If your site gets an ‘A’, a moment’s browser caching is fine, and you’re all set to explode with great speed!

Check Out – Best WordPress eCommerce Themes That Looks Like Shopify

Final thoughts

Browser caching can lead to a significant increase in speed, too, because it actually means copying and pasting a few lines of code (and no problems at all – you think you don’t intend to change any defined files before they expire), allowing you to definitely do the right thing.

Do you see the benefits of temporarily using browser caching on your site? Thoughts?

Leave a comment

Your email address will not be published.