What is Leverage Browser Caching and how can I enable it for my website?
Introduction
To understand how Leverage browser caching works, you need to know how web servers and browsers work. Let's go through this process briefly.
To access a website, you need a web browser such as Google Chrome or Mozilla Firefox. A website is usually hosted on a web server, which sends the content to the user's browser every time they visit the website. A website is created using different file types, either dynamic like PHP files or static like HTML, JS, CSS and images. When the pages of a website are small (few KB), they load faster because the web server sends only a small portion of the content to the browser. However, if the page is larger (3-4 MB or more) and contains many static resources, it takes longer to load.

Leverage browser caching
In order to shorten the loading time of extensive pages, the Leverage browser caching which allows browsers to download some static resources of visited websites locally. This process aims to reduce the number of requests to the web server when visiting a website, which in turn reduces the amount of data your browser has to download. What is the result? The website loads faster.
The web server itself-in this case, Apache and its mod_expires-enables the use of leverage browser caching. To enable this feature, you must modify your HTTP headers and set expiration times for the file types you want to use. This is done through rules that you add to your .htaccess file.
Create this file in the root directory of the domain you want to use Leverage Browser Cache for, or open it for editing if it already exists. Please copy and paste the following lines into the .htaccess file:
# Enabled Expires Headers
ExpiresActive on
# Set Expires Default
ExpiresDefault "access plus 1 year".
# Set Expires Header for cache.
ExpiresByType text/cache-manifest "access plus 0 seconds".
# Your document html
ExpiresByType text/html "access plus 0 seconds".
# Data
ExpiresByType text/xml "access plus 0 seconds
ExpiresByType application/xml "access plus 0 seconds
ExpiresByType application/json "access plus 0 seconds"
# RSS Feed
ExpiresByType application/rss+xml "access plus 1 hour
ExpiresByType application/atom+xml "access plus 1 hour
# Favicon
ExpiresByType image/x-icon "access plus 1 week"
# Media files - images, audio, video
ExpiresByType image/gif "access plus 1 year
ExpiresByType image/png "access plus 1 year
ExpiresByType image/jpeg "access plus 1 year
ExpiresByType video/ogg "access plus 1 year
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType audio/mp3 "access plus 1 year
ExpiresByType video/mp4 "access plus 1 year".
ExpiresByType video/webm "access plus 1 yar"
# HTC files
ExpiresByType text/x-component "access plus 1 year"
# Various web fonts
ExpiresByType application/x-font-ttf "access plus 1 month
ExpiresByType font/opentype "access plus 1 month
ExpiresByType application/x-font-woff "access plus 1 month
ExpiresByType application/x-font-woff2 "access plus 1 month
ExpiresByType image/svg+xml "access plus 1 month
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year
ExpiresByType application/javascript "access plus 1 year"
Save the file and voila! You have now implemented Leverage Browser Caching for your website.