Was ist progressives Rendering?

Das progressive Rendering ist eine Sammlung von Techniken, die darauf abzielen, die Leistung einer Webseite zu verbessern, indem der Inhalt schrittweise für den Benutzer angezeigt wird, während der vollständige Ladevorgang noch läuft. Dies erzeugt die Illusion eines schnelleren Ladens und erhöht die wahrgenommene Leistung.

Schlüsseltechniken:

• Lazy Loading (Lazy Loading): Ressourcen (Bilder, Videos, Skripte) nur dann laden, wenn sie im Sichtbereich des Benutzers sichtbar werden oder wenn der Benutzer mit der Seite interagiert.

  // Beispiel für Lazy Loading von Bildern mit 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);
  });
  

• Serverseitiges Rendering (Server-Side Rendering - SSR): Das initiale HTML auf dem Server rendern, bevor es an den Client gesendet wird. Ermöglicht es dem Benutzer, den Inhalt schneller zu sehen, während der Browser JavaScript lädt und analysiert. Beispiel-Frameworks: Next.js, Nuxt.js.

• Rendering mit kritischem CSS (Critical CSS): Extrahieren und Inline-CSS, das für die Anzeige des oberen Teils der Seite (above-the-fold content) erforderlich ist, um dem Browser eine schnelle erste Darstellung zu ermöglichen. Der restliche CSS wird asynchron geladen.

  <!-- Beispiel für Inline-CSS-Kritik -->
  <style>
    /* Kritisches CSS für den oberen Teil der Seite */
    body { margin: 0; }
    h1 { color: blue; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• Code-Splitting: JavaScript-Bundle in kleinere Teile aufteilen, die bei Bedarf geladen werden. Dies reduziert die Größe des initialen Ladens. Beliebt in SPA-Frameworks wie React, Vue, Angular.

Vorteile des progressiven Renderings:

• Verbesserung der wahrgenommenen Leistung: Der Benutzer sieht den Inhalt schneller, was den Eindruck eines schnelleren Ladens vermittelt.
• Reduzierung von First Contentful Paint (FCP) und Largest Contentful Paint (LCP): Metriken, die die Geschwindigkeit des Ladens des sichtbaren Inhalts widerspiegeln.
• Verbesserung des SEO: Suchmaschinen können den Inhalt schneller indexieren.
• Verkehrseinsparung: Besonders bei Lazy Loading.

Die Hauptidee ist, dem Benutzer so schnell wie möglich nützlichen Inhalt bereitzustellen und dann schrittweise den Rest zu laden, um das Rendern der Seite nicht zu blockieren.