Asynchronously load non-critical CSS files with loadCSS to avoid blocking page rendering.
TLDR : If you have already segregated your CSS into critical and non-critical CSS (for above-the-fold page display), and all you seek is the code snippet to defer loading of non-critical CSS, head over here.
To defer loading of non-critical CSS, perform the following steps:
Identify critical and non-critical CSS
Here are various critical CSS generators - pick the one that fits your requirement:
Inline critical CSS and preload non-critical CSS
Inline the identified critical CSS. Rest of the CSS (non-critical) needs to be preloaded without the rel=‘stylesheet’ attribute. This is because the ‘stylesheet’ value causes the browser to block rendering while the file is being downloaded.
Reliably preload across browsers with loadCSS
Above implementation ensures that non-critical CSS is reliably loaded without blocking page render while in-lined CSS adequately displays above-the-fold page.
Didn't find what you are looking for?
Just let us know what you are looking for & we'll add it to the article soon: