Waiter and AUTRATAC: Don’t Throw It Away, Just Delay!
Research output: Contribution to book/Conference proceedings/Anthology/Report › Conference contribution › Contributed › peer-review
Contributors
Abstract
The modern web is built with a mixture of HTML, CSS, and an increasing amount of JavaScript. Since JavaScript determines ≈70% of the overall data of websites on average, JavaScript code efficiency significantly influences their loading performance. A recent study revealed that the average JavaScript code usage until render is ≈40%. For economical and convenience reasons, a significant amount of research already focuses on optimizing the delivered data to reduce loading times. For example, a large area of research focuses on eliminating dead code, where unused functions are deleted. Code in this context is classified as “dead” when the results of the code or the whole code itself are never executed or used. Since code elimination is based on heuristics/code classification, there is always a trade-off between code elimination and missing JavaScript code that harms the correct functioning of the website. As a result, some pages do not load correctly after elimination. Even the most advanced attempts with user input emulation do not achieve 100% accuracy. In this paper, we introduce two new open-source frameworks called Waiter, which waits until a resource is available, and AUTRATAC, an automatic transpiler to awaitable code. Both can be used separately or in combination to robustly delay pieces of JavaScript code without breaking it. For example, it allows code to be executed without loading all called functions beforehand. Therefore, when eliminating dead code optimized with AUTRATAC, the loading of unused functions can be delayed in a non-render-blocking way. This also opens up multiple new opportunities, as future code-splitting techniques might be significantly stricter without breaking a page. Our results show that delaying renderblocking JavaScript reduces loading times until First Contentful Paint (FCP) significantly, especially at slower network speeds. In one instance, an 85% drop in loading time was measured. Furthermore, it was visible that deferring the code with the developed frameworks still matches the total code execution time of the original render-blocking JavaScript.
Details
| Original language | English |
|---|---|
| Title of host publication | Web Engineering |
| Editors | Irene Garrigós, Manuel Wimmer, Juan Manuel Murillo Rodríguez |
| Publisher | Springer, Berlin [u. a.] |
| Pages | 278–292 |
| Number of pages | 15 |
| ISBN (electronic) | 978-3-031-34444-2 |
| ISBN (print) | 978-3-031-34443-5 |
| Publication status | Published - Jun 2023 |
| Peer-reviewed | Yes |
Publication series
| Series | Lecture Notes in Computer Science |
|---|---|
| Volume | 13893 |
| ISSN | 0302-9743 |
External IDs
| Scopus | 105028354693 |
|---|
Keywords
Research priority areas of TU Dresden
DFG Classification of Subject Areas according to Review Boards
Subject groups, research areas, subject areas according to Destatis
ASJC Scopus subject areas
Keywords
- faster loading times, JavaScript framework, asynchronous JavaScript, code delay, code splitting