Complete browser caching tutorial for Wordpress

How To Fix Leverage Browser Caching Issue In WordPress?

By now, you would probably heard about browser caching and you thought that W3 Total Cache had solved the issue for you. Heading over to GTmetrix and it shows that you have the leverage browser caching issue.

As complicated as it may sound, the solution for this WordPress issue is actually relatively easy.

How to fix leverage browser caching issue
Does this looks familiar to you?

Before we go into a solution for this WordPress issue, let’s take a quick moment to understand what is the function of browser cache feature.

What is browser cache?

Whenever a browser loads a webpage, it will download all the web files from the hosting server to display the page properly. This means that it includes all the related HTML, CSS, javascript and images on that page.

Browser caching is a feature that ‘remembers’ the resources above that the browser had already loaded previously. In other words, the browser do not need to redownload these files again if your visitor decide to move from one page to another on your website.

The end result of browser caching is your website will load much faster and in return, happier visitors.

Why is is browser caching important?

Browser caching helps to reduce the load on your servers and indirectly, improving the load time of the website.

How to fix leverage browser caching issue in WordPress?

In geeky terms, you need to edit your HTTP headers to set expiry dates on certain types of files.

Sounds complicated? The below is the simplified version:

It is done by adding some codes to a file called .htaccess on your website.

There are several ways to go access your .htaccess which are through:

  • cPanel File Manager
  • FTP clients

For most shared hostings, you can access the .htaccess directly which is much easier. For those who use premium hostings like WP Engine, you would need to use FTP clients for security reasons.

The file, .htaccess is usually located on your /www location on your web host or File Manager page.

Important: Remember to make a copy of the original .htaccess file before editing it.

Open the file, add the code below and press save. You can place the code any where at the top of the file.

 

## EXPIRES CACHING ##
<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/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

 

While the above codes are meant to be used for general websites, you may set different expiry dates especially for files that are updated more frequently.

The method of changing the duration is relatively easy. In the case where you would like to change the browser cache duration, select the ‘1 year’ and replace it with any duration of your choice, such as ‘1 month’.

Additional browser cache tips

Browser caching could affect your website loading speed in a big way and therefore, you should always be aggressive when caching static resources.

In terms of the recommended cache duration, it would be at a minimum of one month but for the best and most optimized settings, ‘access plus 1 year’ is the best for most websites.

Once you have done everything as the above, you should clear your browser cache and cookie before it will takes effect.

Related read: Top 3 Content Delivery Network services that will boost your website loading speed

Like or dislike this WordPress tutorial?

I certainly hope this simple tutorial will help you fix the leverage browser caching issue on your WordPress. Tell me what you think about this and if you like it, please share it around too!

