HTTP/2 Gotcha for Front-end developers

HTTP/2 is the new version of HyperText Transport Protocol (HTTP), which was finalized earlier this year.

HTTP/2 uses a single, multiplexed connection, replacing the multiple connections per domain
that browsers opened up in HTTP/1.x. HTTP/2 compresses header data and sends it in a
concise, binary format, rather than the plain text format used previously. By using a single connection, HTTP/2 reduces the need for several popular HTTP/1.x…..

For front-end developer, this just means that HTTP/2 will load the page faster. haha

I am not a server guy and I am not interested in technical details of HTTP/2.

However, there are few important principals when developing in HTTP/2 environment as a front-end developer.

Since HTTP/2 allows server to accepts/connects multiple requests simultaneously (this is called multiplexing), concatenating/combining js files into one large file will not help the load speed. According to Ilya Grigorik at Google, this practice will actually be harmful to load speed.


So now, creating fragmented js files and referencing them is a recommended practice. haha

Another notable feature is the “server side push” is another notable feature of HTTP/2.

Since the server pushes down css & js to the browser that supports HTTP/2 (most browsers do support HTTP/2 now), inlining css & js is no longer needed.