One of the best ways to improve the speed and performance of your WordPress site is to leverage browser caching.
By leveraging browser caching, you can reduce the number of HTTP requests that the server needs to process, thus reducing loading times and improving website performance. And as an added bonus, when you leverage browser caching, you improve your scores on Core Web Vitals and other pagespeed tools!
In order to leverage browser caching appropriately, you need to modify the .htaccess file for your site.
Key Takeaways
- Leveraging browser caching is one of the quickest ways to improve the speed and performance of your WordPress website for your visitors.
- Modifying the
.htaccessfile is a simple process, and the code in this tutorial can be completely copied and pasted. - Once you’ve added browser caching directives to your
.htaccessfile, the results are instant!
Finding and Modifying .htaccess
While it may seem daunting, modifying the .htaccess file is quite simple. You can access your .htaccess file through cPanel by clicking on the File Manager. Make sure you are in the web root folder and that you have the “Show hidden files” option toggled on.
If you don’t have cPanel, you can simply create a new .htaccess file in the root of your WordPress install. The root folder is the same folder where the wp-config.php file is found.
Code can be scary, but leveraging browser caching in WordPress via .htaccess doesn’t have to be. Get the WP Rocket plugin, and it will handle it for you automatically! Click here to get WP Rocket!
Pasting in the Directives to Leverage Browser Caching
Open up your .htaccess file and paste in the following directives at the top of the file:
## Leverage Browser Caching in WordPress via .htaccess ##
<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>
## Leverage Browser Caching in WordPress via .htaccess ##
By using this code, your main static files (images, CSS, PDF’s, JS, etc.) will be cached in order to produce faster loading times for visitors in the future.
Now save your .htaccess file and view your WordPress site through Core Web Vitals and other PageSpeed tests. You are now leveraging browser caching for your site!
I hope you’ve found it easy to leverage browser caching in WordPress via .htaccess with this tutorial. If so, please share it with others using the social buttons found on this article.
Leave a Reply