Wat is progressieve rendering?

Progressief renderen is een verzameling technieken gericht op het verbeteren van de prestaties van een webpagina door content geleidelijk weer te geven aan de gebruiker, totdat de volledige lading is voltooid. Dit creëert de illusie van snellere laadtijden en verhoogt de waargenomen prestaties.

Belangrijke technieken:

• Lazy Loading: Resources (afbeeldingen, video's, scripts) alleen laden wanneer ze zichtbaar worden in het viewport van de gebruiker of wanneer de gebruiker interactie heeft met de pagina.

  // Voorbeeld van lazy loading van afbeeldingen met 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): Het renderen van de initiële HTML op de server voordat deze naar de client wordt gestuurd. Dit stelt de gebruiker in staat om sneller de inhoud te zien terwijl de browser JavaScript laadt en parseert. Voorbeelden van frameworks: Next.js, Nuxt.js.

• Critical CSS: Het extraheren en inline plaatsen van CSS die nodig is om de bovenste deel van de pagina (above-the-fold content) weer te geven, zodat de browser snel de eerste weergave kan renderen. De rest van de CSS wordt asynchroon geladen.

  <!-- Voorbeeld van inline critical CSS -->
  <style>
    /* Critical CSS voor de bovenste deel van de pagina */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Code Splitting: Het opsplitsen van de JavaScript-bundel in kleinere delen die naar behoefte worden geladen. Dit vermindert de grootte van de initiële lading. Populair in SPA-frameworks zoals React, Vue, Angular.

Voordelen van progressief renderen:

• Verbeterde waargenomen prestaties: De gebruiker ziet de inhoud sneller, wat de indruk geeft van een snellere laadtijd.
• Vermindering van First Contentful Paint (FCP) en Largest Contentful Paint (LCP): Maatstaven die de snelheid van het laden van de zichtbare inhoud weergeven.
• Verbeterde SEO: Zoekmachines kunnen de inhoud sneller indexeren.
• Dataverbruik besparen: Vooral bij lazy loading.

Het hoofddoel is om de gebruiker zo snel mogelijk nuttige inhoud te bieden en vervolgens geleidelijk de rest te laden, zodat de rendering van de pagina niet wordt geblokkeerd.