Eliminate render-blocking JavaScript and CSS in above-the-fold content

DifficultyModerate
PriorityHigh
Average Score13%

Brief

When JavaScript, CSS, or other web resources impede the critical rendering path, the rendering of ATF content will be delayed.


Description

A 'Fold' is considered as the bottom of the screen during the initial loading a web page. The 'above-the-fold' (ATF) content refers to the content a website visitor sees first without scrolling. Historically, the term 'above-the-fold' was used for newspapers to denote the printed content on the upper half of the front page. Below the fold refers to the content that must be scrolled down after loading a web page for viewing it. A good 'above the fold' (ATF) content is intriguing and purposeful at the same time. A good ATF has the potential for achieving a lasting impression among the visitors, and is one of the key facets of effective online marketing.

Cascading Style Sheets (CSS) is a style language intended to simplify the presentation of a document written in a markup language like HTML. CSS handles the aesthetic aspects of a website like text colors, fonts, paragraph spacing, background images/colors, layout designs etc. CSS saves a lot of time as the same style sheet can be reused for multiple HTML pages. Web pages load faster as a lightweight single CSS rule of a tag can be applied to all instances of that tag rather than writing new HTML tag attributes every time. CSS also supports a wider array of attributes than HTML.

Asynchronous loading can deliver a much better user experience. In 'Synchronous loading', scripts are loaded sequentially, and can result in higher load times as the web page is viewable only after loading all the scripts and resources. In 'Asynchronous loading', many scripts can be loaded simultaneously and independently. By asynchronously loading blocking CSS and JavaScript resources, the 'above-the-fold' content can be prioritized in the loading process, and can be independently loaded. Deferring (delaying) the loading of blocking resources will also help loading the ATF content faster.

Reducing the number and size of CSS files, especially in the critical path, can significantly reduce loading times. Another recommendation by Google regarding CSS was to inline the critical CSS portions directly into the HTML file. Inlining CSS refers to the inclusion of CSS directly into the HTML file rather than using an external CSS file. Inlined CSS reduces the amount of page load data as the browser only has to download fewer CSS files. However, inlined CSS doesn't support browser caching, and hence the same CSS must be loaded over and over again when the visitor browses other pages of the same website. On the other hand, external CSS files can be cached by the browser which enable significantly faster load times and much lower latencies. Hence Google recommends inlining only the critical CSS elements directly into the HTML file.