How can I use ESI tag for html script including?

Question

I'm trying to reduce the number of requests' connections of js scripts and one option is usage of esi tag.

Like from: <script src="https://whatever.min.js"></script>

To: <script><esi:include src="https://whatever.min.js"/></script> But now cdn is giving 503 error for it and trying to treat script like page block. Doesn't work for fastly and varnish

Answer 1

NOTE: Ideally you should share a bit more of your VCL code so we can see which VCL subroutine you're triggering the esi statement from and understand what else might be affecting the ESI parser from being executed.

But just to clarify, in case other readers are unfamiliar, that ESI tags should be placed within HTML content (i.e. your origin server would serve HTML containing <esi:> tags) and Varnish will be instructed that the response needs to have those ESI tags parsed/fetched.

Varnish will then make separate sequential fetches for each esi:include tag it encounters and ensure the response is placed in the relevant location of the HTML that is served to the client.

Here is an example that is using ESI (it's built with Fastly's Fiddle tool): https://fiddle.fastly.dev/fiddle/f2842f47

You'll need to execute the esi statement to let Varnish know that the ESI parser is required.

I would recommend you read Fastly's ESI reference page: https://developer.fastly.com/reference/vcl/statements/esi/

If you require any additional support please contact support@fastly.com

Thanks!

---

Other reference material:

• https://book.varnish-software.com/4.0/chapters/Content_Composition.html

Answer 2

You're right, Varnish doesn't follow redirects while processing ESI tags.

Here's some code you could add to your VCL to mitigate this:

sub vcl_deliver {
    if (((resp.status == 301) || (resp.status == 302)) && req.esi_level > 0) {
        set req.url = regsub(resp.http.Location,"^https?://[^/]+(.*)","\1");
        return(restart);
    }
}