An In-Depth Analysis of Web Page Structure and Efficiency with Focus on Optimization Potential for Initial Page Load

Abstract

Web pages are nowadays usually built with a variety of different tools, frameworks, and generated code. The structure and size of the resulting HTML, CSS, and JavaScript code highly influence the time for page load, and related energy consumption. However, no large-scale baseline data exists about the efficiency of the resulting page code, e.g., what amount of the code is actually used, or if code parts must be render-blocking. Furthermore, existing examinations analyze page code structure but do not investigate the potential impact on code efficiency if parts of the code would be optimized. In this paper, the top 10,000 web pages worldwide using the Tranco list were analyzed in-depth. Aspects with the highest impact on structure or performance are evaluated in detail and set into context regarding used techniques, frameworks, code efficiency, and differences in the delivered desktop- and mobile versions. The results showed that the vast majority (over 70% for JavaScript and $\approx$90% CSS) of externally loaded resources (both JavaScript and CSS) are loaded as render-blocking code. On average, only $\approx$40% of render-blocking JavaScript and $\approx$15% of CSS are used until page render, which unveils a significant potential for performance improvements for most analyzed websites.