Last Updated on April 20, 2022 by WP Knowledge Hub
What Exactly is Leverage browser Caching?
Caching means storing information locally on your web browser, like a kind of browser memory.
It remembers things like images, JavaScript, CSS, and more. The idea is to improve the speed of your website by “remembering” things like stylesheets and images to serve them faster to returning visitors. Instead of downloading the whole site again, the cache just serves up the things it remembers, making the whole user experience faster!
Use GT Metrix to see if your WordPress site takes advantage of browser caching correctly. Type in your site’s URL to check if it works.
Using Leverage Browser Caching with WordPress
You need to use a bit of code in order to leverage browser caching in WordPress. Don’t worry – it’s not difficult.
Getting Leverage Browser Caching to work using the .htaccess file is the easiest and most effective method. All you have to do is access the .htaccess file, add the code and you’re done!
Just follow these steps below:
Step 1:
Firstly, log into your hosting account’s hosting panelm like cPanel (or Plesk, etc.), then navigate to the File Manager. Here, you will find the website’s files. Makes sure to turn on the Hidden File option if you don’t see your .htaccess file in the root.
Add the code below at the end of your .htaccess file:
#Customize expires cache start - adjust the period according to your needs <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> #Expires cache end
If you perform changes to the assets more frequently, you can change the expiration period to suit your needs. The purpose of this expiration period is to prevent your visitors from having to re-download the assets too often.
Step 2:
You can switch off ETags to improve loading times because you’ve already set cache-control headers, so you won’t need them; therefore, disable them in your .htaccess file. Add the following code to the .htaccess file:
<IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None
Save the .htaccess file and you are done!
