MODRACXKENNETH D'SILVA

← Archive & Insights

Eliminating Render-Blocking CSS and JavaScript

Inlining above-the-fold Critical CSS while dynamically requesting remaining stylesheet bundles via `media="print" onload="this.media='all'"` prevents browser render delays.

By Kenneth D'Silva • Reading Time: 34 min read • Category: Performance & Speed

Asynchronous Non-Critical CSS HTML Pattern

<!-- Non-blocking CSS Load Pattern -->
<link rel="preload" as="style" href="/style.min.css" />
<link rel="stylesheet" href="/style.min.css" media="print" onload="this.media='all'" />
<noscript><link rel="stylesheet" href="/style.min.css" /></noscript>

Suggested & Related Reading

Explore related engineering guides from Kenneth D'Silva: