Defer CSS Loading with loadCSS

Asynchronously load non-critical CSS files with loadCSS to avoid blocking page rendering.

Last Updated : July 1, 2020

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.

Identify critical and non-critical CSS

Here are various critical CSS generators - pick the one that fits your requirement:

  • For one-off manual critical CSS generation of publicly accessible URL, use this Critical Path CSS Generator.
  • If the URL is not publicly accessible, you may have to setup Jonas Ohlsson's penthouse locally via npm. The Critical Path CSS Generator uses penthouse.
  • If you want to automate critical CSS extraction as part of your build process, Addy Osmani's critical comes with adequate build plugins.

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.

<!-- Standard CSS Loading -->
<link type="text/css" rel="stylesheet" href="[yourcssfile]" />
<!-- Deferred loading non-critical CSS -->
<link rel="stylesheet" href="[yourcssfile]" media="print" onload="'all';this.onload=null;" />
<noscript><link rel="stylesheet" href="[yourcssfile]" ></noscript>

Punit Sethi

About the Author

Punit Sethi has been working with large e-Commerce & B2C websites on improving their site speed, scalability and frontend architecture. He tweets on these topics here.

Also Read