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.

http-vs-http2-700

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.

https://ma.ttias.be/service-side-push-http2-nghttp2/

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.