The critical rendering path is the sequence of steps the browser runs to turn HTML, CSS, and JS into pixels on screen. Anything that must finish before the first paint is render-blocking.
The critical rendering path is the sequence of steps the browser runs to turn HTML, CSS, and JS into pixels on screen. Anything that must finish before the first paint is render-blocking.
<script> stops HTML parsing while it downloads and runs.<!-- Blocks parsing: browser waits here before continuing -->
<script src="/app.js"></script>
<!-- defer: download in parallel, run after HTML is parsed, in order -->
<script src="/app.js" defer></script>
<!-- async: download in parallel, run as soon as ready (order not guaranteed) -->
<script src="/analytics.js" async></script>
Use defer for app code that touches the DOM, and async for independent scripts like analytics. Inline critical CSS and load the rest without blocking.
This is the mental model behind almost every load-time fix: render-blocking CSS/JS is the top cause of slow first paint and poor LCP. Knowing why defer/async exist shows you understand the browser, not just the syntax.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate