·

photo credit: BGP09 172 via photopin (license)

How to setup Varnish from scratch

Tags: ,

Lately I’ve been boosting performance in Magento by using Varnish cache. Now, I think most of you already know what Varnish is, so I’m not going to spend time explaining how awesome it is. Instead I’ll try to give a more in-depth explanation in this article on how Varnish works step-by-step and how it can be configured to boost the performance of your website.

A simple website

Let’s say we have a very simple Hello World website imaginable. It’s content looks a bit like this:

Now this is a very lightweight site and your server will most likely don’t have any problems with serving this page numerous times a second. But when your site becomes more complex and much stuff has te be done by the server (like PHP stuff and database queries), chances are that your server will become less responsive.
To simulate this stress on the server, let’s add a little timeout to our page, mimicking a 2-second page load:

Varnish to the rescue!

Varnish is a reverse proxy. That means that it takes the request of the visitor and only makes the web server do its magic if it doesn’t already have a cached version of the page (or if some other requirements are set, but more on that later on).
To install Varnish, read the documentation. But for most systems it’s easy to install using the package manager. On Ubuntu for example, you simply type:

Start Varnish by typing the following after installation:

Now the first thing Varnish needs to know is where to fetch its content from. For a default web server, this most likely is port 80 of your local host. To set this up, edit /etc/varnish/default.vcl  and change the top lines to this:

These lines tell Varnish that it’s backend (the source of what needs-to-be-cached) is located at 127.0.0.1:80. The next thing we need to tell Varnish is where it’s front end is located. By default this is 127.0.0.1:8080, but just for the fun of it (and because my local Vagrant box is already occupying that port), let’s set it to port 8000. We can do this by manually loading Varnish like this:

You can also edit the varnish  file located at /etc/default  and set the parameters for the default Varnish daemon:

If you now go and visit your very simple site on port 8000, you’ll see your site. Only this time, it’s served by Varnish! Go ahead! Check the response headers:


The first load might take a while (because of our sleep() -command), but all the requests that follow or blazing fast!
Pretty neat huh? By the way, if you run into the same problem I had and the content doesn’t seem to be cached at all, chances are that you have your cache disabled in Chrome when the dev tools are open. This is a configuration setting of your web inspector:

Screen Shot 2015-03-24 at 08.21.11
When this flag is enabled, nothing is cached. This is because Varnish respects the cache-control headers that are sent by the browser. Another cause could be that you have a cookies set in your browser: Varnish doesn’t cache by default when there are (any) cookies present. Delete the cookies and you’re ready to go!

Switch the ports

If you want to put Varnish on port 80, all you have to do is swap the ports of Varnish and your backend server (Apache or Nginx for example). For instance, you can change your default.vcl  to:

And change your specific site virtual host file in Apache from:

to:

Also edit your ports.conf -file to only listen to port 8000, otherwise Apache will keep port 80 occupied and Varnish will not start.
On Nginx, edit your site-specific configuration-file, and change the following line inside your specific server{} -block:

to

ESI Blocks

A nice feature about Varnish is the use of ESI Blocks: these are pieces of content that are included by Varnish. This allows you to cache a whole page, but exclude some specific areas, or areas that require a lower TTL.
Edit index.php  so it looks like this:

Notice the line <esi:include src=”time.php”/> . This line tells Varnish to make a request to the server to load time.php .
Let’s add the file: time.php :

As you might have noticed, I added a header to the file. This is not a feature that comes by default by Varnish, but I use it to set a TTL (Time To Live) for this document. You see, the beauty of ESI blocks, is that these files are also cached by Varnish. So we can set different TTL’s for different parts of our site. To make this work, we need to make a tiny little adjustment to /etc/varnish/default.vcl :

This little VCL subroutine does 2 things:

  1. It enabled ESI processing.
  2. It checks for a ‘X-Cache-ttl’-header, and if found it sets the TTL of the file to the value specified in the header.

If you now go and check your page, you’ll see the the main site has a ‘frozen’ timestamp, but that the block that is included with ESI is reload every second. The main benefit of this is that our server only have to process the time.php -file, and not the complete index.php -file.

In conclusion

This article explains the very basics of what Varnish is and how you can us it to improve the performance of your site. We’ve handled:

  • Installation of Varnish
  • Basic caching setup
  • Inclusion of ESI Blocks

In the follow-up on this article I’ll show you how to deal with user sessions.

Visitors give this article an average rating of 4.8 out of 5.

How would you rate this article?

Leave a Reply