Google Cloud CDN and Varnish Cache can accelerate your end user experience

Advanced Caching Part 1: Google Cloud CDN and Varnish

Google Cloud CDN is a lightweight content delivery network solution. It offsets the load from your backend. And of course, it dramatically decreases HTTP response time for your end users. When this is not enough, there is Varnish Cache.

This blogpost walks you through implementing Varnish’s advanced caching rules in Google Cloud. This can be done behind the Google Cloud CDN, or completely on its own. It addresses the need of editing the HTML response body, so that the pseudo-dynamic content can be cached.

Varnish Cache closes the CDN gap with Google Cloud. Varnish allows you to set caching rules declaratively. This is done using a feature called Edge Side Includes (ESIs).

Edge Side Includes (ESIs) allow editing the HTML response directly on the Varnish cache server

1. Google Cloud Marketplace
Login to your Google Cloud Platform (GCP) console and navigate to the Marketplace

Trusted VM images of popular services are in the Google Cloud Marketplace

2. Select a Varnish Image
Select a Varnish Cache image*, to be installed on a Google Compute Engine (GCE) virtual machine (VM)

Varnish Cache is a reverse proxy with advanced caching of HTML (and other) responses

3. Deploy the Image
Launching will navigate you to the GCE section of the GCP console

VM images can be launch directly from the Marketplace onto a GCE instance

4. Select Machine Type
Depending on your use case, you may want to select powerful VM
Alternatively, consider manually deploying Varnish in a Google Kubernetes Engine (GKE) cluster

For development purposes a single 2-CPU machine was sufficient

5. The Image Deploys Seamlessly

The GCP Marketplace image graciously configures the VM and networking ports for you

The Varnish image is technically a container, under the hood

6. Edge Side Includes (link)
ESIs allow you to inject content into the response body
On the Varnish machine, create web file that has the <esi> tag
Here we put PHP in the HTML file, to demonstrate scripting apart from ESI

The <esi> tag references a separate HTML file

Next we create a second web file, which the above <esi> tag references
This second file contains JavaScript, which will run in the end user’s browser

The HTML file contains JavaScript to dynamically populate the response

7. ESI Works in Google Cloud!
In the below HTTP response, the PHP code runs on the server
However, the Varnish <esi> tag inserted the JavaScript as desired
This HTTP response is thus cached by Varnish
Effectively this is caching of a pseudo-dynamic web page

Varnish’s ESI service builds the response body, inserting JavaScript, hence caching a pseudo-dynamic response

Google Cloud CDN Best Practices (link)