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.
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`. /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
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 webpagetest.org to figure out if HTTP/2 Server Pushing certain resources has a net positive effect on the overall perceived loading of your application.