1. Knowledge Base
  2. >
  3. Design Tools
  4. >
  5. WordPress - Leverage Browser Caching

WordPress - Leverage Browser Caching

If you recently ran a website speed test or looking to increase your website's speed, you may have seen or heard the term Leverage Browser Caching. So, what does it mean to Leverage Browser Caching?

Leverage Browser Caching, what is it?

Leverage Browser Caching is referring to the cache settings within your web browser. When a website is requested through a browser, it downloads items such as scripts, images, HTML, etc. into your browser's local cache. The browser uses these temporarily stored items to quickly call upon them if the website is requested again in a browser. This prevents the browser from having to submit a separate request to load these items individually each time the site is visited.

Now that we know what Leverage Browser Caching is, let's jump into how we can make it work to your advantage. Below are the two main ways on how to implement this for your WordPress site.

Leverage Browser Caching - .htaccess Method

The first method we will cover is how to manually add Cache-Control Headers and Expiration Headers into your .htaccess file.

  1. Access the File Manager by clicking on the File Manager icon within your cPanel. This can be quickly located by typing File Manager into the search bar at the top of the cPanel.
  2. In the top right of the screen, click the settings button. Ensure the option that states Show Hidden Files is checked and click save at the bottom of the window.
    mg
  3. Once you can see your hidden dot files, navigate to the domain's file path by right-clicking the .htaccess file,  and then selecting Edit. 
    If you are trying to Leverage Browser Caching for your primary domain, that domain's file path is home/public_html. If you need to locate your addon domain's file path, that can be located via the addon domains icon on your cPanel under the Doc Root column.
  4. Once in the edit mode for the .htaccess file, paste the following Cache-Control Headers and Expiring Headers code each on a new line within the .htaccess file.
    Cache-Control Headers
    <FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$"> Header set Cache-Control "max-age=84600, public" </FilesMatch>
    Expiring Headers
    ## EXPIRES HEADER CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/svg "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "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 image/x-icon "access 1 year" ExpiresDefault "access 2 days" ## EXPIRES HEADER CACHING ##
  5. After both the Cache-Control Headers and the Expiring Headers code has been added to the .htaccess file, click the save button at the top right corner of the screen. Congrats! You have now Leveraged Browser Caching!

Leverage Browser Caching - WordPress Plugin Method

Now that we have covered how to manually leverage browser caching, let's discuss a WordPress plugin that you can install to perform the same task

W3 Total Cache

  1. Login to the WordPress dashboard and hover your mouse cursor over Plugins and select the Add New option.
  2. In the middle of the page towards the right-hand side, search for W3 Total Cache and click the Install Now option.
  3. Once installed, navigate back to the Installed Plugins list and click on the Settings link. Scroll down to the Browser Cache section and ensure browser cache is enabled.
  4. Now that we have enabled Browser Cache, we need to finish the setup of the W3 Total Cache plugin. On the left side of the dashboard under the Performance section, select the Browser Cache option.
  5. In the Browser Cache section, under General settings, click the checkboxes for the following options:
    • Set Last-Modified Header
    • Set Expires Header
    • Set Cache Control Header
    • Set Entity Tag
  6. Once those options are enabled, select the Save All Settings button and you will be all set!