How to Configure Cache-Control Headers in NGINX

Caching is the method of storing downloaded knowledge for later use, the place it may be learn from disk fairly than requesting it once more. Making correct use of your browser and CDN caching can velocity up your web site considerably.

How Does Caching Work?

Every consumer’s browser has a built-in cache, which shops static objects downloaded from web sites. The subsequent time they join, if the item they’re requesting continues to be in the cache, it can load from reminiscence fairly than asking for it once more, dashing up efficiency considerably and lowering the load in your internet server in the method.

The consumer’s browser is a client-side cache. However, many massive websites may even make use of a Content Delivery Network, or CDN. The CDN sits in entrance of your internet server and caches your pages on the server aspect, normally on a number of edge servers positioned around the globe. This improves entry latency, efficiency, and enormously reduces the stress in your internet server. If you’d like to be taught extra about CDNs, you’ll be able to read our guide on them here.

Cache-Control is a header that you could configure your internet server to add to all outgoing requests. Using it, you’ll be able to specify which sources get cached, and for the way lengthy. There are some things to be aware although earlier than you go including it site-wide.

Certain pages ought to by no means be cached. Anything that requires a consumer to signal in shouldn’t be cached by a CDN, or else you’ll threat displaying one user’s personal information to others. You can nonetheless cache these sorts of pages on the browser aspect alone (by setting Cache-Control to personal). As a common rule, if the web page goes to be the very same for all customers, like your own home web page, you’ll be able to cache it. Static sources, like CSS and pictures, can normally be cached, usually for for much longer.

You’ll additionally need to ensure you’re setting affordable Time-To-Live (TTL) values for every useful resource. TTL controls how lengthy the item will keep in cache earlier than being invalidated, prompting the consumer to request a brand new object. The trade-off right here is between a protracted caching time and fast updates. You don’t need to cache your own home web page for a complete 12 months, since you is likely to be altering one thing on Tuesday. Setting a max age round a couple of minutes on your residence web page is lengthy sufficient to cowl instant reloads, and fast sufficient to enable for swift propagation of updates. However, for static sources like pictures, they could by no means change, and you ought to be positive setting excessive TTL values, at the same time as excessive as two years.

You can at all times use versioned filenames to set off a cache reload. If you launch a brand new model of a CSS fashion sheet, you’ll be able to identify it styles-1.0.1.css, and the consumer’s browser (and any CDNs in entrance of it) will see it as a brand new file that wants to be redownloaded. Additionally, for some CDNs, you’ll be able to situation handbook invalidations to flush the prevailing cache with out altering any filenames.

How to Use Cache-Control in NGINX

Cache-Control has a couple of choices:

  • public – May be cached by anybody, together with browsers and CDNs. Use this for many static objects.
  • personal – Contains delicate knowledge that can’t be cached by CDNs or reverse proxies. The consumer’s browser could cache it regionally. Use this for many authenticated pages.
  • no-cache – Despite the identify, it doesn’t disable caching. The browser should still cache the response for efficiency however should examine with the origin server for updates earlier than utilizing it. Use this in order for you the consumer to revalidate every time
  • no-store – Disables caching solely. Use this just for extremely delicate knowledge that shouldn’t be despatched twice.

When setting the max-age, it’s at all times carried out in seconds. However, NGINX permits for a couple of extra customized values:

  • -1, or off, which is able to flip off caching, and never modify current headers
  • epoch, set to Unix time zero, which is able to explicitly flip off caching and purge all caches (helpful when you’re utilizing NGINX as a reverse proxy)
  • max, which is able to expire when the universe ends, on the 31 of December, 2037
  • 30s, for seconds
  • 1m, for minutes
  • 24h, for hours
  • 3d, for days
  • 1M, for months
  • 2y, for years

Additionally, you’ll be able to add the no-transform directive, which disables any conversions which may be carried out to the useful resource. For instance, some CDNs compress pictures to cut back bandwidth. This directive disables that habits.

For NGINX, you’ll be able to modify the Cache-Control headers with the next directives:

expires 1y;
add_header Cache-Control "public, no-transform";

The first line units the max-age to 1 12 months, and second units the public and no-transform caching settings. You can add this to a server block to apply website broad, however a greater methodology is to match file extensions with a location block to set completely different values relying on the file extension:

location ~* .(?:css|js)$ {
  expires 1y;
  add_header Cache-Control "public";

This location block makes use of an everyday expression match, denoted by the ~. This is helpful for making use of common settings for content material sort. If you need to make exceptions for particular areas, you should use an everyday location block, which is able to take priority over a regex match.

location /profile {
    expires second;
    add_header Cache-Control "public, no-transform";

You may also use the = modifier, which matches paths precisely, and can take priority over a regex match and a normal location block.

Use Surrogate-Control to Modify CDN Behavior

While you’ll be able to disable CDN caching and nonetheless leverage browser caching through the use of Cache-Control: personal, it’s higher to have direct management over it. Most CDNs will respect the Surrogate-Control header, which capabilities precisely the identical as Cache-Control, besides meant just for CDNs. This method, you’ll be able to inform Fastly to do one factor, and the consumer to do one other.

In NGINX, you’ll have to set this header manually, and set the max-age worth as a substitute of utilizing NGINX’s expires directive.

add_header Surrogate-Control "public, max-age=86400";
add_header Cache-Control "public, max-age=120";

You will certainly need to take a look at along with your CDN to confirm that this works—Surrogate-Control is pretty new, and isn’t common.

Source link

This Web site is affiliated with Amazon associates, Clickbank, JVZoo, Sovrn //Commerce, Warrior Plus etc.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *