Caching is the process of storing copies of files in a temporary storage location so they can be accessed more quickly by users. When a browser or server caches a file, it does not need to download the original resource from the origin server every time a user visits a page.
This guide explains the different types of caching, how to configure caching headers, and how to implement caching strategies on servers and content delivery networks (CDNs) to significantly improve website performance.
The most performant request is the one that is not made; efficient caching reduces bandwidth utilization and improves response times by removing the need to re-download content.
There are several layers where caching can occur, each serving a specific purpose in the delivery chain.
Client-Side (Browser) Caching This type of cache lives on the user's device. When a user visits a web page, the browser stores assets like images, CSS, and JavaScript. On repeat visits, the browser retrieves these items from the local disk rather than the network, which is the fastest option available.
CDN (Edge) Caching A Content Delivery Network (CDN), such as Cloudflare, stores copies of content on servers located geographically closer to the user. This reduces the distance data must travel, lowering latency compared to fetching data from the origin server.
Object Caching For dynamic sites like WordPress, object caching (using tools like Redis) stores database query results in memory. This prevents the database from being queried repeatedly for the same information, which is critical for dynamic pages like shopping carts or user dashboards.
Browser caches are considered "private" caches because they are specific to one user, whereas CDN caches are "public" or "shared" caches used by many visitors.
Configuring Cache Headers
To control how browsers and CDNs cache your content, you must configure HTTP headers. The primary tool for this is the Cache-Control header.
The Cache-Control header uses directives to tell browsers how to handle files:
• max-age: Specifies the maximum time (in seconds) content is considered "fresh". For example, max-age=31536000 tells the browser to cache the file for one year.
• public: Indicates that the content can be cached by any cache, including CDNs and shared proxies.
• private: Indicates content should only be cached by the user's browser, often used for personalized content.
• no-store: Instructs the browser not to cache the content at all, useful for sensitive data.
• immutable: Tells the browser the file will never change, which is perfect for versioned static assets.
If no Cache-Control header is present, browsers may look for an Expires header, which specifies a date and time after which the content is considered stale.
If you update a file that has a long cache duration (e.g., one year), users may still see the old version. To fix this, use "cache busting" by changing the file name (e.g., main.css to main.12345.css) to force the browser to download the new version.
You can enforce caching policies by configuring your web server software, such as Nginx or Apache.
For Nginx, you can use the add_header directive to set cache control policies. For static assets like images and CSS, a common configuration is to set a long expiration time,: add_header Cache-Control "public, max-age=31536000, immutable";
For Apache servers, the mod_headers module allows you to set similar controls within configuration files or .htaccess.
Additionally, hosting control panels often provide built-in tools. For example, Hostinger’s hPanel includes a Cache Manager to enable caching features without writing code.
For dynamic content (like HTML pages), it is often best to use max-age=0, must-revalidate. This forces the browser to check with the server if the content has changed before using the cached copy, ensuring users always see the latest version.
Using a CDN like Cloudflare allows you to cache content at the "edge" of the network.
To set this up, you must first add your domain to the CDN provider. Once active, you can configure the Browser Cache TTL (Time To Live), which tells the user's browser how long to keep cached content.
You can also create Cache Rules to control behavior for specific URL patterns. For instance, you might configure the CDN to cache everything in a /static/ folder but bypass the cache for /admin/ pages. Cloudflare also offers Tiered Caching (Smart Shield), which optimizes connections to the origin server to reduce load.
Cloudflare provides specific features for WordPress, such as "Bypass Cache on Cookie," which ensures that cached pages are served to anonymous visitors while logged-in users receive dynamic content.
Dynamic websites, such as e-commerce stores or membership sites, require different strategies because page content changes frequently or is unique to the user.
Object Caching with Redis Redis works by keeping frequently requested database objects in memory. For example, on a WooCommerce site, Redis can store cart data or product details so the database doesn't have to rebuild them for every request. This drastically reduces database strain and improves backend response times.
Validation and Freshness When cached content becomes "stale" (expired), the browser or server must validate it. Mechanisms like ETags (Entity Tags) allow the browser to ask the server, "Has this file changed?" If the file hasn't changed, the server returns a "304 Not Modified" response, and the browser uses the cached copy, saving bandwidth.
Enabling website caching involves a multi-layered approach. Use Browser Caching via Cache-Control headers for static assets to speed up repeat visits.
Implement CDN Caching to move content closer to global users. Finally, utilize Object Caching (like Redis) for dynamic applications to reduce database load.
By combining these strategies and using techniques like cache busting for updates, you ensure a fast, efficient, and reliable experience for your users.
Efficiency is felt even when unnoticed.