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="this.media='all';this.onload=null;" />
<noscript><link rel="stylesheet" href="[yourcssfile]" ></noscript>

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.