Caching in web performance optimization: Strategies and benefits

Types of caches

There are several types of caches that exist in a web environment:

• Browser cache: Stores resources (like HTML, CSS, JavaScript, images, etc.) on a user’s device so that subsequent visits to the same website load faster.
• CDN cache: Content Delivery Networks (CDNs) cache copies of static content in geographically distributed locations to deliver content more quickly to users based on their location.
• Web server cache: Stores resources on the server side, which reduces the need to regenerate or fetch resources from the database every time a request is made.
• Application cache: A layer of caching within the application, typically storing data retrieved from a database or an API.
• Database cache: Often implemented through solutions like Redis or Memcached, these caches store frequently accessed queries and data to reduce the load on the database.
• Memory cache: Stores data in memory, such as RAM, for extremely fast access times.

Web server and website caching

The focus of this article is on web server caching and website caching. These techniques primarily involve storing copies of files on the server and providing them in response to user requests without having to regenerate them repeatedly.

Web server caching involves techniques implemented directly on the server, while website caching can include browser-side techniques like HTTP caching, where the server instructs the client (browser) to cache resources locally.

Cache-Control header

The Cache-Control header is one of the most important headers for controlling how, what, and for how long the browser or an intermediate caching mechanism (like a CDN or a proxy) should cache a resource.

Cache-Control: max-age=3600, public

The above example tells the browser or intermediary caches to cache the resource for 3600 seconds (1 hour). The public directive indicates that the resource is cacheable by any caching layer, including shared caches (e.g., CDNs).

Common Cache-Control directives include:

• no-store: No caching is allowed; every request must fetch the resource from the server.
• no-cache: The client must revalidate with the server before serving a cached copy.
• max-age: Specifies the maximum time (in seconds) a resource can be cached before it is considered stale.
• private: Indicates the resource is specific to a single user and should not be cached by shared caches.
• public: The resource is cacheable by any cache, including shared caches.

Expires header

The Expires header provides a specific date and time after which the resource is considered stale. Unlike Cache-Control, which deals in relative time, Expires deals with absolute time.

Expires: Wed, 21 Oct 2023 07:28:00 GMT

However, Cache-Control has largely replaced Expires in modern web development because it offers more granular control.

ETag header

The ETag (Entity Tag) header is used for cache validation. It provides a unique identifier for a specific version of a resource. When the client makes a request for a cached resource, it sends the ETag value in the If-None-Match header. The server then checks if the ETag matches the current version of the resource. If it does, the server responds with a 304 Not Modified status code, meaning the cached version is still valid.

ETag: "34a64df551429fcc55e4d42a148795d9f25f89d4"

Last-Modified header

The Last-Modified header specifies the last time the resource was modified. Similar to ETag, it allows clients to validate their cached copy of the resource by sending a request with the If-Modified-Since header. If the resource has not changed since that time, the server responds with a 304 Not Modified status code.

Last-Modified: Tue, 15 Nov 2023 12:45:26 GMT

Pragma header

The Pragma header is an older HTTP/1.0 header, mostly used for backward compatibility. Pragma: no-cache is similar to Cache-Control: no-cache, instructing clients not to cache the resource.

Pragma: no-cache

Vary header

The Vary header is used when the response might differ based on certain request headers. For example, if a website serves different content depending on the Accept-Encoding header (whether the client can accept compressed content or not), the Vary header ensures the cache respects these differences.

Vary: Accept-Encoding

Step 1: Enable Apache caching modules

To use caching in Apache, you first need to enable the required modules. These include mod_cache, mod_cache_disk, and mod_expires.

On a Debian-based system (such as Ubuntu), you can enable these modules by running:

sudo a2enmod cache
sudo a2enmod cache_disk
sudo a2enmod expires
sudo systemctl restart apache2

Step 2: Basic cache configuration

You can configure caching in Apache’s configuration file (/etc/apache2/apache2.conf or in a virtual host configuration).

Here’s a simple configuration to cache files for 1 hour:

<IfModule mod_cache.c>
    CacheQuickHandler off
    CacheLock on
    CacheLockPath /tmp/mod_cache-lock
    CacheLockMaxAge 5
    CacheIgnoreHeaders Set-Cookie
</IfModule>

<IfModule mod_cache_disk.c>
    CacheRoot /var/cache/apache2/mod_cache_disk
    CacheEnable disk /
    CacheDirLevels 2
    CacheDirLength 1
</IfModule>

<FilesMatch "\.(html|css|js|png|jpg)$">
    ExpiresActive On
    ExpiresDefault "access plus 1 hour"
</FilesMatch>

In this configuration:

• We enable disk caching and specify the location for the cache in /var/cache/apache2/mod_cache_disk.
• We use ExpiresActive to specify that files like HTML, CSS, JavaScript, and images should be cached for 1 hour.

Step 3: Fine-tuning caching

You can further fine-tune caching with additional headers, specific cache control settings for different file types, or dynamic content exclusion.

<FilesMatch "\.(html)$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
</FilesMatch>

The above example prevents caching for HTML files, which might be necessary if your HTML files change frequently, while other assets are cached.

Step 4: Enhanced cache control with mod_expires

The mod_expires module allows you to set specific expiration times for different types of content based on MIME types. This gives more granular control over how long various assets should be cached.

Here's a comprehensive configuration using mod_expires:

<IfModule mod_expires.c>
    # Turn on the module.
    ExpiresActive on

    # Set the default expiry times.
    ExpiresDefault "access plus 2 days"

    # Define expiration rules for specific MIME types.
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType text/css "now plus 1 month"
    ExpiresByType image/ico "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType text/html "access plus 600 seconds"
</IfModule>

In this example:

• Default expiry time: Any resource not specifically defined will expire after 2 days.
• Specific MIME types: Images, JavaScript, and CSS files are cached for 1 month. HTML files, however, are cached for only 600 seconds (10 minutes). This is useful if you want frequent updates to HTML content while still caching static assets for longer periods.