LEVERAGE BROWSER CACHING

DifficultyModerate
PriorityHigh
Average Score57%

Brief

  • Leveraging web cache can dramatically improve page load time and latency.
  • It’s super-effective for websites where the same content is continually visited, or when a user frequents a single website.

Overview

A web cache or browser cache pertains to the storage and reuse of web page resources on a client machine. The cached web resources can be HTML, images, CSS, and JavaScript.


Why Caching?

Caching reusable web resources on a client’s browser is beneficial for both the visitor and the website owner. Cached resources can be loaded right away, unaffected by network or remote server issues as they’re already available in the client’s browser. The user experience, especially for visitors with slower network connections can be dramatically improved; not to mention the cumulative savings in download data for the visitor.

Deploying browser caches is beneficial to the website owner too. As each web file makes a separate request to the server, caching frequented web resources ensues fewer requests to the server, which in turn saves the host server bandwidth.


How to leverage browser caching

Browser caching can be deployed by configuring server responses to include caching directives to the client’s browser. The method of configuring the response from the server depends on the web server software.

For example, for an Apache web server, the appropriate caching parameters must be set on the .htaccess file in the document root. The caching parameters must be set for the file types to be cached, and also for the amount of time to be cached. There are two methods for providing caching parameters in an Apache system – the expires, and cache-control methods.

EXPIRES CACHING METHOD


<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 6 month"
ExpiresByType text/html "access 6 month"
ExpiresByType application/pdf "access 6 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 6 month"
</IfModule>

Cache-Control Method


# 6 Month Caching – Cache-Control Method
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=15552000, public"
</filesMatch>