Mi az a progresszív renderelés?

A progresszív renderelés egy olyan módszer, amely optimalizálja a weboldal betöltési és megjelenítési sebességét, ahol a tartalom lépcsőzetesen töltődik be és jelenik meg, nem pedig egyszerre.

Fő előnyei:

Gyorsabb első értelmes tartalom (First Meaningful Paint) megjelenítése.
Javított észlelés a betöltési sebességről a felhasználó által.
Csökkentett idő az interaktív állapotig (Time to Interactive).

A progresszív renderelés fő technikái a következők:

Lazy Loading: Nem lényeges erőforrások (például képek vagy videók) késleltetett betöltése, amíg a felhasználó nem szükségli őket (amíg nem görget a lapon).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Példa kép" loading="lazy">
```

Szerveroldali renderelés (SSR): A HTML oldal generálása a szerveren, és a már renderelt tartalom küldése a böngészőnek.

// Példa SSR keretrendszer használatára (pl. Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Adatok lekérése a szerveren
//   const data = await fetchData();
//   return {
//     props: { data }, // Adatok átadása a komponensnek
//   }
// }
//
// function MyPage({ data }) {
//   // Komponens renderelése az adatokkal
//   return <div>{/* ... */}</div>
// }

Kliensoldali renderelés (CSR) hidratációval: A böngésző minimális HTML-t és JavaScriptet kap. A JavaScript betölti az adatokat és teljesen rendereli az oldalt a böngészőben. A hidratáció az a folyamat, amikor az eseménykezelőket hozzákapcsolják a már renderelt SSR tartalomhoz a kliensen.

HTML streaming: HTML részletekben történő küldése, amint azok generálódnak a szerveren, lehetővé téve a böngésző számára, hogy elkezdje a parse-olást és renderelést még az egész dokumentum betöltése előtt.

<!-- Feltételezett streaming példa -->
<html>
  <head>
    <title>Streaming oldal</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Az elsőként küldött HTML rész -->
    <h1>Cím</h1>
    <script src="script.js" async></script>
    <!-- A többi HTML később küldhető -->
  </body>
</html>

Kritikus CSS / Inline Critical CSS: A CSS stílusok inline beágyazása, amelyek szükségesek az oldal látható részének megjelenítéséhez (Above the Fold), hogy gyorsítsák az első renderelést. A többi stílus aszinkron módon töltődik be.

Technikák	Leírás	Előnyök	Hátrányok
Lazy Loading	A nem látható területen lévő erőforrások késleltetett betöltése	Gyorsabb látható tartalom betöltése	JavaScript szükséges lehet a megvalósításhoz
SSR	Szerveroldali renderelés, kész HTML küldése	Gyors első tartalom renderelése, SEO-barát	Növeli a szerver terhelését
CSR hidratációval	Kezdeti renderelés a kliens oldalon, majd SSR tartalom hidratálása	Dinamikus alkalmazások	Lassú betöltés és interaktivitás SSR nélkül
HTML streaming	HTML részletekben történő küldése	Gyors parse-elés kezdete	A szerver implementációjától függ
Kritikus CSS	Inline stílusok beágyazása a látható részhez	Gyors látható rész renderelése	Eszközök szükségesek a kritikus CSS kivonásához

A progresszív renderelés ezeknek és más technikáknak a kombinációja, amely a felhasználói élmény javítását célozza azzal, hogy felgyorsítja a weboldal renderelését.