Čo je progresívne vykresľovanie?

Progresívne renderovanie je technika na zlepšenie výkonu webových stránok, pri ktorej sa obsah načítava a zobrazuje etapovo, nie naraz. To zlepšuje vnímaný výkon a interaktivitu tým, že umožňuje používateľovi vidieť a interagovať s časťou stránky skôr, než sú všetky zdroje úplne načítané.

Hlavné prístupy:

Lazy Loading (lenivé načítanie): Obrázky, videá alebo iné náročné prvky sa načítajú iba vtedy, keď sa stanú viditeľnými v viewport používateľa.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Popis obrázka">
```
Streaming renderovanie: Posielanie HTML kódu po častiach, čo umožňuje prehliadaču začať s analýzou a renderovaním skôr, než dostane celú stránku.

Server-side rendering (SSR) alebo Hydratácia: Generovanie počiatočného HTML na serveri pre rýchle zobrazenie obsahu, a následne "oživenie" statickej štruktúry na klientovi pomocou JavaScriptu.

// Príklad konceptu hydratácie
// Na klientovi
const appElement = document.getElementById('app');
// Montáž Vue/React/etc. aplikácie na existujúcu DOM štruktúru
Vue.createApp(App).mount(appElement);
// alebo React.hydrate(<App />, appElement);

Prioritizácia viditeľného obsahu (Above-the-fold rendering): Načítanie a renderovanie viditeľného obsahu v prvej časti stránky (bez posúvania), s odloženým načítaním zvyšku.

Použitie progresívneho renderovania zlepšuje hlavné metriky Web Vitals:

Largest Contentful Paint (LCP): Zrýchľuje zobrazenie najväčšieho prvku.
First Contentful Paint (FCP): Skracuje čas do zobrazenia prvého obsahu.
Cumulative Layout Shift (CLS): Hoci to nie je priamo, správne použitie placeholders a lazy loading môže pomôcť znížiť neočakávané posuny obsahu.