SECRET OF CSS

Use Varnish HTTP Cache and Docker To Boost Website Speed | by Paul Knulst | Sep, 2022


Boost your website’s performance by 20%

Use Varnish HTTP Cache And Docker To Boost Website Speed
Photo by Julian Hochgesang on Unsplash

To boost the performance of Paul’s dev blog and improve the user experience for all visitors, I decided to look for an opportunity to integrate an HTTP cache into my Docker Swarm environment.

After researching for a long time and also asking other people on Reddit (Unfortunately, no one could help me), I found a solution that fits my expectations.

While researching, I learned about Varnish which is a web application accelerator that is also known as a caching HTTP reverse proxy. It can be installed in front of any server that uses HTTP to cache the contents. It is really, really fast and normally speeds up delivery with a factor of 300–1000x, decreases load times, and can handle traffic peaks.

A high-level overview of what Varnish does can be seen in this video:

What is Varnish Cache? Explanation Video!

My new setup includes a Varnish HTTP Cache server deployed using Docker in my Docker Swarm environment. It is positioned between my Traefik Proxy and my Ghost blog. In this setup, Varnish is used to cache various static content on the page, such as JavaScript, CSS, Images, and text files.

Ghost Blog Service with Traefik Before and After use of Varnish HTTP Cache
Ghost Blog Service with Traefik Before and After use of Varnish HTTP Cache

To benchmark my website, I use the Lighthouse extension from Google, giftofspeed.com, and tools.pingdom.com. All test sites load the entire site as if we’re in the browser. I ran different tests from different countries with Varnish enabled and without. While testing, I could see a performance increase by ~20%.

For example, on giftofspeed.com, I tested the same URL several times with and without Varnish HTTP Cache enabled and got the following results:

Without Varnish HTTP Cache

0*Gn4GkkztRuRTuPwD

With Varnish HTTP Cache

0*OKZ6TeqmM SbjXho

First, ensure you have docker and docker-compose installed. Also, you need a Traefik Load balancer that forwards requests to my Ghost blog. All rules (labels) within the Compose file will be based on my personal Traefik installation.

Now, to set up a Varnish HTTP Cache between my Ghost blog and Traefik Proxy, I extend the Compose file for this blog (read about how I set it up here) by first adding a varnish section and then moving all labels from my ghost service to the varnish service. Then I change the load balancer server port from 2368 (Ghost port) to 80 (varnish port).

Another necessary change is that networks for the ghost service is changed in that it only has default and the varnish service has default and traefik-public. The last change will be adding a config to the Compose file containing the Varnish Config.

The resulting part of the Compose file will look like this:

Within the ghost service, we defined a config pointing to a default.vcl which will look like this:

In this file, I declared some special rules for the Varnish HTTP cache:

  • Set the backend to ghost:2368 because within the internal default network, ghost is reachable over ghost:2368.
  • Remove /ghost/..., /p/..., and /admin/... from the cache because the admin menu should not be cached.
  • Remove the root URL of this blog to never have an outdated list of articles because of caching.
  • Add an URL (/testclear) to manually clear the cache.

I create the Varnish configuration file within the same folder as the docker-compose.

Now, I could deploy the complete Compose file that you can download on GitHub Gist with this command:

$ docker stack deploy -c docker-compose.yml blog

If you want to use it, please update the Host, the database (MySQL), and the mail settings.

Adjusting Varnish Config

If I ever want to change the Varnish config, it is necessary to change the config name because you cannot change configs within a Docker environment. You can easily change it to a new name in the Compose file, deploy it, and then delete the old key to alter between two config names.

Afterward, you must reload the config because it will not be applied automatically. To do this, I switched to the server where my Varnish container is deployed and use docker exec to reload the Varnish config:

$ docker exec YOUR_VARNISH_CONTAINER varnishreload

If you blindly downloaded the file within the GitHub Gist, it won’t work without setting the needed variables for Mail, MySQL, and Host. Have a look at this tutorial explaining Ghost setup with Docker. Also, adjust the Mysql settings because the tutorial for Ghost was created before switching to MySQL and this part is missing. But, I am working on a simple How-To which will be published in some weeks.

Congratulations if you followed my approach you have just installed your own Ghost blog with a Varnish HTTP Cache which will improve the performance!

The full Compose file can be found within the GitHub Gist I created for this article. If you still have questions about setting up a Ghost blog, you can follow my tutorial about doing this in Docker Swarm.

This is the end of this tutorial. Hopefully, you are now able to set up your installation. If you enjoyed reading this article, consider commenting your valuable thoughts in the comments section. I would love to hear your feedback about Varnish HTTP Cache. Furthermore, share this article with fellow bloggers to help them to boost their blog performance!

Want to Connect?You can find me on my Personal Blog, LinkedIn, Twitter, and GitHub.





News Credit

%d bloggers like this: