TaskBuild a head with one render-blocking stylesheet (/critical.css) and one DEFERRED script (/app.js). Use <link rel='stylesheet' href='/critical.css'> and <script src='/app.js' defer></script>.
The critical rendering path
75 XP6 min
Theory
What happens between "request sent" and "first pixel"
- HTML downloads β usually one round-trip.
- HTML parses top-to-bottom. On each
<link rel="stylesheet">and<script>(without defer/async), the parser PAUSES. - CSS downloads + parses into the CSSOM.
- JS downloads + parses + executes (can mutate DOM).
- Render tree = DOM + CSSOM combined β layout β paint.
The first thing painted is "First Contentful Paint" (FCP). Every blocking resource before FCP adds to the user's perceived load time.
Three ways to UN-block
<script defer>β download in parallel, run AFTER HTML parsed. Default for anything below the fold.<script async>β download in parallel, run AS SOON AS available (out of order). Use for analytics + truly independent scripts.<link rel="stylesheet" media="print" onload="this.media='all'">β load CSS without blocking render. For non-critical stylesheets.
What ALWAYS blocks
Stylesheets in the head (with no media="print" trick). Scripts in the head without defer/async. Synchronous <script> tags before </body>.
What doesn't block
<script defer>placed anywhere<script async>placed anywhere<link rel="preload">(preloads, doesn't block)- Resources fetched by JS after page load
π
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial β card required, cancel anytime.
Sign up β free trial βFirst 10 lessons in each track are free. No card needed for those.