Critical CSS Rules Decreasing time to first render by inlining CSS rules for over-the-fold elements Gorjan Jovanovski [email protected] July, 2016, 41 pages Supervisor: Dr. Vadim Zaytsev Host organisation: The Next Web, http://thenextweb.com Universiteit van Amsterdam Faculteit der Natuurwetenschappen, Wiskunde en Informatica Master Software Engineering http://www.software-engineering-amsterdam.nl Contents Abstract 3 1 Introduction 4 1.1 Problem statement...................................... 4 1.2 Research questions...................................... 5 1.3 Use cases ........................................... 5 1.3.1 Caching........................................ 6 1.3.2 Content Delivery Networks ............................. 6 1.3.3 Resolution mismatch................................. 6 1.4 Solution outline........................................ 6 2 Background 8 2.1 Cascading Style Sheets.................................... 8 2.1.1 Media queries..................................... 8 2.2 Web page rendering ..................................... 9 2.2.1 Time to first render ................................. 9 2.3 Critical path CSS....................................... 10 3 Related work 12 3.1 Academical Research..................................... 12 3.2 CSS prefetch and preload .................................. 12 3.2.1 Prefetch........................................ 12 3.2.2 Preload ........................................ 12 3.3 Content first ......................................... 13 3.4 Manual extraction ...................................... 13 3.5 Automatic extraction..................................... 13 3.5.1 Server-side modules ................................. 13 3.5.2 Node.js modules ................................... 13 4 Impact of external CSS files on time to first render 15 4.1 Research Method....................................... 15 4.2 Results............................................. 15 4.2.1 Time to first render ................................. 16 4.2.2 Screen resolution and document height....................... 16 4.3 Analysis............................................ 17 5 Methods used by existing tools 18 5.1 Research method....................................... 18 5.2 Results............................................. 18 5.2.1 Penthouse....................................... 18 5.2.2 CriticalCSS...................................... 19 5.2.3 Critical ........................................ 20 5.3 Analysis............................................ 21 6 Focusr 22 1 6.1 Configuration possibilities.................................. 22 6.2 Algorithm........................................... 23 6.2.1 CSS detection and extraction............................ 24 6.2.2 Over-the-fold elements................................ 26 6.2.3 Inlining ........................................ 27 6.3 Dynamic sites......................................... 29 6.3.1 Wordpress plugin................................... 29 6.4 Claims............................................. 31 7 Evaluation 32 7.1 Research Questions & Answers ............................... 32 7.2 Evidence............................................ 32 7.3 Claims............................................. 35 7.4 Threats to validity...................................... 35 8 Conclusion 36 Bibliography 38 Appendices 40 A Tool output 41 2 Abstract CSS is a render-blocking resource that increases the time needed for the first elements of a web page to be rendered on screen during the initial load. Detecting and inlining critical CSS rules in the page's HTML that apply only on initial visible elements on a page helps counter this problem, removing the need for extra GET requests and processing of unneeded styles. Tools for detection of critical CSS exist, but are limited in scope, flexibility and use on dynamic pages. In this thesis, we first explore if external CSS files causes create a significant negative impact on page render times, then analyse and evaluate methods used by existing tools that detect, extract and inline critical CSS rules, and finally introduce an automated tool for detection and extraction of critical CSS from static and dynamic web pages. 3 Chapter 1 Introduction In this chapter, we explain the problem that CSS introduces to the time it takes for the first render to occur in a browser while loading a web page. We pose three main research questions which will help us come to a better understanding of it and finally propose a tool that solves the render blocking problem. Cascading Style Sheets (CSS) are the primary method that allows web developers and designers to control the way elements on a page are rendered by browsers. They are written following standards imposed by the World Wide Web Consortium, who constantly refine and add new rules to the ever- expanding style language, allowing for more flexibility and customization of websites [Con16b]. This, in turn, results to the subsequent rise in use of CSS all around the web. As data collected from HTTPArchive [Arc16] on more than half a million sites shows, in just the past five years, the number of GET requests for CSS files from a single web page has grown from an average of 2.2 to 7.7 requests. Transfer size of CSS files has also increased threefold, from an average of 23kb to 80kb. One reason for this could be the growing trend among developers to use CSS frameworks and fonts side by side with their custom rules. The most popular CSS based frameworks tracked by the web crawler BuiltWith [Bui16], are displayed in Table 1.1. Name Type No. of sites that use it Google Font API Fonts 17.200.000 + Bootstrap Framework 6.700.000 + Adobe Edge Web Fonts Fonts 83,700 + Foundation CSS Framework 35.000 + Formalize CSS Form framework 34.000 + Materialize CSS Framework 15.000 + Table 1.1: Usage of CSS frameworks on the web This just comes to show the extent to which websites rely on CSS, and researchers from AT&T back this claim that top websites can contain anywhere from 2 to 73 scripts and style sheets [EGJR15]. 1.1 Problem statement Together with HTML, CSS is a render blocking resource, meaning that the browser can not render a page without first parsing these resources. For HTML, it is obvious and expected, since without content, there is nothing for the browser to display. Parsing it and creating a DOM (Document Object Model) tree is an essential rendering step. But for CSS, the browser will not start rendering the page until the CSSOM (CSS Object Model) tree of all style sheets defined in the head tag is constructed and applied to the DOM tree. That process is network heavy for externally linked files and includes: 1. The browser sending out a HTTP request for the CSS file 4 2. An additional DNS lookup request being made if the CSS file is hosted on another domain 3. The response being received and read 4. An CSSOM tree being constructed based on the response 5. Continuing parsing of the HTML This is even more problematic when the @import CSS at-rule is used, which allows the embedding of one style sheet into another, which in turn requires an additional HTTP GET request to be made. That, combined with the use of popular CSS frameworks as listed above, contributes to the decreased speed of which the first render appears on a user's screen. With so much CSS files being loaded, not all of them should be equally prioritized. Some style sheets apply to mobile screens, others to a printer-friendly version of the page, yet if incorrectly marked, all of them will block the rendering while being downloaded and parsed. Google suggests adding special attributes to CSS link tags to state under what conditions they should be loaded [Dev16a]. But even if CSS links are correctly marked, the CSS rules for the main content cover a lot more elements than are initially visible on the user's screen. This statement is tackled in chapter4. A often cited solution to this problem in research [WBKW13], by top industry engineers [KO16] and companies [Dev16a], is the use of critical (over-the-fold) CSS. Critical CSS rules only affect the elements of a web page that are initially visible after the load, without scrolling in the browser win- dow. These are the most important elements since they are the first to appear. By extracting and inlining only critical CSS rules, the time to first render (time needed for the browser to start painting elements on the screen from the initial load of the page) can be decreased. The goal of this thesis is to analyse the effects that injecting critical CSS rules in a web page have on the time to first render, and provide a tool to automate the detection, extraction and injection of CSS rules that apply to over-the-fold elements. More in-depth definitions of critical CSS and time to first render are provided in sections 2.3 and 2.2.1 respectively. Our hypothesis, which we test in this thesis, is: Inlining critical CSS rules in web pages and loading non-critical ones asynchronously, creates a significant decrease in the time to first render. 1.2 Research questions In order to successfully test our hypothesis, we first had to answer the following important questions that will direct our research in a right way research: • RQ1: Do requests to external CSS files make a significant negative impact on the time to first render? • RQ2: What methods do existing tools use for detection, extraction and inlining of critical CSS rules? • RQ3: How can critical CSS inlining be automated for dynamic web pages? 1.3 Use cases Not all scenarios could benefit from inlining critical CSS rules. We look into multiple