HTTP/2 server push

HTTP/2 server push allows you to set up rules that enable Fastly to pre-emptively load and then send responses to an HTTP/2-compliant client before that client requests them. You can initiate an HTTP/2 server push via a response header or VCL function.

Fastly recognizes link headers with the preload keyword sent by an origin server and pushes the designated resource to a client. For example, this link response header triggers an HTTP/2 push:

link: </assets/jquery.js>; rel=preload; as=script

We support multiple link headers and multiple assets in one link header:

link: </assets/jquery.js>; rel=preload; as=script, </assets/base.css>; rel=preload; as=style

Additional attributes used in the link header can further control server push and how the header itself is handled. If no additional attributes are included, the link header will trigger server push and be forwarded to the client:

link: </assets/jquery.js>; rel=preload; as=script

If used with the nopush directive, the header will not trigger a push and will be passed as is to the client:

link: </assets/jquery.js>; rel=preload; as=script; nopush

If used with the x-http2-push-only directive, the header will trigger a server push but will be subsequently removed and not forwarded to the client:

link: </assets/jquery.js>; rel=preload; as=script; x-http2-push-only

The attributes can be mixed and matched if needed:

link: </assets/jquery.js>; rel=preload; as=script, </assets/base.css>; rel=preload; as=style; nopush, </assets/main.css>; rel=preload; as=style; x-http2-push-only

If you're using an Amazon Simple Storage Service (S3) bucket as your origin server, you can still use link headers by applying a cache setting condition like this one:

set beresp.http.Link = beresp.http.x-amz-meta-Link

Server push with the h2.push() function

Server push can also be triggered with the h2.push() VCL function. The asset to be pushed is passed to the function as a parameter. For example:

1sub vcl_recv {
2#FASTLY recv
4 if (fastly_info.is_h2 && req.url ~ "^/index.html")
5 {
6 h2.push("/assets/jquery.js");
7 }

The h2.push() function triggers server push as soon as it's called, which removes the need for a link header to arrive with a server response. This means assets can be pushed to the client before the response for the request that triggered the push is received from the server, accelerating their delivery.

Was this guide helpful?

Do not use this form to send sensitive information. If you need assistance, contact support. This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.