How to Cache Static Content with Varnish Cache

varnish cacheVarnish Cache is a popular tool due to how quickly it delivers content from the cache and how flexible it can be. Using Varnish Cache’s domain-specific language, Varnish Cache Configuration Language (VCL), users can cache both static and so-called “dynamic” content, also known as the HTML document.

While truly dynamic content which is unique to each user should not be cached (for example a CAPTCHA image that should be different each time or personal account information), using VCL and configuring your website correctly will allow for the pages around personalized content to be cached. If you are interested in learning more about advanced VCL configurations sign up for our tutorial on July 12th. But before you learn advanced Varnish Cache configuration you’ll need to know the basics, namely, how to cache static objects such as images and css files.

Varnish Cache Default VCL and Varnish Cache BuiltIn VCL

One of the main misconceptions about Varnish Cache is that when a user sets up the open-source version on one of their web servers it will immediately start caching content. Unfortunately this is not the case. When a user gets the open-source Varnish Cache they will get two files - default.vcl and builtin.vcl. The default VCL file is blank and only has explanations of each subsection in it. This is the file you will edit to configure the VCL for your specific application.

If the default VCL is not edited, Varnish Cache will go to the builtin VCL. The builtin VCL does have some instructions to cache objects, however because it does things like ignore any URL which has cookies in it and does not override headers set from the server, it often will not cache anything for modern websites. Because of this, when getting started with Varnish Cache users must edit the default VCL to work for their application.

If you have been caching static content with a basic system like Amazon’s CloudFront you could actually see a performance decrease if you switch to Varnish Cache without configuring anything. Although Varnish Cache is a faster and more sophisticated tool which will ultimately provide much better performance results, it requires some configuring to cache content for most visitors.

Because all applications are configured differently at the server, every VCL file will be slightly different. However, below we give one example of a common issue which websites run into when trying to cache static objects.

Setting Cache-Control: Max-Age

One common setting that can prevent Varnish Cache from caching items by default is when the website server settings add headers such as “Cache-Control: Max-age=0” which tell Varnish Cache that the maximum amount of time it can cache that object is 0 seconds, meaning it will not try and cache it at all.

Luckily it is quite simple to configure Varnish Cache to cache static objects using basic commands in VCL. VCL is useful because users can easily override server-side settings without touching the origin server, which is often risky or could require several levels of approval. Because traffic is flowing through Varnish Cache, it can be instructed to ignore or change certain headers that have been set at the website server. Below we get into how to use Varnish Cache to cache static objects by stripping cookies from requests and changing the max-age.

Web servers will often insert headings on objects that say they are uncachable, for example by setting the Max-age at 0 seconds. The below video and instructions will tell you how to change this action in VCL so Varnish Cache will cache static objects. In this demonstration we are using Section’s Developer PoP to build and test Varnish Cache configurations, which allows us to immediately see the impact of VCL changes on page load time in a testing environment.

Example VCL

To override the max-age in VCL you will need to navigate to the backend response section of your VCL, called “sub vcl_backend_response” which takes action after Varnish Cache has seen the headers sent by your website server. If you want to cache all jpg files on your website, you can insert the below code into the backend response section to cache JPG for 3600 seconds or 1 hour:

if (bereq.url ~ “jpg”) {
    set beresp.ttl = 3600s; }

This statement is telling Varnish Cache “If you see a backend request URL containing “jpg,” then set the backend response time to live to 3600 seconds,” which will then cache all jpg files.

You can tell the VCL to cache anything with a filename ending in JPG, PNG, CSS, etc, however there are some security vulnerabilities to setting your VCL in this way, so we recommend using a specific folder to store all your static assets in. You can then tell Varnish Cache to cache anything stored in this folder using code such as the below, which assumes statics are saved in a folder called “assets”:

sub_recv section:
    if (req.url ~ "/assets") {
    return (hash);

sub_backend_response section:
# Set the cache control headers for statics here.
# The cache-control header is for the browser cache.
# The TTL is the cache control header for Varnish Cache.
# The default is 3 days.

    if (bereq.url ~ "/assets") {
        unset beresp.http.set-cookie;
        set beresp.http.cache-control = "public, max-age=259200";
        set beresp.ttl = 3d;
        return (deliver);

As shown in the above video, simply by adding instructions to cache static objects you can dramatically and quickly improve load time. Images that previously took 1 second or longer to load can load in 20ms, giving your user an extremely fast page load time even before you move to more advanced Varnish Cache configurations.

To learn more about Varnish Cache, view our Varnish Cache Fundamentals Tutorial or sign up for our next tutorial on July 12 - Advanced Varnish Cache Configurations: Hole Punching for Personalization. As always feel free to reach out to us with any VCL specific questions via our community forum or visit the Section documentation for more help with Varnish Cache.

varnish cache

Similar Articles