HostArmada Web Hosting Knowledge Base

Knowledge is power! Use that power and achieve total and unconditional control over the Web Hosting Services!

What is Leverage Browser Caching and how can I activate it for my site?

To understand how Leverage Browser Caching works, you need to have an idea of how web servers work and browsers work. Let's go over this process with a few words.

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, and it delivers the content to the user's browser, each time the website site is visited. A website is built using various file types, be that dynamic, such as PHP files or static such as HTML, JS, CSS, and images. If pages of the served website are small (A few KB), they will load faster as the webserver will be delivering a small piece of content to your browser. However, if the page is more substantial (3-4MB or more) and it contains a lot of static resources, it will take longer to load.

To reduce the amount of time larger pages take to load, Leverage Browser Caching was implemented, which enabled the browsers to download some of the static resources of the visited websites locally. This process aims to reduce the number of requests made towards the web server when visiting a website, which in turn reduces the amount of data your browser has to download. What is the result, you might ask? Improved website loading speed.

What enables you to use Leverage Browser Caching is the web server itself - in this case, Apache and its mod_expires. To activate it, you need to modify your HTTP headers and set expiry rates for the file types you wish to benefit from the feature. This is done via rules you need to add in your .htaccess file.

Please create this file in the root directory of the domain you want to benefit from Leverage Browser Cache, or if it already exists, open it for editing. Please copy and paste the following lines inside the .htaccess:

# 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 Webfonts
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/ "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 the Leverage Browser Caching for your site.

Was this article useful and on point?

Find out more about HostArmada entire range of optimized Web Hosting Services and take action today on improving your website Loading Speed, Security, and overall Stability!