Modern SPAs (React & Vue) behave very differently from traditional websites when it comes to loading and rendering UI in the browser.
To understand performance, SEO, and UX, you must understand the Critical Rendering Path (CRP).
This post breaks down:
- What happens from the moment the browser requests your page
- What blocks rendering & why
- How React and Vue CSR differ
- How CSS strategies impact rendering
- How SSG/SSR change the flow
- What exactly is inside the main JavaScript bundle
Let’s go step by step.
🧠 1. What is the Critical Rendering Path?
The Critical Rendering Path (CRP) is:
➡️ The set of steps the browser performs to convert HTML/CSS/JS into pixels on the screen.
It contains 5 main stages:
1. HTML Download & Parsing → DOM creation
2. CSS Download & Parsing → CSSOM creation (render-blocking)
3. JavaScript Download & Execution (often render-blocking)
4. Render Tree Construction (DOM + CSSOM)
5. Layout → Paint → Composite
Let’s break these down in detail 👇
🧵 2. Detailed CRP Steps & What Blocks Rendering
Step 1 — Load HTML & Build the DOM
What happens:
- Browser downloads the HTML file.
- Parses tags sequentially (top → bottom).
- Builds the DOM tree incrementally.
Render blocking?
❌ HTML itself is not render-blocking.
BUT:
✔ External <script> tags block HTML parsing unless they use defer or type="module".
✔ External <link rel="stylesheet"> blocks rendering until CSS finishes downloading.
Step 2 — Load & Parse CSS → Build CSSOM
What happens:
- Browser downloads all CSS files.
- Parses them → builds CSSOM.
Render blocking?
✔ CSS is always render-blocking
✔ Browser will not paint anything until CSSOM is ready
✔ This is why CSS-in-JS slows down first paint
Because:
Browser needs CSS rules to compute layout safely.
Step 3 — Load & Execute JavaScript
What happens:
- Browser downloads JS bundles.
- Parses + executes them on the main thread.
Render blocking?
🔸 Inline & external JS (without defer or module) BLOCK HTML parsing.
🔸 Even deferred JS is execution-blocking for CSR frameworks.
Why?
React/Vue need to execute the main JS bundle to generate the UI.
Step 4 — Build Render Tree (DOM + CSSOM)
Browser merges:
- DOM
- CSSOM
Render tree is built → only visible nodes with computed styles.
Render blocking?
✔ Requires DOM & CSSOM (so CSS blocks rendering).
❌ Does NOT need JS unless JS mutates DOM (CSR apps do this).
Step 5 — Layout → Paint → Composite
Browser computes:
- Size
- Position
- Colors
- Layers
Then paints pixels on screen.
Render blocking?
✔ Happens only after DOM + CSSOM + JS ready
✔ Extra style recalculations or forced reflows can delay painting
🏛️ 3. The Main JavaScript Bundle — What’s Actually Inside?
This is the biggest performance bottleneck in CSR apps.
Your main JS bundle contains:
1. The framework runtime
- React / Vue core libraries
- Reconciliation logic
- Virtual DOM implementation
2. All your components
Each component is:
- JS functions (React)
- Compiled templates → render functions (Vue)
3. Router & route components
SPA routing logic is inside the bundle.
4. Application bootstrap code
For React:
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
For Vue:
createApp(App).mount("#app");
5. State management, utilities, and 3rd-party libraries
- redux, zustand, jotai
- axios
- lodash
- charts, maps, etc.
6. CSS-in-JS runtime (if used)
styled-components / emotion:
- Parse JS styles
- Generate CSS
- Inject
<style>tags dynamically - This blocks render tree creation
7. Code needed for hydration (only SSG/SSR)
React/Vue inject interactivity into existing HTML.
⚛️ 4. Critical Render Path in React CSR
🏁 Initial HTML
React CSR apps ship almost empty HTML:
<body>
<div id="root"></div>
<script src="/assets/main.js"></script>
</body>
No UI. Just root.
🔄 React CSR CRP Workflow
Step 1: HTML → Empty DOM
Browser sees only a <div id="root">.
Step 2: CSS Blocks Render
Global CSS / Tailwind downloaded and parsed.
Step 3: JS Blocks Interactivity
Browser runs the main bundle:
- Initializes React runtime
- Builds virtual DOM
- Runs components
- Reconciles to real DOM
- Injects DOM into
#root
🎯 Only now the UI appears.
Render-blocking in React CSR:
| What | Blocks? | Why |
|---|---|---|
| CSS files | ✔ Yes | Needed to compute styles |
| JS main bundle | ✔ Yes | UI depends on React runtime |
| CSS-in-JS | ✔ Extra blocking | Needs JS to generate CSS |
| Tailwind | ✔ | Large CSS can slow CSSOM |
🧩 CSS Scenarios in React CSR
Global CSS
➡️ Render-blocking but fast
➡️ CSSOM ready early
CSS Modules
➡️ Compiled into global CSS
➡️ Same CRP as global CSS
Tailwind CSS
➡️ Large CSS file
➡️ Slower CSSOM build
CSS-in-JS
➡️ Slowest
➡️ JS must run to create styles
➡️ Inject <style> tags after render
➡️ Causes layout thrashing
🌿 5. Critical Render Path in Vue CSR
Vue CSR is similar but with key differences:
- Templates are pre-compiled into render functions
- Scoped CSS introduces attribute selectors (slightly slower)
🏁 Initial HTML
<body>
<div id="app"></div>
<script src="/main.js"></script>
</body>
🔄 Vue CSR CRP Workflow
Step 1 — HTML → DOM with empty root
Step 2 — Global CSS renders
Step 3 — JS executes
- Vue runtime starts
- Templates (compiled to render functions) execute
- Virtual DOM created
- Vue mounts to
#app - Scoped styles applied
Vue has smaller runtime & faster template execution.
🧩 CSS Scenarios in Vue CSR
Global CSS
➡️ Fastest
Scoped CSS
➡️ Uses attributes like [data-v-123abc]
➡️ Slightly slower CSSOM
CSS Modules in Vue
➡️ Similar to JS frameworks
➡️ Compiled into global CSS
CSS-in-JS
➡️ Rare in Vue but slow like React
Tailwind
➡️ Same implications as React
🥇 6. CSR vs SSG vs SSR — CRP Comparison
| Mode | Initial HTML | FCP | JS Need | Hydration | Best For |
|---|---|---|---|---|---|
| CSR | Empty shell | Slowest | Mandatory | ❌ No | Internal apps |
| SSG | Pre-rendered | Fast | Needed for interactivity | ✔ Yes | Blogs/docs/marketing |
| SSR | Server-rendered | Fast | Needed for interactivity | ✔ Yes | Dynamic pages (dashboards) |
🧱 7. What Changes in SSG?
SSG = HTML generated at build time.
SSG CRP:
- Browser downloads full HTML (content visible immediately)
- CSSOM parsed
- Browser paints early = fast FCP
- JS loads later → hydration
- App becomes interactive
🎯 Content visible early
❌ Interaction delayed
🧱 8. What Changes in SSR?
SSR = HTML generated on server per request.
SSR CRP:
- Browser receives pre-rendered HTML
- DOM built immediately
- CSS render-blocking
- Early paint
- JS hydrates to make it interactive
🎯 Best FCP
⚠️ Hydration is heavy → may hurt TTI
📌 9. Commonly Overlooked CRP Realities in SPA Apps
1. JavaScript is the biggest performance bottleneck
CSR requires JS to create UI → slow on low-end devices.
2. Hydration is expensive in SSR/SSG
More components = slower hydration = poor TTI.
3. CSS-in-JS is always slower
- Execution cost
- Style injection
- Extra layout & paint cycles
4. Tailwind improves maintainability but affects CSSOM size
Large CSS file blocking rendering.
5. Rendering depends on device capability
JS execution time is 10× slower on low-end Android devices.
🎉 Final Summary
React CSR
- Empty HTML
- JS must run to render UI
- CSS strategies heavily affect CRP
Vue CSR
- Similar to React but template compilation is faster
- Scoped CSS adds minor cost
SSG
- Best FCP
- Requires hydration
SSR
- Early paint
- Heavy hydration
Understanding CRP helps you optimize what truly matters:
- Reduce JS bundle size
- Avoid CSS-in-JS unless necessary
- Prefer SSR/SSG for public-facing pages
- Minimize CSS blocking
Top comments (0)