HTTP/2 server push is a performance optimization included in version 2 of the HTTP protocol. All secure traffic through Netlify’s servers has been using HTTP/2 since early 2016. It’s important to understand that HTTP/2 requires secure connectivity. Only websites with HTTPS enabled can take advantage of HTTP/2 and its performance optimizations, like server push and header compression.
Currently, 60% of the traffic on Netlify uses HTTPS. HTTPS is enabled by default to all websites on Netlify that use our subdomains. Just change “http” to “https” in your browser bar the next time you see a URL like http://kathleen-booth.netlify.com. We also encourage everyone with their own custom domains to enable HTTPS which we offer by using free certificates with Let’s Encrypt.
Today, we’re enabling HTTP/2 server push for all our customers who use encrypted connections on their websites. You don’t have to do anything to enable it, but you do need to tell us which content to push to the browser. To do that, you have to set HTTP link headers using our Custom HTTP Headers integration. For example, if you want to push assets to the browser when someone loads your website’s homepage, you’ll have to add rules like these to your project’s
/server-push-path Link: </js/example-script.js>; rel=preload; as=script Link: </css/example-style.css>; rel=preload; as=style
Note that server push is not compatible with Netlify’s Asset Optimization. If you use server push on your site, you’ll need to disable CSS and JS minifcation and bundling (under Settings > Build & Deploy > Post processing > Asset optimization).
You can debug if this link works with your favorite browser’s developer tools. When your website is not using server push, you’ll see that resources are loaded in a waterfall, like in this screenshot:
You can also see that each cell in the “Initiator” column says “Other”.
However, once you configure your site to use HTTP/2 server push, you’ll see that the timeline to load all the resources in your page is much shorter. The “Initiator” also changes for the content that was pushed to “Push / Other”, like in the screenshot below:
If want to learn more about HTTP/2 Server Push, our friends at Smashing Magazine wrote a fantastic guide with everything you need to know about it. You can read this article in the next version of Smashing Magazine, completely hosted on Netlify.
In our commitment to open source, we decided to extract this feature from our core edge cache and make it available as an independent plugin for Apache Traffic Server, the cache proxying server that powers our CDN.