Was ist progressives Rendern?

Progressives Rendern ist eine Technik zur Leistungssteigerung von Webseiten, bei der Inhalte schrittweise geladen und angezeigt werden, anstatt alles auf einmal. Dies verbessert die wahrgenommene Leistung und Interaktivität, indem es dem Nutzer ermöglicht, einen Teil der Seite zu sehen und zu interagieren, bevor alle Ressourcen vollständig geladen sind.

Hauptansätze:

• Lazy Loading: Bilder, Videos oder andere ressourcenintensive Elemente nur dann laden, wenn sie im Viewport des Nutzers sichtbar werden.

  <!-- Bild mit Lazy Loading -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Bildbeschreibung">
  

• Streaming-Rendering: HTML-Code in Teilen senden, sodass der Browser mit Parsing und Rendering beginnen kann, bevor die gesamte Seite empfangen wurde.

• Serverseitiges Rendering (SSR) oder Hydratation: Initiales HTML auf dem Server generieren, um eine schnelle Anzeige des Inhalts zu ermöglichen, und dann die statische Struktur auf dem Client mit JavaScript "beleben" für Interaktivität.

  // Beispiel für Hydratationskonzept
  // Auf dem Client
  const appElement = document.getElementById('app');
  // Vue/React/etc. Anwendung auf bestehende DOM-Struktur mounten
  Vue.createApp(App).mount(appElement);
  // oder React.hydrate(<App />, appElement);
  

• Priorisierung des sichtbaren Inhalts (Above-the-fold-Rendering): Laden und Rendern des sichtbaren Inhalts im ersten Teil der Seite (ohne zu scrollen), mit verzögertem Laden des restlichen Inhalts.

Die Anwendung von progressivem Rendern verbessert die wichtigsten Web Vitals:

• Largest Contentful Paint (LCP): Beschleunigt die Anzeige des größten Elements.
• First Contentful Paint (FCP): Verkürzt die Zeit bis zum ersten sichtbaren Inhalt.
• Cumulative Layout Shift (CLS): Obwohl nicht direkt, kann die richtige Verwendung von Platzhaltern und Lazy Loading helfen, unerwartete Verschiebungen des Inhalts zu verringern.