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.

Server push with the link response header

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

Link headers and Amazon S3 buckets

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:

1
2
3
4
5
6
7
8

sub vcl_recv {
#FASTLY recv

  if (fastly_info.is_h2 && req.url ~ "^/index.html")
  {
    h2.push("/assets/jquery.js");
  }
}

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.