Co je to progresivní vykreslování?

Progresivní renderování je technika zlepšování výkonu webových stránek, při které se obsah načítá a zobrazuje etapově, nikoli najednou. To zlepšuje vnímaný výkon a interaktivitu tím, že umožňuje uživateli vidět a interagovat s částí stránky dříve, než jsou načteny všechny zdroje.

Hlavní přístupy:

Lazy Loading (odkládané načítání): Obrázky, videa nebo jiné náročné prvky se načítají pouze tehdy, když jsou viditelné v viewportu uživatele.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Popis obrázku">
```
Streaming rendering: Posílání HTML kódu po částech, což umožňuje prohlížeči začít analyzovat a renderovat dříve, než obdrží celou stránku.

Server-side rendering (SSR) nebo Hydratace: Generování počátečního HTML na serveru pro rychlé zobrazení obsahu, a poté "oživení" statické struktury na klientovi pomocí JavaScriptu pro interaktivitu.

// Příklad konceptu hydratace
// Na klientovi
const appElement = document.getElementById('app');
// Montáž aplikace Vue/React/etc. na stávající DOM strukturu
Vue.createApp(App).mount(appElement);
// nebo React.hydrate(<App />, appElement);

Prioritizace viditelného obsahu (Above-the-fold rendering): Načítání a renderování viditelného obsahu v první části stránky (bez posunu), s odloženým načítáním zbytku.

Použití progresivního renderování zlepšuje hlavní metriky Web Vitals:

Largest Contentful Paint (LCP): Zrychluje zobrazení největšího prvku.
First Contentful Paint (FCP): Zkracuje dobu do zobrazení prvního obsahu.
Cumulative Layout Shift (CLS): Ačkoliv to není přímo, správné použití placeholders a lazy loading může pomoci snížit neočekávané posuny obsahu.