20 thoughts on “How To Fix Leverage Browser Caching Issue In WordPress?”

  1. Hi Reginald,

    Well I am back after long time, as for the browser caching issue I have already thought it’s been taken care of by the caching plugin and it looked where when I see the reports of my website speed is showing that I have a problem with leverage browser caching.
    Thank you so much for sharing the code, by the way I really liked how you locked the code until the post being shared, it’s far enough. What plugin are you using for this feature!

    1. Reginald Chan

      Hey Qasim,

      Ho9w are you mate. Welcome back indeed 😀

      This is probably one of the oldest and most common problem for many and trust me, solving it is easy and the boost in score is huge.

      The locker? Haha, something I am testing now. You can get it here – Social Locker

      Good luck!

  2. Hey Reginald,

    So is this an issue that’s taking place mostly with the WP Total Cache plugin only? I recently ran a GTMetrix report but I didn’t really pay close attention. I don’t understand what half of that stuff even is or how I would go about fixing it if I’m honest with you. I also don’t have that plugin so not sure if this is a separate issue I should worry about.

    Thanks for sharing this although we have to “unlock” the code. If I decide later it’s something I need then I’ll be back.

    Hope you’re staying busy and doing well my friend.

    ~Adrienne

    1. Reginald Chan

      Hi Adrienne,

      Thanks for dropping by. How have you been my dear friend?! You looks fab to be honest 🙂

      This problem arise from server part and most people assume that cache plugins solve the issue for them. Actually, not all plugins help that and thus, creating a lot of issues (can refer to GTMetrix to see if that is an issue on your side). As the issue is considered a server level, it weights a strong score when it comes to loading speed.

      So, to solve that, just place the code in your .htaccess and you are good to go.

      *p/s The unlock feature was a test feature. Wondering how it would affect my social media campaigns. Haha!

      On the other hand, I am crazy busy and still trying hard to balance life. Gah!

  3. Arun Kallarackal

    Hi Reginald,

    Page Speed is a crucial aspect when it comes to blogging. Because it affects user experience and it seems that Google really values it.

    And browser caching is a method that’ll help one improve it with relatively less effort. I’ve used ‘edit .htaccess’ method and it has produced awesome results!

    I don’t use W3 Total Cache since it created many conflict issues. So, naturally, I had to take resort of this method!

    Many folks think that this method is risky and hard to execute. They never realize that it is very easy to do.

    Glad that you’ve written a good little tutorial on the topic. I’m sure, it’ll prove to be of help for many!

    Arun

    1. Reginald Chan

      Hi Arun,

      Glad you find this useful and you took the time to resolve it yourself. Good move indeed!

      W3TC creating issue? Hmm…I heard about it. Maybe because there are tons of features which the hosting environment can’t actually manage that. Haha!

      Talk to you soon.

  4. Hi Reginald,

    Very informative post. I’m using W3 Total Cache, and I’ve seen couple of speed test tools suggesting me to leverage browser caching. Didn’t bother to find solution, now i’ll definitely fix it.

    Thanks for this detailed tutorial! 🙂

  5. Hi Reginald,
    The tutorial is timely and I couldn’t ask for more tips on how to deal with browser cache issue. Like Ryan has stated above ” WP browser or caching issues scare me” also.

    However, solving this issue sometimes is more technical than the problem itself.

    Is there no premium plugin that can be trusted to deal with the problem decisively instead of opening the control panel files?

    I have shared this comment in kingged.com where this this post was found and “kingged” for its value to Internet marketers.

    Sunday – kingged.com contributor

    1. Hi Sunday,

      Thanks for commenting. Personally, I would say opening cPanel is probably safer than using a tool. Haha!

      Well, you don’t need any plugin for that matter. You can use FileZilla or CyberDuck (personal choice) and make sure you select sFTP instead of FTP. FTP is not secure if security is your main concern.

      Hope this helps and talk to you real soon!

  6. Hi Reginald,

    Great Content, Browser caching is important to speed up your website. To improve it, we have only two options
    1. Improve a webhost service
    2. Add CDN

    1. Hi Nikhil,

      Thanks for commenting. I got to add that while choosing a good web host and adding a CDN could be excellent choices, doing some steps above is a cheaper and more conventional way. Works well especially for those who are tight in budget 🙂

      See you around!

  7. “The file, .htaccess is usually located on your /www location on your web host or File Manager page.” Are you able to expand on what you mean by this? It is confusing me.

    This can be a very useful article for me since it often pops up as an area on my GT Metrix scans and is one I often research without much success.

    1. Hey! Oh wow I have a new and loyal reader 🙂

      The file name is called ‘.htaccess’ and if you uses cPanel, just fire up the File Manager and search for it.

      Of course, it gets tricky when you have more than one domain in your cPanel.

      For those who uses cPanel a lot, you’ll be able to see the file in /www directory. But the above method (by searching) is basically the fastest way around.

      Again, make sure you backup the file before anything else. Haha

      Hope this helps.

  8. Hi, I read you article. The thing is that I’m using wt3c and as I see that it has written in the .htaccess file but when testing it with for example webpagetest, I have the leverage cache problem anyway. So can I add the code above the wt3c. wt3c has already written an If module.

Leave a Comment