Going for Speed: Full-Stack Performance Engineering in Modern Web-Based Applications

(The Web Conference 2021 Tutorial)

Presentation      Schedule      Handout      Contact

Slides (Frontend, Network, Backend, Tracking)
Videos (Frontend, Network, Backend, Tracking)

Wolfram Wingerath† (wolfram.wingerath@baqend.com), Benjamin Wollmer†§ (benjamin.wollmer@baqend.com), Felix Gessert† (felix.gessert@baqend.com), Stephan Succo† (stephan.succo@baqend.com), Norbert Ritter§ (norbert.ritter@informatik.uni-hamburg.de)

† Baqend, Hamburg, Germany (https://baqend.com)
§ University of Hamburg (Databases and Information Systems, DBIS), Hamburg, Germany
 (https://vsis-www.informatik.uni-hamburg.de)

Page load times in Web-based applications are dominated by performance in the backend, network, and frontend. Performance tracking and analysis are required for identifying issues and evaluating the success of technical optimizations.
Figure 1: Page load times in Web-based applications are dominated by performance in the backend, network, and frontend. Performance tracking and analysis are required for identifying issues and evaluating the success of technical optimizations.

First, backend processing is mandatory for many client requests as content today is usually tailored to individual users. Rendering a website therefore does not only require fetching generic resources like images and stylesheets, but also accessing databases for personalized information such as recently viewed items or product recommendations. As the second challenge, network delays contribute to the overall time it takes to deliver content from the Web server to the end user's device. Content delivery networks (CDNs) are often used to retrieve data from closeby edge nodes instead of the faraway origin server. However, the dynamic nature of personalized websites prohibits traditional Web caching and thus impedes fast content delivery when server and client are physically separated. The third challenge is client rendering, which includes executing scripts on the user device and creating visuals in the viewport. Optimizing rendering efficiency is difficult, because it requires minimizing the number and size of critical resources and requesting them in the order in which the browser processes them. As a fourth challenge, performance tracking & analysis on different levels of the application stack is required to monitor the user experience and correlate it with business key performance indicators (KPIs). But since tracking introduces an overhead by itself, measuring performance without introducing additional delays can be just as challenging as improving it.