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’s domain-specific language, Varnish 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 configuration you’ll need to know the basics, namely, how to cache static objects such as images and css files.

Varnish Default VCL and Varnish 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 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 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 without configuring anything. Although Varnish 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 from caching items by default is when the website server settings add headers such as “Cache-Control: Max-age=0” which tell Varnish 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 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, 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 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 will cache static objects. In this demonstration we are using section.io’s Developer PoP to build and test Varnish 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 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 “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 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.
# 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 configurations.

To learn more about Varnish, view our Varnish Cache Fundamentals Tutorial or sign up for our next tutorial on July 12 - Advanced Varnish 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.io documentation for more help with Varnish Cache.

varnish cache

Blog Categories

Interested in articles about a specific topic? Click on a category to see all related content.

section.io Sign up

Want to get started improving your website performance, scalability, and security? Sign up for a 14 day free trial of section.io and see what we can do for you!

Get started