Waiter and AUTRATAC: Don’t Throw It Away, Just Delay!

Abstract

The modern web is built with a mixture of HTML, CSS, and an increasing amount of JavaScript. Since JavaScript determines $\approx$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 $\approx$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 render-blocking 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.