The Anatomy of the Web – QUIC and the Evolution of the Web

This lecture provides an introduction to the technologies underlying the Web and provides the prerequisite knowledge required to understand the discussion about available techniques to reduce Web latency and QUIC given in the following lectures in this course module. To set the stage, we start with a sketch of the history of the Web, from its early beginnings when the Web merely consisted of simple pages of words and pictures to now when more and more of the Web content is accessed through the so-called ‘Progressive Web Apps’ (PWAs) that essentially transforms the Web experience to something very similar to the experience of traditional desktop and mobile applications. With Web history as a framework, we survey the technologies behind the Web. First, we consider the technologies behind Web 1.0, the early, ‘static’, Web, such as HTTP, HTML, URL, CSS, etc.; Next, the technologies behind Web 2.0, the ‘dynamic’ Web are considered, including server-side scripting, client-side scripting, and AJAX. Finally, we discuss the technologies behind PWAs. We conclude this lecture by introducing Web latency and providing a starting point for the next coming lectures on techniques to reduce Web latency.

Course lecture: The Anatomy of the Web

Practical Exercises

WebPageTest.org. WebPageTest.org is a free Web service that provides a system for testing the performance of Web pages from multiple locations around the world. The resource waterfall created by WebPageTest.org reveals a number of important insights about the structure of the page and the browser processing pipeline. You are strongly encouraged to run this service and experimenting with a number of Web pages of your own choosing.
PageSpeed Insights. PageSpeed Insights is a free web performance tool from Google that measures a Web site’s performance on both desktop and mobile devices against rules for speed and usability. PageSpeed Insights assigns a graded score to a site, and also offers some recommendations about how the site could improve its performance and earn a higher score.

Related readings

The first article, “Clarifying the fundamentals of HTTP”, gives some background on HTTP/1.1 and its shortcomings. The second article, “Understanding Web 2.0”, and the third article, “From Desktop Applications Towards Ajax Web Applications”, provide an overview of the technologies behind Web 2.0. Finally, the fourth article, “Architectural Pattern of Progressive Web and Background Synchronization”, gives an excellent introduction to Progressive Web Apps and discusses a trend that we have seen in the past years that Web technologies, especially those underlying Progressive Web Apps, spill over to mobile app development.

Jeffery C. Mogul. 2002. “Clarifying the fundamentals of HTTP”. In Proceedings of the 11th international conference on World Wide Web (WWW ’02). Association for Computing Machinery, New York, NY, USA, 25–36. (Instructions for how to access)
S. Murugesan, “Understanding Web 2.0”. IT Professional, vol. 9, no. 4, pp. 34-41, July-Aug. 2007. (Instructions for how to access)
J. S. Zepeda and S. V. Chapa, “From Desktop Applications Towards Ajax Web Applications”. 2007 4th International Conference on Electrical and Electronics Engineering, 2007, pp. 193-196. (Instructions for how to access)
K. Behl and G. Raj, “Architectural Pattern of Progressive Web and Background Synchronization”. 2018 International Conference on Advances in Computing and Communication Engineering (ICACCE), 2018, pp. 366-371. (Instructions for how to access)