Defer Loading CSS with One Line of Code

How to defer CSS loading with one line of code.

Here’s how to defer CSS loading with one line of code, no extra dependencies needed:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

We’re setting the media property here to “print”, meaning that it’s only relevant when printing this page. But when onload fires, we change the media property to all - meaning it’s relevant to the page again. The browser will then load the CSS. It’s a tricky but effective way of deferring CSS until after page load.