HTTP/2 Server Push with Netlify

Everyone I know who uses Netlify for the first time is blown away by its simplicity. But sometimes there are situations where we need to do some advanced server configuration in order to serve our web applications as fast as possible.

But as I recently discovered, configuring advanced techniques like using HTTP/2 server push is also quite easy to set up with Netlify.

HTTP/2 Server Pushed CSS file in development tools.

The download of font.css is initiated by HTTP/2 Server Push

The _headers file

To enable HTTP/2 Server Push for your website on Netlify, you can create a file called _headers and place it in the directory served by Netlify. To enable HTTP/2 Server Push for certain resources, you can create a _headers file like the following.

# HTTP/2 Server Push for every site.
  Link: </css/font.css>; rel=preload; as=style
  Link: </js/scripts.js>; rel=preload; as=script

# Only push to `/my/awesome/page`.
  Link: </css/font.css>; rel=preload; as=style
  Link: </js/scripts.js>; rel=preload; as=script

Bonus: Netlify HTTP/2 Server Push with Nuxt.js

If you rely on Nuxt.js for building your static sites, you can use the wonderful nuxt-netlify-http2-server-push Nuxt.js module to automatically generate the _headers file for you every time you run nuxt generate.

Wrapping it up

HTTP/2 Server Push can be a potent solution for speeding up the loading time of your application. But remember, it’s not a silver bullet! You should absolutely run a variety of benchmarks like Lighthouse and to figure out if HTTP/2 Server Pushing certain resources has a net positive effect on the overall perceived loading of your application.

Do you want to learn how to build advanced Vue.js applications?

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.

Do you enjoy reading my blog?

You can buy me a ☕️ on Ko-fi!