HTTP2 Server Push, Link Preload And Resource Hints
# HTTP/2 Server Push, Link Preload And Resource Hints We've become performance obsessed, it's important and the obsession shows. Firtunately we're also given the tools to acommodate the need for speed. We'll look at three ways of helping our servers give us the resources we need before we actually need them. We're not covering service workers in this post. Even thoough they are very much a performance feature they are client-side and we want to discuss server side performance improvements or improvements t hat are used directly from the HTML code, not Javascript. ## What is Server Push Accessing websites has always followed a request and response pattern. The user sends a request to a remote server, and with some delay, the server responds with the requested content. The initial request to a web server is usually for an HTML document. The server returns the requested HTML resource. The browser parses the HTML and discoversreferences to other assets (style sheets, scripts, fonts and images). The browser requests these new assets which runs the process again (a stylesheet may have links to fonts or to images being used as background). The problem with this mechanism is that users must wait for the browser to discover and retrieve critical assets until after an HTML document has been downloaded. This delays rendering and increases load times. ## What problem does server push solve? With server push we now have a way to preemptively "push" assets to the browser before the browser explicitly request them. If we do this carefully then we can increase perceived performance by sending things we know users are going to need. Let's say that our site uses the same fonts throughout and it uses one common stylesheet named `main.css`. When the user requests our site's main page, `index.html` we can push these files we know we'll need right after we send the reponse for `index.html`. This push will increase perceived speed because it enables the browser to rende the page faster than waiting for the server to respond with the HTML file and then parsing it to discover additional resources that it must request and parse. Server push also acts as a suitable alternative for a number of HTTP/1-specific optimizations, such as inlining CSS and JavaScript directly into HTML, as well as using the data URI scheme to embed binary data into CSS and HTML. If you inline CSS into an HTML document within `