Leverage Browser Caching (Implement Web Browser Caching)


Part One Chapter 06

Website

When a first-time user requests one of your mobile web pages through a web browser, the web browser usually has to download all the resource files which are required to construct your page before your page can be displayed.

An Example of Web Browser Caching Resource Files

For example, the web browser has to also load all 8 resource files before completing the page load.

Below is how this example web page is coded.

<head>
<link rel="stylesheet" href="http://css.example.com/style.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2.css" />
<script src="http://js.example.com/script.js"></script>
<script src="http://www.example-2.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1.png"></div>
<div><img src="http://images.example.com/image-2.png"></div>
<div><img src="http://images.example.com/image-3.png"></div>
<div><img src="http://www.example-2.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

Consider the scenarios below:

  • The user may keep browsing multiple other pages of your mobile website. These other pages may often be using the same resource files (i.e. JavaScript, CSS, images, etc) as the first that the user has previously viewed.
  • This user may have left after only viewing one page on your mobile site, and he/she may visit your page again in the near future.

Cache Resource Files

Make the resource files cacheable will avoid unnecessary http requests to these same files from your web server and help your mobile web pages load faster in some cases. When resource files are cached, the benefits are:

  • When the user keeps browsing multiple other pages, the user's local computer already has the cached versions of the resource files and they will not be requested again from your web server.
  • When the user re-visits the same page in the near future, the cached versions of the resource files will be loaded directly from his /her local computer, but not your web server.

Web browser caching for your mobile website is when a user visits your pages, the resources of your pages are stored on the user’s local computer. The resources are static files that do not change very frequently, such as image files, CSS files, JavaScript files, and more.

After web browser caching is enabled on your mobile website, it does not benefit a user’s first view of your page, but the benefit will start on subsequent page views when the same resource files are repeatedly used.

Details of Cached Files

A web server uses an expires-header or a cache-header to tell the web browser if the cached version of a file or all files of a type should be used until the expired date and time. For example, a typical expires-header looks like below, with date and time specified:

Expires: Thu, 15 May 2019 22:00:00 GMT

Note the date and time above in the expires-header is set to a specific date and time which causes a problem. You will have to either regularly check expiration dates and times on your web server, or remember when the next time you will have to update them before they become no longer valid.

For example, if by 16 May 2019 you forget to update the expiration dates and times in the expires-header, then on that day and all the days afterwards web browsers will not use the cached versions of the resource files on all non first-view users.

Cache-header

The web browser caching setup is web server specific. In our cases below, we will use the cache-header method.

  • You will have to implement browser caching through your web server configurations.
  • Assume you may be using Apache or Nginx as your web servers, and the instructions that follow are for these web servers.

Files or File Types to Cache

You will have to decide the types of file you are going to enable caching and for how long. The file types that should be enabled for web browser caching, include:

  • Images such as *.jpg, *.png, *.gif, etc and favicons such as *.ico do not often change after they have been uploaded to your web server for the first time. They may be set up for web browser caching for as long as possible, such as 1-2 years.
  • CSS files can be set up for web browser caching for at least 3-6 months, as they may be changed more often than images and favicons. They are mostly responsible for your mobile web pages’ visual layouts.
  • JavaScript files can be set up for web browser caching for at least 3-6 months, as they may be changed more often than images and favicons. They are mostly responsible for your mobile web pages’ user interactions and user data tracking.

Apache Web Browser Caching

To enable browser caching for Apache, add the code below to the .htaccess file. The code uses the cache-control header, a HTTP header, which can define the amount of time for files and the file types to be cached by web browsers.

  • The cache-control instructions are specified within the opening and closing “filesMatch” tags.
  • The file types for browser caching are specified by “.(css|js)$” and “.(jpg|jpeg|png|gif|bmp|ico)$”. In the first set of cache-control instructions, file types CSS and JS are specified. In the second cache-control instructions, file types “jpg”, “jpg”, “png”, “gif”, “bmp” and “ico” are specified.
  • The “max-age” directive defines the amount of time web browsers must cached the files that meet the specified file types. In the below example, “max-age=2628000” and “max-age=31536000” mean the file types specified must be cached for 1 month and 1 year respectively. The value of the “max-age” directive is expressed in seconds.
  • The “public” directive means the file types that have been specified for caching are enabled for public caching. If your mobile website is to enable browser caching, the “public” directive must be used.
# Cache css and js files for 1 month
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
# Cache image files for 1 year
<filesMatch ".(jpg|jpeg|png|gif|bmp|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

You may need to specify different “max-age” values to different file types. Some of the values that are commonly used are:

  • max-age=60 means web browser caching for approximately 1 minute.
  • max-age=3600 means web browser caching for approximately 1 hour.
  • max-age=86400 means web browser caching for approximately 1 day.
  • max-age=604800 means web browser caching for approximately 1 week.
  • max-age=2628000 means web browser caching for approximately 1 month.
  • max-age=31536000 means web browser caching for approximately 1 year.

Nginx Web Browser Caching

To enable browser caching for Nginx, you can add the code below to the server.

  • The code instructs web browsers to cache file types of “jpg”, “jpeg”, “png”, “gif”, “ico”, “css” and “js”.
  • “expires 100d” – Each file must be cached for 100 days.
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 100d;
}

Web Brower Caching Issues

If you configure the resource files to be cached for a long time (e.g. 1 year) and before the cache expires you make changes to your mobile web pages, your users may not be able to see some of the changes. The reason is that the users will still be provided with the cached versions of the resource files until their expired dates and times.

The best solution is to change the filenames of the resource files. For example:

  • Change all the JavaScript filenames to “filename-new.js”.
  • Change all the CSS filenames to “filename-new.css”.
  • Change all the image filenames to “filename-new.png”.

Applying the filename changes to the previous example, the page now has the codes below.

<head>
<link rel="stylesheet" href="http://css.example.com/style-new.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2-new.css" />
<script src="http://js.example.com/script-new.js"></script>
<script src="http://www.example-2.com/script2-new.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1-new.png"></div>
<div><img src="http://images.example.com/image-2-new.png"></div>
<div><img src="http://images.example.com/image-3-new.png"></div>
<div><img src="http://www.example-2.com/image-4-new.png"></div>
<!-- Some More Page Content -->
</body>


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book