Best Ways to Leverage Browser Caching in WordPress

What is Leverage Browser Cache

If you tested your website speed in Google Web page speed test, it will show Leverage browser caching option like,

Consider Fixing:
Leverage browser caching

Browser loads website logo, CSS and other important files, if visitor opens another page in your website, the browser automatically load logo and CSS files instead of requesting a fresh file from the server.

Browser Caching is an advanced webpage speed concept, which helps your website to minify HTTP requests and saves much bandwidth by remembering logo, CSS, and other important files.

HOW TO LEVERAGE BROWSER CACHING IN WORDPRESS

1. Edit .htacccess file
2. W3 Total cache Plugin

.HTACCESS

Leverage browser caching in WordPress with .htacccess file.By default you can acccess this file trough C panel > File Manager > Web Root(public_html) > .htaccess.

If you are using WordPress SEO by Yoast, then you can edit .htaccess file within WordPress admin under SEO > Edit files.

Use C panel or WordPress SEO by Yoast to edit .htaccess file and the following code to Leverage browser caching in WordPress.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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 text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

In the code, 1 month and 1 year are browser caching period, where you can change these values as per requirement.This code is widely accepted by professional techies.

W3 TOTAL CACHE

Leverage browser caching with w3 total cache by navigating Performance > Browser Cache

There you can specify custom browser cache  settings for General, Cascading  CSS & JS Style (Sheets and JavaScript) files,HTML & XML( posts, pages, feeds and text-based) files.