WordPress Leverage Browser Caching Without Plugin

Leverage browser warning mostly appears when you are testing your WordPress website speed such as GTmetrix. Leveraging browser caching properly increases the page loading speed on your website.

If you would like to use a plugin to set up your caching options, read How to Set Up Caching in WordPress. However, if you want to do it yourself, then follow this step by step tutorial.

To follow this tutorial, you need to satisfy the following requirements:

  1. Apache Server – Your WordPress should be running on Apache Server. You can get your server information from your hosting provider.
  2. Access to your Website files and folders. You need either FTP access or Cpanel access. In this tutorial, we are going to use Cpanel access.

you need Cpanel login credentials that can be provided by your web hosting company.

Login into your Cpanel and locate the file manager. Open the file manager.

On the left, open the ‘public_html’ folder to access your website files.

Locate the ‘.htaccess’ file in your root directory. Ensure you can view hidden files. Select the file then click on the ‘Edit’ button at the top.

Click on ‘Edit’ button on the pop-up that appears.

In this step, we will add expires headers. Copy and paste the code below as shown in the image

ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"

In this step, we will add cache-control errors. Copy and paste the code below as shown in the illustration.

# AvoidErrors - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
<filesMatch "\.(css)$">
Header set Cache-Control "public"
<filesMatch "\.(js)$">
Header set Cache-Control "private"
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
# AvoidErrors - END Cache-Control Headers

In this step, we will turn off Etags. Copy and paste the code below then click the ‘Save Changes’ button.

# AvoidErrors - BEGIN Turn ETags Off

FileETag None

# AvoidErrors - END Turn ETags Off

If you have followed all the steps above, you have successfully enabled Leverage Browser Caching manually.

Leave a Reply