Almost all JavaScript applications these days will utilize a build process. Even if you’re not transpiling from ES2015 or TypeScript, running some sort of concatenation and minification processes on your code has become standard practice. The reason for this is that making an HTTP request involves quite a bit of overhead. Serving fewer, larger files works out more efficient than many smaller ones. With the adoption of the next version of the web’s underlying protocol, HTTP/2, it may be time to rethink best practices.
HTTP/2 is based on Google’s SPDY protocol, which was developed to improve on page load latency and improve security over the existing HTTP 1.1 standard. Work on the new protocol began in 2012, with the first development version being a direct copy of SPDY. The finalized standard was published in May 2015, and on May of this year, Google announced that they would no longer support SPDY in Chrome.
How is HTTP/2 different from its predecessor? One major difference is that HTTP/2 is a binary protocol, not text-based. This allows it to be more compact, efficient to parse, and less prone to errors. One of the key advantages of the protocol is that it is multiplexed, meaning that multiple files can be transferred on a single connection. Another touted feature is Server Push, which allows the server to transfer resources to the client before they’re requested, pre-filling the cache.
Support for the new protocol is pretty good, including all the major browsers. Server-side, Apache2, Nginx and Microsoft IIS all support it, along with Node.js version 5.0 and above. Most of the browser vendors have stated that they will only be supporting HTTP/2 over TLS connections, although with the advent of Let’s Encrypt providing free SSL certificates, that’s an easy requirement to meet. According to figures collected by W3Techs in June of this year, around 8.4% of the top 10 million websites now support the new protocol. If you’re a Chrome user, you can use the HTTP/2 and SPDY indicator extension to tell you at a glance which of the sites you visit are served via HTTP/2.
What does the adoption of HTTP/2 mean for JavaScript developers? Our current practice of concatenating multiple files into bundles makes it difficult for the browser to effectively cache our code: changing a single line of code in one module requires the whole bundled file to be re-downloaded. As HTTP/2’s multiplexing makes requests relatively inexpensive, we can opt to split our code into smaller bundles and make better use of caching to ensure our apps are making efficient use of users’ bandwidth.
But if requests are cheap, surely we should just forego bundling altogether? This seems to make sense at first glance, but the cost of HTTP requests is not the only factor to consider. Web servers also have limits on how efficiently they can serve large numbers of files. As the JavaScript community has moved towards a proliferation of smaller, more focused modules, serving these files to the client without some sort of bundling would be less than ideal. On top of that, combining files together allows for better compression, saving bandwidth.
So, when should you think about making the switch to HTTP/2? The answer is, it depends. Although browser support is very good, if your target audience is still stuck on older versions of IE then you’re out of luck, so do check your visitor stats to see if this is something that’s likely to benefit the majority of your users. What I take away from all this is that support and adoption of the new protocol are surprisingly far along and, as developers, this is a trend we cannot afford to ignore.
What sort of bundling strategy do you employ? Are you thinking of making the switch to HTTP/2, or maybe you already have? Let me know in the comments!
Frequently Asked Questions (FAQs) about File Bundling and HTTP/2
What is the main advantage of HTTP/2 over HTTP/1?
HTTP/2 offers several advantages over HTTP/1. The most significant one is its ability to multiplex multiple requests over a single TCP connection. This feature reduces the latency that can occur when multiple requests are made, improving the overall performance of web applications. HTTP/2 also supports header compression, which reduces overhead, and server push, which allows servers to send resources to the client before they are requested.
How does file bundling work in HTTP/2?
In HTTP/2, file bundling is not necessary as it was in HTTP/1. This is because HTTP/2 can handle multiple requests at once over a single connection, eliminating the need for bundling files together to reduce the number of requests. Instead, files can be loaded individually, which can improve cache utilization and make it easier to manage and update files.
What is multiplexing in HTTP/2?
Multiplexing is a key feature of HTTP/2 that allows multiple requests and responses to be sent simultaneously over a single TCP connection. This is a significant improvement over HTTP/1, which could only handle one request per connection. Multiplexing reduces the latency associated with multiple requests, improving the performance of web applications.
How does server push work in HTTP/2?
Server push is a feature in HTTP/2 that allows a server to send resources to a client before they are requested. This can improve the performance of a web application by reducing the time it takes for the client to receive and render resources. The server can push resources it anticipates the client will need, based on the initial request.
Why is file bundling considered a bad practice in HTTP/2?
File bundling is considered a bad practice in HTTP/2 because it negates some of the protocol’s key benefits. HTTP/2 is designed to handle multiple requests simultaneously over a single connection, so bundling files together can actually reduce performance by creating larger, more complex files that take longer to process and update.
What is the impact of HTTP/2 on SEO?
HTTP/2 can have a positive impact on SEO because it improves the speed and performance of a website. Faster websites tend to rank higher in search engine results, as page load speed is a ranking factor. Additionally, HTTP/2’s features like multiplexing and server push can improve user experience, which can also contribute to better SEO.
How does HTTP/2 improve security?
HTTP/2 improves security by supporting the use of HTTPS, which encrypts data sent between the client and server. This can protect sensitive information from being intercepted or tampered with during transmission. Additionally, HTTP/2’s binary framing mechanism can help protect against attacks that target the HTTP/1 protocol.
How does HTTP/2 affect mobile browsing?
HTTP/2 can significantly improve mobile browsing by reducing latency and improving the speed of web applications. This is particularly beneficial for mobile users, who often have slower internet connections. HTTP/2’s multiplexing and server push features can also improve the performance of mobile applications.
Can I use HTTP/2 with older browsers?
Most modern browsers support HTTP/2, but older browsers may not. If a client does not support HTTP/2, the server will typically fall back to using HTTP/1. It’s important to note that while HTTP/2 has many benefits, it’s not a replacement for good coding practices and should be used as part of a broader performance strategy.
How can I check if my website is using HTTP/2?
There are several online tools that can check if a website is using HTTP/2, such as the HTTP/2 Test. You can also check manually by inspecting the network protocol in your browser’s developer tools. If your website is not using HTTP/2, you may need to update your server software or configuration.
Nilson JacquesNilson is a full-stack web developer who has been working with computers and the web for over a decade. A former hardware technician, and network administrator. Nilson is now currently co-founder and developer of a company developing web applications for the construction industry. You can also find Nilson on the SitePoint Forums as a mentor.
