What Is HTTP/2 Push?

HTTP/2 Push allows web developers to define specific assets that should be pushed to the client along with the HTML document. Traditionally, the client requesting resources from the server initially receives the HTML file and parses it to determine which assets it needs to request next. Then, further requests are made to the server.

However, with HTTP/2 Push enabled, the server can proactively push assets that are known to be required before the client even begins parsing the HTML file. For example, if we have a website with an index.html file and a style.css file, the browser would traditionally first request the index.html and once received/parsed, would then make another request for the style.css file. However, since we know that the client is going to be requesting the style.css file anyway, we can tell the server to send the style.css to the client at the same time it sends the index.html file.

This makes for a more optimized asset delivery process. That being said, some may think, “Great! So I’ll just tell the server to push all of my assets to the client with the HTML file”. However, there are certain caveats to using HTTP/2 Push and over-using it can actually degrade performance.

What Is HTTP Preload?

HTTP Preload is another method web developers can use to proactively send certain assets to the client before requiring the client to request each asset sequentially. The Preload directive however works differently from HTTP/2 Push. With the Preload directive you can tell the browser to request certain high-priority assets, which are otherwise discovered late, once the HTML file has been parsed.

Consider the following example: a browser makes a request for index.html. The browser receives the file and upon parsing it finds that it will need to request style.css and within that css file a font.ttf file is referenced. Instead of requesting style.css and font.ttf sequentially, preload allows you to send a request to the server for both style.css and font.ttf at the same time. Since font.ttf is an asset that will be needed in the near future, preloading it would be an efficient way to request it.

This makes for a more optimized asset delivery process. That being said, some may think, “Great! So I’ll just tell the server to push all of my assets to the client with the HTML file”. However, there are certain caveats to using HTTP/2 Push and over-using it can actually degrade performance.