What is progressive rendering?

HTML

The short answer

Progressive rendering is a set of techniques that display content to the user as quickly as possible, showing the most important parts first while the rest continues to load in the background. Instead of waiting for everything to be ready, the user sees a usable page incrementally.

Common techniques

Lazy loading images:

Only load images when they are about to enter the viewport:

<img src="photo.jpg" loading="lazy" alt="Photo" />

Above-the-fold images load immediately. Everything below loads as the user scrolls.

Server-side rendering (SSR):

Send rendered HTML from the server so the user sees content immediately instead of waiting for JavaScript to build the page.

Streaming HTML:

The server sends HTML in chunks as it is generated. The browser starts rendering the first chunks while the rest is still being sent:

// React 18 streaming
import { renderToPipeableStream } from 'react-dom/server';
const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    response.pipe(stream); // start sending HTML immediately
  },
});

Critical CSS:

Inline the CSS needed for above-the-fold content directly in the HTML. Load the rest asynchronously:

<head>
  <style>
    /* Critical CSS inlined here */
    .header { ... }
    .hero { ... }
  </style>
  <link
    rel="preload"
    href="full.css"
    as="style"
    onload="this.rel='stylesheet'"
  />
</head>

Code splitting:

Only load the JavaScript needed for the current page. Load other pages' code on demand:

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

Skeleton screens:

Show a placeholder layout while content loads, giving the user a sense of structure:

function Feed() {
  if (loading) return <FeedSkeleton />;
  return <FeedContent data={data} />;
}

Why it matters

Users perceive performance based on how quickly they see something useful — not how quickly everything finishes loading. A page that shows content in 1 second and finishes in 5 seconds feels faster than a page that shows nothing for 3 seconds and finishes in 3 seconds.

Interview Tip

List three or four techniques: lazy loading, SSR, critical CSS, and code splitting. The key message is "show something useful as quickly as possible." Mentioning skeleton screens as a perceived performance technique is a nice bonus.

Why interviewers ask this

This tests your understanding of web performance from the user's perspective. Interviewers want to see if you know techniques to make pages feel fast, even if the total load time is the same.

Table of Contents