What is the Critical Rendering Path?

Steps browser takes to convert HTML, CSS, JS into pixels:

  1. Parse HTML → DOM
  2. Parse CSS → CSSOM
  3. Combine → Render Tree
  4. Layout → Positions of elements
  5. Paint → Pixels on screen

Performance Issues

  • Blocking CSS/JS delays rendering.
  • Large bundles cause slow parsing.

Code Splitting in React

Dynamic imports reduce initial bundle size.

import React, { Suspense } from "react";

const Dashboard = React.lazy(() => import("./Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Webpack will generate separate bundles.

Lazy Loading Components

<Route path="/profile" element={<React.Suspense fallback="Loading..."><Profile /></React.Suspense>} />

Preloading & Prefetching

<!-- Load immediately -->
<link rel="preload" href="/main.js" as="script">

<!-- Load when idle -->
<link rel="prefetch" href="/analytics.js">

Best Practices

  • Load critical CSS inline.
  • Defer non-critical scripts.
  • Split bundles per route.
  • Use performance budgets (max KB per route).