Quantcast
Channel: WordPress Tutorials by Thomas Griffin [UPDATED]
Viewing all articles
Browse latest Browse all 6

How to Leverage Browser Caching in WordPress via .htaccess

$
0
0

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.

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.

Don’t Want to Mess with Code?

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 with this tutorial. If so, please share it with others using the social buttons found on this article.

The post How to Leverage Browser Caching in WordPress via .htaccess appeared first on Thomas Griffin.

Viewing all articles
Browse latest Browse all 6

Trending Articles