What is progressive rendering?

Progressive rendering is a technique for improving web page performance, where content loads and displays gradually rather than all at once. This enhances perceived performance and interactivity, allowing users to see and interact with part of the page before all resources are fully loaded.

Main approaches:

• Lazy Loading: Loading images, videos, or other resource-intensive elements only when they become visible in the viewport.

  <!-- image with lazy loading -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Image description">
  

• Streaming Rendering: Sending HTML code in parts, allowing the browser to start parsing and rendering before the entire page is received.

• Server-side Rendering (SSR) or Hydration: Generating initial HTML on the server for quick content display, then "hydrating" the static markup on the client with JavaScript for interactivity.

  // Example of hydration concept
  // On the client
  const appElement = document.getElementById('app');
  // Mount Vue/React/etc. application on existing DOM structure
  Vue.createApp(App).mount(appElement);
  // or React.hydrate(<App />, appElement);
  

• Prioritizing visible content (Above-the-fold rendering): Loading and rendering content visible in the first part of the page (without scrolling), with deferred loading of the rest.

Applying progressive rendering improves key Web Vitals metrics:

• Largest Contentful Paint (LCP): Speeds up the display of the largest element.
• First Contentful Paint (FCP): Reduces the time until the first content appears.
• Cumulative Layout Shift (CLS): Although not directly, proper use of placeholders and lazy loading can help reduce unexpected content shifts.