Was ist progressives Rendering?

Progressives Rendering ist eine Methode zur Optimierung der Lade- und Anzeigegeschwindigkeit von Webseiten, bei der Inhalte schrittweise geladen und angezeigt werden, anstatt alles auf einmal.

Die wichtigsten Vorteile:

Schnelleres Rendern des initialen bedeutungsvollen Inhalts (First Meaningful Paint).
Verbesserte Wahrnehmung der Ladegeschwindigkeit durch den Nutzer.
Verkürzte Zeit bis zur Interaktivität (Time to Interactive).

Die wichtigsten Techniken des progressiven Renderings umfassen:

Lazy Loading (Lazy Loading): Verzögerung des Ladens nicht wesentlicher Ressourcen (wie Bilder oder Videos), bis sie vom Nutzer benötigt werden (bis er die Seite zu ihnen scrollt).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Beispielbild" loading="lazy">
```

Serverseitiges Rendering (Server-Side Rendering - SSR): Erzeugung der HTML-Seite auf dem Server und Versand des bereits gerenderten Inhalts an den Browser.

// Beispiel für die Verwendung eines Frameworks für SSR (z.B. Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Daten vom Server abrufen
//   const data = await fetchData();
//   return {
//     props: { data }, // Daten an die Komponente übergeben
//   }
// }
//
// function MyPage({ data }) {
//   // Rendern der Komponente mit Daten
//   return <div>{/* ... */}</div>
// }

Clientseitiges Rendering (Client-Side Rendering - CSR) mit Hydratation: Der Browser erhält minimal HTML und JavaScript. JavaScript lädt dann die Daten und rendert die Seite vollständig im Browser. Hydratation ist der Prozess, bei dem Event-Handler an den bereits gerenderten SSR-Inhalt im Client angehängt werden.

Streaming-HTML (Streaming HTML): Versand von HTML in Teilen, während es auf dem Server generiert wird, was es dem Browser ermöglicht, mit Parsing und Rendering zu beginnen, noch bevor das gesamte Dokument geladen ist.

<!-- Beispiel für hypothetisches Streaming-HTML -->
<html>
  <head>
    <title>Streaming-Seite</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Erster HTML-Teil -->
    <h1>Überschrift</h1>
    <script src="script.js" async></script>
    <!-- Restliches HTML kann später gesendet werden -->
  </body>
</html>

Kritisches CSS / Inline-CSS (Critical CSS / Inline Critical CSS): Inline-Einbettung von CSS-Stilen, die notwendig sind, um den sichtbaren Teil der Seite (Above the Fold) anzuzeigen, um die anfängliche Renderzeit zu beschleunigen. Andere Stile werden asynchron geladen.

Technik	Beschreibung	Vorteile	Nachteile
Lazy Loading	Verzögertes Laden von Ressourcen außerhalb des sichtbaren Bereichs	Schnelles Laden des sichtbaren Inhalts	Kann JavaScript für die Umsetzung erfordern
SSR	Serverseitiges Rendering, Versand des fertigen HTMLs	Schnelles Rendern des initialen Inhalts, SEO-freundlich	Erhöhte Serverbelastung
CSR mit Hydratation	Initiales Rendering im Client mit späterer Hydratation des SSR-Inhalts	Dynamische Anwendungen	Längeres Laden und weniger Interaktivität ohne SSR
Streaming-HTML	Versand von HTML in Teilen	Schneller Start des Parsings	Abhängig von der Serverimplementierung
Kritisches CSS	Inline-Einbettung von Stilen für den sichtbaren Bereich	Schnelles Rendern des sichtbaren Bereichs	Tools zur Extraktion von kritischem CSS erforderlich

Progressives Rendering ist eine Kombination dieser und anderer Techniken, die darauf abzielt, die Nutzererfahrung durch Beschleunigung des Renderings der Webseite zu verbessern.