1. Knowledge Base
  2. >
  3. Results
  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. It prevents the browser from submitting a separate request to load these items individually each time they visit.

Now that we know what Leverage Browser Caching is, let's jump into making 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

We will cover the first method to manually add Cache-Control Headers and Expiration Headers into your .htaccess file.

  1. Access the File Manager icon within your cPanel Files section. 

    Hostgator cPanel File Manager

  2. Navigate the domain's file path by right-clicking the .htaccess file and then selecting Edit.

    File Manager .htaccess

    If you try 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 found via the addon domains icon on your cPanel under the Doc Root column.
  3. On the next pop-up, click Edit to access the editor.

    File Manager .htaccess Edit

  4. Once in the edit mode for the .htaccess file, paste the following Cache-Control Headers and Expiring Headers codes, 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 have been added to the .htaccess file, click the save button at the screen's top right corner. Congrats! You have now Leveraged Browser Caching!

Leverage Browser Caching - WordPress Plugin Method

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

W3 Total Cache

  1. Log in to the WordPress dashboard and hover your mouse cursor over Plugins.
  2. Select the Add New option.

    Wp Dashboard Plugin Add New

  3. In the middle of the page towards the right-hand side, search for W3 Total Cache and click the Install Now option.

    W3 Total Cache

  4. Click Activate.

    W3 Total Cache Activate

  5. Once activated, click on the Settings link.

    W3 Total Cache Settings

  6. Scroll down to the Browser Cache section and ensure the browser cache is enabled.

    W3 Total Cache Enable Browswer Cache

  7. Now that we have enabled Browser Cache, we need to finish the W3 Total Cache plugin Setup. On the left side of the dashboard, under the Performance section, select the Browser Cache option.

    W3 Total Cache Browser Cache

  8. In the Browser Cache section, under General Settings, click the checkboxes for the following options:

    W3 Total Cache General Settings

    • Set Last-Modified Header - The set of the last header change for CSS and JS files should be enabled.
    • Set expires header - The expires header is an expiration time of an entity of the web, whether an HTML document, CSS file, image, etc. The length specified in this header will control how long the cache of the entity is valid.
    • Set cache control header - The cache-control header is an additional header to encourage browser caching.
    • Set entity tag (ETag) - The eTag is a validation tag that makes browser caching more efficient.
    • Set W3 Total Cache header - This is a header set by W3TC to assist in identifying optimized files.
    • Enable HTTP (gzip) compression - Gzip compression will reduce the download time for text-based files.
  9. Once those options are enabled, select the Save All Settings button, and you will be all set!