Techniques and practices for optimizing resources in large scale horizontal web applications that deliver cross functional UX components

Background Study: Horizontal UX (User Experience) refers to UX that can be present in more than one view or page of a given app or website. For example, in an e-commerce website, promotional coupons, header, footer which surface at multiple places in a user’s journey, are examples of such horizontal UX modules. Applications that deliver such cross functional horizontal UX widgets (components or modules) are referred to as horizontal web applications [1]. These applications rely heavily on the effective and efficient delivery of JavaScript, Cascading Style Sheet (CSS) resources, besides other media forms like - images, audio, video to ensure fast load and interaction times [2].Problem Statement: While there are established techniques for optimizing JavaScript and CSS resources in web applications, there is a notable gap in the literature regarding the intricacies of their application in the context of horizontal web applications. This lack of reference poses challenges for developers aiming to enhance performance in these specific scenarios.Proposed Model/Technique: This paper visits a set of optimization techniques for these web resources (assets) in the context of large-scale horizontal web applications. However, general practices for optimizing horizontal web applications is beyond the scope of this paper. These methods are derived from extensive experience in developing production systems at eBay Inc., and are designed to address the unique performance considerations of horizontal UX components.Results: The paper evaluates those optimization methods specific to web resources, in the context of horizontal web applications, highlighting their effectiveness in reducing resource sizes and load times. Additionally, it discusses the learnings and trade-offs encountered when implementing these optimizations, providing insights for developers in the field.