Mi az a progresszív renderelés?

A progresszív renderelés egy olyan technika, amely javítja a weboldalak teljesítményét, ahol a tartalom lépésenként töltődik be és jelenik meg, nem egyszerre. Ez javítja a teljesítmény és az interaktivitás észlelését, lehetővé téve a felhasználó számára, hogy lásson és interakcióba lépjen a oldal egy részével, mielőtt az összes erőforrás teljesen betöltődne.

Fő megközelítések:

Lazy Loading (késleltetett betöltés): Képek, videók vagy más erőforrás-igényes elemek csak akkor töltődnek be, amikor a felhasználó látóterében jelennek meg.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Kép leírása">
```
Streaming renderelés: HTML kód részletekben történő küldése, lehetővé téve a böngésző számára, hogy elkezdje az elemzést és a renderelést, mielőtt az egész oldal megérkezne.

Szerveroldali renderelés (SSR) vagy hidratálás: Az elsődleges HTML generálása a szerveren a gyors tartalom megjelenítéséhez, majd a statikus szerkezet "felélesztése" JavaScript segítségével a kliensen az interaktivitás érdekében.

// Hidratálási koncepció példája
// A kliensen
const appElement = document.getElementById('app');
// Vue/React stb. alkalmazás telepítése a meglévő DOM struktúrára
Vue.createApp(App).mount(appElement);
// vagy React.hydrate(<App />, appElement);

A látható tartalom priorizálása (Above-the-fold renderelés): A látható tartalom betöltése és renderelése az oldal első részében ( görgetés nélkül ), a többi késleltetett betöltésével.

A progresszív renderelés alkalmazása javítja a Web Vitals fő metrikáit:

Largest Contentful Paint (LCP): Gyorsítja a legnagyobb elem megjelenését.
First Contentful Paint (FCP): Csökkenti az első tartalom megjelenéséig eltelt időt.
Cumulative Layout Shift (CLS): Bár nem közvetlenül, a helykitöltők és a lazy loading helyes használata segíthet csökkenteni a váratlan tartalom elmozdulásokat.