What Is HTTP/2 Server Push?

Server Push is a feature of HTTP/2 that allows a server or edge network to send resources back to a web browser even though it didn’t ask for them. Cloudflare supports HTTP/2 Server Push for all customers on our network.

HTTP/2 Server Push is a modern, more efficient equivalent to the common practice of inlining assets in HTTP/1.1. Inlining is when you convert your external JavaScript and CSS resources into <script> and <style> elements in your HTML page. The goal is to minimize the number of HTTP requests between the browser and the server. Server Push accomplishes the same thing, but allows assets to be cached independently so that you’re not sending the same inline CSS styles with every single web page your visitors request.

Enabling Server Push

Cloudflare supports HTTP/2 Server Push via the Link header. To make use of Server Push, most applications will need to change their code to include a Link header with any requests that have pushable assets.

For example, if you have a web page called page.html that requires /css/style.css, you need to add the following header to page.html:

Link: </css/style.css>; rel=preload;

This tells our edge network to begin pushing /css/style.css every time a visitor asks for page.html. If style.css is already in the local browser cache, the browser will ignore the push and cancel the download. Otherwise, when it discovers /css/style.css while rendering the HTML, the browser will use the pushed asset instead of going back to the server. This removes an unnecessary round-trip that would have occurred without Server Push.

Choosing What to Push

Server Push is a fundamental change to HTTP. Web servers used to only be able to respond to requests from clients, but now they can actively push out content to browsers. This opens the door to several new types of web optimization. Some of the most common use cases:

Required Assets – The most obvious candidates for Server Push are all of the CSS, JavaScript, and image assets required by a web page.
Uncacheable Assets – Pushing dynamic assets means that they’ll get to the browser that much faster, reducing perceived page load time.
Likely Next Pages – By pushing the next page that a user is likely to load (e.g., the link they’re hovering over), Server Push can make it look like it loads instantaneously.
Redirects – It’s also possible to push arbitrary redirects. This lets you control the user’s browser cache.