HTTP/2 Server Push Explained – StackPath Help

Did you know that the StackPath CDN can push assets to browsers from cache via HTTP/2 Server Push? Well, it does!

If you are currently utilizing HTTP/2 Server Push to optimize the delivery of assets on your site, you can configure the CDN to push those assets from cache seamlessly without the need to adjust the existing headers that you are using to achieve this functionality!

This article aims to explain and clarify the benefits of this HTTP/2 functionality, how StackPath has implemented this as a feature for our CDN as well as how it might be able to benefit your website or application.

Enabling this feature will not enable HTTP/2 Server Push on your origin if you are not already using it. This feature simply enables the CDN to push assets via HTTP/2 Server Push from CDN cache.

You will still need to configure your assets with the proper headers at your origin to leverage the Server Push functionality within the HTTP/2 protocol.

For more information on the technology and how you can configure your server to leverage it, please check out this great article on HTTP/2 Server Push by Smashing Magazine.

What is HTTP/2 Server Push

A webpage is made up of many assets that must all be requested 1-by-1 by a browser in order to load. HTTP/2 in and of itself allows for browsers to make multiple individual requests simultaneously to a server, helping to reduce load times. The Server Push is HTTP/2-specific functionality that takes this one step further!

In short, HTTP/2 Server Push allows for additional assets to be directly pushed to a visitor's browser without the need for subsequent HTTP requests to fetch them. Helping to even further reduce load times and help sites load more efficiently. This is done by using Resource Hints like rel=preload in the Link header you are sending from your origin.

A common use case would be to sending a Link header with an HTML file, specifying a CSS File to be preloaded along with it. The header sent with that HTML file might look something like this:

Link: "https://example.com/css/styles.css; rel=preload; as=style"

We can see this header contains the path to the CSS file as well as the preload resource hint.

If this header were sent from the origin server with the index.html file for Example.com, then the CSS file at example.com/css/styles.css would be pushed to the browser via HTTP/2 rather than be requested in a subsequent request, thus possibly helping with the page's load time.

This is a very simple and common example, but can be used to preload any type of file, opening-up many opportunities to optimize your site once one understands how to use Server Push to their advantage.

How does HTTP/2 Server Push work on StackPath?

Being able to set these Link headers to preload content is great and all, but you might be asking yourself the question:

"If I have to set these headers at my origin, then where does the CDN come into play?"

Simply put, the HTTP/2 Server Push setting allows you to specify to the CDN what Link headers you are sending for assets to be preloaded via Server Push.

The CDN will then see if that asset is in-cache, and if so will push to the browser from the CDN cache, and if it is not cached, the push will then come from the origin as it normally would if the CDN were not there. So let's revisit the example above in a CDN context:

The Administrator of Example.com is sending the Link: "<https://example.com/css/styles.css> rel=preload; as=style"header with the site's index.html,
The admin could specify that header in the StackPath portal to have the CDN serve styles.css from cache via Server Push.
This would help save on Bandwidth to Origin and reduce the number of HTTP requests needed to load the page.

The Link header is just a common example, StackPath's HTTP/2 Server Push feature also works with custom headers, just specify the key in place of the Link header key.

Now that we know how this feature works in a CDN context, Let's take a look at how to actually enable this feature in the StackPath Portal!

How to Enable HTTP/2 Server Push

Enabling HTTP/2 Server Push can be done very easily right from inside the StackPath Portal.

Navigate to your CDN Site
Select Settings from the navigation bar on the left side
Next to the HTTP/2 Server Push setting, select the gray toggle, labeled OFF by default, to turn the feature ON.
You should now be given the option to specify the Link header you are sending to have an asset pushed to the browser:
The default header the CDN will look for to preload assets is the Link header as this is the header used in the HTTP/2 Standard for this feature.
1. For example, many admins like to have some CSS load along side their HTML page documents, something like https://example.com/css/styles.css
2. You can then configure your origin's .htaccess to insert the header, Link: "<https://example.com/css/styles.css> rel=preload; as=style" into the response headers for a given asset.
3. Now any time the CDN sees this Link response header on an asset, it will attempt to push that CSS file from cache using Server Push rather than making another request for it.
Select Save to finalize the Server Push configuration for this file.

Now, whenever a page is requested through the CDN the CSS file specified in the HTTP/2 Server Push setting will be automatically pushed to the browser without needing to be requested!

Verifying that Server Push is Working

So now you have configured your server to use HTTP/2 Server Push and enabled the CDN to serve those assets from cache, how can we see this working?

There are a few different ways to see this working in action, but for the sake of this article, we will focus on two of them.

Using your Browser Inspect Tool

You can use the Inspect Tool in your browser to look at the Waterfall Timings for an asset that should be getting Pushed to the browser:

With your browser open, open the Inspect tool by pressing the F11 key or via Right Click>>Inspect Element
Select the Network tab from the inspect tool and load your site
Once the list of HTTP requests loads within the network tab, find the request for the file being loaded via Server Push
Hover over the Waterfall Timing line for the asset to see the timing statistics for the pushed asset. (Chrome used in this example)
If the asset is being pushed, you will see the statistics as shown in the above example.

Using Command Line Tool - nghttp

nghttp2 is a tool that allows you to analyze responses from an HTTP/2 Server. In order to see what assets are being pushed via HTTP/2 Server Push, you can use the command to generate a list of assets for that page:

Open the command line terminal on your computer
run the following command, replacing example.com with your own domain:
1. nghttps -ans https://example.com

The return you get should be a list of assets loading on that site, where any assets that are being pushed via HTTP/2 are marked with an asterisk,* . (Note files shown in your terminal may vary from this example)

id responseEnd requestStart process code size request path

    13 +50.28ms +1.07ms 49.21ms 200 3K /

    2 +50.47ms * +42.10ms 8.37ms 200 2K /css/global.css

    4 +50.56ms * +42.15ms 8.41ms 200 157 /css/fonts-loaded.css

    6 +50.59ms * +42.16ms 8.43ms 200 279 /js/ga.js

    8 +50.62ms * +42.17ms 8.44ms 200 243 /js/load-fonts.js

    17 +87.17ms +50.65ms 36.51ms 200 668 /js/lazyload.js

    15 +87.21ms +50.65ms 36.56ms 200 2K /img/global/book-1x.png

    19 +87.23ms +50.65ms 36.58ms 200 138 /js/debounce.js

    21 +87.25ms +50.65ms 36.60ms 200 240 /js/nav.js

    23 +87.27ms +50.65ms 36.62ms 200 302 /js/attach-nav.js

If you are not seeing indications in that you have files being pushed via HTTP/2, then you may need to look into your origin configuration to ensure that you are sending the correct headers to leverage the Server Push function of HTTP/2.

We certainly hope this article was helpful to you in understanding how the CDN can work in concert with your current HTTP/2 Server Push implementation to further improve the experience for your users.

As always, if you have any questions or concerns about this or any other Help Center article, do not hesitate to reach out to support via Live Chat, or email to hi@stackpath.com. We are here 24/7 and always happy to help!

Was this article helpful?

Help Center