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

Research output: Contribution to book/Conference proceedings/Anthology/ReportConference contributionContributedpeer-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 languageEnglish
Title of host publicationWeb Engineering
EditorsIrene Garrigós, Manuel Wimmer, Juan Manuel Murillo Rodríguez
PublisherSpringer, Berlin [u. a.]
Pages278–292
Number of pages15
ISBN (electronic)978-3-031-34444-2
ISBN (print)978-3-031-34443-5
Publication statusPublished - Jun 2023
Peer-reviewedYes

Publication series

SeriesLecture Notes in Computer Science
Volume13893
ISSN0302-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

Keywords

  • faster loading times, JavaScript framework, asynchronous JavaScript, code delay, code splitting

Library keywords