What is progressive rendering?

Progressive rendering is a set of techniques aimed at improving webpage performance by gradually displaying content to the user until the full load is complete. This creates an illusion of faster loading and enhances perceived performance.

Key techniques:

• Lazy Loading: Loading resources (images, videos, scripts) only when they become visible in the viewport or when the user interacts with the page.

  // Example of lazy loading images using Intersection Observer API
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  
  images.forEach(image => {
    observer.observe(image);
  });
  

• Server-Side Rendering (SSR): Rendering the initial HTML on the server before sending it to the client. This allows users to see content faster while the browser loads and parses JavaScript. Framework examples: Next.js, Nuxt.js.

• Critical CSS Rendering: Extracting and inlining CSS necessary for rendering the above-the-fold content, enabling the browser to quickly render the initial view. All other CSS loads asynchronously.

  <!-- Example of inlining critical CSS -->
  <style>
    /* Critical CSS for the top part of the page */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Code Splitting: Dividing JavaScript bundles into smaller parts that load as needed. This reduces the initial load size. Popular in SPA frameworks like React, Vue, Angular.

Advantages of progressive rendering:

• Improved perceived performance: Users see content faster, creating an impression of quicker loading.
• Reduction of First Contentful Paint (FCP) and Largest Contentful Paint (LCP): Metrics reflecting the speed of loading visible content.
• SEO improvement: Search engines can index content faster.
• Traffic savings: Especially with lazy loading.

The main idea is to provide users with useful content as soon as possible, then gradually load the rest to avoid blocking page rendering.