There are a couple of ways to implement browser caching on a WordPress website. We have covered them all in the article below. Let’s dive in. \ud83e\udd3f<\/p>\n<\/div>\n\n\n\n
How does leveraging browser cache improve site speed?<\/h2>\n\n\n\n
To understand how leveraging browser cache improves site speed, you need to first learn how a web page loads on a browser.<\/p>\n\n\n\n
A web page consists of numerous elements<\/strong>: text, media, widgets, header-footer, etc.<\/p>\n\n\n\n When you open a web page, your browser makes multiple requests to the site’s hosting server to load all the elements of the page.<\/p>\n\n\n\n The server returns those requests with appropriate data, which is then shown on the browser.<\/p>\n\n\n\n As you can imagine, the whole process takes a while, and depending on the number of elements on your web page<\/strong>, your website may require some time to fully load on the browser.<\/p>\n\n\n\n Since the attention spans of people these days are becoming increasingly shorter, slow-loading web pages are likely to result in high bounce rates and lost opportunities for engagement and conversions.<\/p>\n\n\n\n \ud83d\udc49 This is why website owners should work towards increasing page loading speed<\/a>.<\/p>\n\n\n\n One of the best ways to increase page loading speed is by using browser caching.<\/p>\n\n\n\n As we said earlier in the introduction, browser caching is the process of storing web pages in the browser, which helps reduce the overall server requests. It prevents your server from overexerting and the pages load faster.<\/p>\n\n\n\n Now that you have an idea of how leveraging browser cache improves website loading speed, let’s learn how to implement browser caching on a WordPress website.<\/p>\n\n\n There are two different ways to leverage the browser cache. You can do it using a plugin or by manually editing configuration files.<\/p>\n\n\n\n We recommend reading through all the methods listed below and carrying out the one that’s most convenient to you.<\/p>\n\n\n\n \u26a0\ufe0f IMPORTANT:<\/strong> You may start by removing plugins<\/a><\/strong> that you don’t need from your WordPress website. Plugins add extra code and functionality to your website. Such additional codes can slow down your site’s performance, especially if the plugins are poorly coded or conflict with one another.<\/p>\n\n\n\n Also, take a backup<\/a><\/strong> of your entire website. \ud83d\udcbe<\/p>\n\n\n\n Some of the steps in this tutorial involve going to the backend of your website, accessing important configuration files, and inserting code snippets<\/a>.<\/p>\n\n\n\n Other steps involve installing new plugins and letting it add code snippets into your configuration files. All this is risky business. One mistake can bring your site crashing down. The backup copy will be your safety net for when disaster hits. So take a backup before proceeding with the next step.<\/p>\n\n\n\n Using a caching plugin is the easiest way to leverage browser caching. All you need to do is install the plugin and set it up properly.<\/p>\n\n\n\n There are several caching plugins<\/a> to choose from. Some of the most popular ones are WP Rocket, W3 Total Cache, WP Super Cache, WP Fastest Cache, and Comet Cache.<\/p>\n\n\n\n Most of these plugins have a free version that allows you to leverage browser caching.<\/p>\n\n\n\n We have guides on WP Super Cache<\/a> and W3 Total Cache<\/a> plugins. Be sure to check them out.<\/p>\n\n\n To manually leverage browser caching, you need to carry out these two steps: determine your web server (Apache or Nginx), and add cache-control headers or expires headers.<\/p>\n\n\n\n You can get on a quick chat with your hosting provider and ask them whether you are using Apache or Nginx<\/a>, or figure it out yourself by taking the following steps.<\/p>\n\n\n\n “Cache-control headers” and “expires headers” are directives used to instruct browsers on how long to store and use cached content.<\/p>\n\n\n\n Both cache-control headers and expires headers serve the same purpose, so you don’t need to add both headers<\/strong> to your hosting server.<\/p>\n\n\n\n In this section, we have covered how to add both, but be sure to add just one<\/strong> on your server. Adding both headers is known to cause conflicts in a WordPress website.<\/p>\n\n\n\n Cache-control headers are more versatile and modern, offering fine-grained control over caching, while expires headers provide a basic way to specify cache expiration times. That said, you are free to add whichever header feels convenient to you.<\/p>\n\n\n\n Nginx users need to log into their hosting server, open their configuration file<\/strong>, and insert the following code snippet to add cache-control headers<\/strong>:<\/p>\n\n\n\n This sets the expiration period for the specified file types to seven days. You can change the number of days and add or remove file types from the code snippet.<\/p>\n\n\n\n In the same server block<\/strong>, copy-paste the following to add expires headers<\/strong>:<\/p>\n\n\n\n As you can see, this code snippet sets the expiry periods for different file types.<\/p>\n\n\n\n Feel free to customize the code to suit your needs.<\/p>\n\n\n\n \ud83d\udca1 Note<\/strong>: If you don’t know how to access the Nginx configuration file, then look for a help doc from your hosting server or reach out to your hosting support team for assistance.<\/p>\n\n\n\n Apache users have to log into their hosting account, access the .htaccess file<\/strong><\/a>,<\/strong> and add the following code snippet to add cache-control headers<\/strong>. <\/p>\n\n\n\n \u231b Important<\/strong> Be sure to add it before the “#BEGIN WordPress” or after the “#END WordPress” sentence. <\/p>\n\n\n\n The code sets the cache expiry period to 172800 seconds or two days.<\/p>\n\n\n\n To add expires headers<\/strong> to your Apache server, insert the following code snippet into the .htaccess file:<\/p>\n\n\n\n You can probably tell that the code specifies caching periods based on file types.<\/p>\n\n\n\n Feel free to modify both codes to whatever suits you.<\/p>\n\n\n\n That’s it, folks. That’s how you leverage browser caching on WordPress.<\/p>\n\n\n If the site speed tool still shows you the leverage browser cache warning, then that is likely because of Google Analytics (GA)<\/a>.<\/p>\n\n\n\n You can check whether GA is the real culprit by running your website on Google’s PageSpeed Insight<\/a>. Expand all the audit results and look for the Google Analytics scripts<\/strong>. If GA is the culprit, then the Page Insight Tool will suggest that you “leverage browser caching for the following cacheable resource.”<\/p>\n\n\n\n To leverage browser caching for GA, you need to use a 3rd part plugin called Complete Analytics Optimization Suite (CAOS)<\/strong>.<\/p>\n\n\n\n But before to starting install the plugin on your WordPress website, please know that this method is not supported by Google<\/a> and that the CAOS plugin is not compatible with many Google Analytics plugins<\/a>.<\/p>\n\n\nHow to leverage browser caching in WordPress?<\/h2>\n\n\n\n
\n
1. Install and activate a caching plugin \ud83d\udd0c<\/h3>\n\n\n\n
![\"Leverage](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/wp-total-cache-plugin-browser-cache.png\")
<\/figure><\/div>\n\n2. Use configuration files to add code snippets manually \ud83e\uddd1\u200d\ud83d\udcbb<\/h3>\n\n\n\n
Determine your web server<\/h4>\n\n\n\n
\n
![\"Find](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/10\/find-if-your-site-is-using-nginx-or-apache.png\")
<\/figure><\/div>\n\n\nAdd cache-control headers or expires headers<\/h4>\n\n\n\n
Nginx server<\/h5>\n\n\n\n
location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n\n expires 7d;\n\n add_header Cache-Control \"public, no-transform\";\n\n}<\/code><\/pre>\n\n\n\nlocation ~* \\.(jpg|jpeg|gif|png|svg)$ {\n\n expires 365d;\n\n}\n\nlocation ~* \\.(pdf|css|html|js|swf)$ {\n\n expires 3d;\n\n}<\/code><\/pre>\n\n\n\nApache server<\/h5>\n\n\n\n
<filesMatch \".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$\">\n\n Header set Cache-Control \"max-age=172800, public\"\n\n<\/filesMatch><\/code><\/pre>\n\n\n\n## EXPIRES HEADER CACHING ##\n\n<IfModule mod_expires.c>\n\nExpiresActive On\n\nExpiresByType image\/jpg \"access 1 year\"\n\nExpiresByType image\/jpeg \"access 1 year\"\n\nExpiresByType image\/gif \"access 1 year\"\n\nExpiresByType image\/png \"access 1 year\"\n\nExpiresByType image\/svg \"access 1 year\"\n\nExpiresByType text\/css \"access 1 month\"\n\nExpiresByType application\/pdf \"access 1 month\"\n\nExpiresByType application\/javascript \"access 1 month\"\n\nExpiresByType application\/x-javascript \"access 1 month\"\n\nExpiresByType application\/x-shockwave-flash \"access 1 month\"\n\nExpiresByType image\/x-icon \"access 1 year\"\n\nExpiresDefault \"access 2 days\"\n\n<\/IfModule>\n\n## EXPIRES HEADER CACHING ##<\/code><\/pre>\n\n\n\nAre you still seeing the leverage browser cache warning?<\/h2>\n\n\n\n