Jak lazy-loadujete obrázky a komponenty a proč?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** odkládá stahování něčeho, dokud to není skutečně potřeba — obvykle až se to chystá naskrolovat do zobrazení. To zmenší počáteční payload, takže se viditelná část stránky načte rychleji. ## Lazy-loading obrázků Prohlížeč to zvládne nativně jediným atributem: ```html

``` Vždy ponechte `width`/`height`, aby prohlížeč rezervoval místo (vyhne se layout shiftu). Nikdy lazy-loadingem nenačítejte svůj LCP obrázek — zdrží to právě to, co se měří. ## Lazy-loading komponent (kódu) Rozdělte náročné nebo zřídka používané UI (modaly, grafy) do samostatného chunku načteného na vyžádání: ```js // Místo statického importu, který se pošle v hlavním bundlu: const Chart = React.lazy(() => import("./Chart")); // samostatný chunk, načten při vykreslení }> ``` Dynamický `import()` řekne bundleru, aby vytvořil samostatný soubor, který se stáhne, až se `` poprvé vykreslí. ## Proč je to důležité Lazy-loading je nejjednodušší výhra s nejvyšší pákou pro těžkou stránku: méně ke stažení předem znamená rychlejší LCP a méně JS k parsování. Tazatelé chtějí vidět, že *ne*lazy-loadujete hero obrázek — klasická chyba, která poškodí právě tu metriku, které se snažíte pomoci.

Lazy-loading obrázků

Lazy-loading komponent (kódu)

Proč je to důležité

Související otázky