Attach In-Body

In order to avoid a Flash of Unstyled Content (FOUC), browsers will halt rendering when they encounter a CSS include until the file is downloaded and its rules are parsed. By default, Drupal includes all page CSS in the document header, which increases the transfer and parsing time before the browser is able to first render any of the page.

By including non-essential CSS when it's first needed on the page instead of in the header, the browser can more quickly render initially visible content, providing a better experience for users.

Usage

In a template, replace {{ attach_library('extension/library') }} with {{ attach_library_inbody('extension/library') }}
Any CSS and JS assets will be rendered in that template, while any dependencies of that library will be rendered in the header or footer of the page as usual.

Resources

• https://jakearchibald.com/2016/link-in-body/
• https://www.chromestatus.com/feature/5696805480169472