How Streaming Can Improve the World (Wide Web)

Motivation

• The modern web is historically based on files, which are transferred via HTTP
• HTTP was optimized multiple times over the last 30+ years to allow for faster content and code transfer and is now based on streams
• The content and code optimization did not match the protocol evolution, causing slow-loading web pages and unexploited potential for improving loading speed

Issue Impact

• Slow-loading web pages have a significant negative economic impact [1] and are disliked by users [2]
• Web pages get continuously larger, but not faster

History

• In early HTTP versions (0.9, 1.0, partially 1.1), multiple requests to resources such as images or code caused additional delay, as a TCP handshake was required for every request
• As a result, resources were combined to reduce the number of requests, called bundles
• Current HTTP/2 and HTTP/3 features, such as streams, are rarely used to transfer content and code efficiently [4]
• bundling is still popular today, as Webpack uses bundling
• Webpack is the base bundler for popular front-end frameworks such as React, Angular, or Vue

Content vs. Protocol

• HTTP/1.1 was the prevalent standard for 18 years (1997 - 2015)
• At this time, bundling was a valid option to reduce requests and improve the loading speed
• However, with HTTP/2 and HTTP/3, bundling is now harming loading speed due to the reduced overhead of individual requests

Bundling is an anti-pattern in HTTP/2

"In HTTP/2, [bundling] will end up impacting the download-time of other resources as well, because of the way HTTP/2 works.”

Erwin Hofman, 2022, Source: [5]

• Proposed solution: splitting instead of bundling

Possible Solution

• Using the streaming capability of HTTP/2 & 3 to transfer many individual chunks to the client instead of one large bundle
• Split all render-blocking resources (HTML, CSS, and JavaScript) into small, non-render-blocking chunks
• Due to the streaming and rendering capabilities of modern browsers: render a page while chunks are received by the browser (progressive loading, see demo)
• This decreases loading times, as the first chunks will be rendered, independent of the final page size

Challenges

• Splitting is non-trivial. Three major challenges need to be solved in order to fully implement splitting:

Challenge 1: Content usage detection

• Also known as dead code detection, it is required to detect where to split the code
• Solved for CSS with node matching, open challenge for JavaScript [6]

Challenge 2: Code usage location

• To order the chunks into the correct sequence (top to bottom), the location of where CSS and JavaScript code is modifying the DOM is required
• Possible for CSS with Critical, open challenge for JavaScript [6]

Challenge 3: Code usage location

• Transferring a web page as a sequence of chunks to the client via streams and producing a valid HTML structure
• Demo possible, but not a full framework available

---

Sources

1. Google, Deloitte Digital and 55 the data company. 2020. Milliseconds make Millions- A study on how improvements in mobile site speed positively affect a brand's bottom line. https://www2.deloitte.com/content/dam/Deloitte/ie/Documents/Consulting/Milliseconds_Make_Millions_report.pdf [Accessed 5. May 2024].
2. Nah, Fiona Fui-Hoon. "A study on tolerable waiting time: how long are web users willing to wait?." Behaviour & Information Technology 23.3 (2004): 153-163.
3. HTTP Archive, State of the Web report, https://httparchive.org/reports/state-of-the-web [Accessed 6. May 2024]
4. Lucas Vogel and Thomas Springer. 2022. An In-Depth Analysis of Web Page Structure and Efficiency with Focus on Optimization Potential for Initial Page Load. In International Conference on Web Engineering. Springer, Bari, 101–116
5. Erwin Hofman, https://www.erwinhofman.com/blog/two-main-performance-debts-of-http1/ [Accessed 06. May 2024].
6. Lucas Vogel, Thomas Springer and Matthias Wählisch. 2024. From Files to Streams: Revisiting Web Historyand Exploring Potentials for Future Prospects. In Companion Proceedings of the ACM Web Conference 2024 (WWW '24 Companion). Association for Computing Machinery, New York, NY, USA, https://doi.org/10.1145/3589335.3652001