Lazy loading (líné načítání)

Příklady z praxe

1. 01

   Produktové fotografie pod prvním viewportem

   E-shop má na kategorii 60 produktových fotografií, ale uživatel po otevření vidí jen první dvě řady. Obrázky níž na stránce dostanou atribut loading="lazy", takže prohlížeč je nestahuje hned při prvním vykreslení. První zobrazení kategorie je lehčí, ale rozměry obrázků zůstanou zadané, aby se karta produktu při načtení neposunula.

   <img
     src="/produkty/batoh.webp"
     alt="Černý městský batoh"
     width="800"
     height="600"
     loading="lazy">

2. 02

   Odložené načtení React komponenty

   Účetní dashboard obsahuje drahý graf faktur, který vidí jen část uživatelů. Komponenta grafu se oddělí do samostatného balíku a stáhne se až ve chvíli, kdy se dashboard dostane k jejímu vykreslení. Úvodní JavaScript je menší, ale aplikace musí uživateli ukázat srozumitelný fallback během načítání.

   import { lazy, Suspense } from 'react';
   
   const InvoiceChart = lazy(() => import('./InvoiceChart'));
   
   export function Dashboard() {
     return (
       <Suspense fallback={<p>Načítám graf…</p>}>
         <InvoiceChart />
       </Suspense>
     );
   }

Časté omyly

MýtusLazy loading vždycky zrychlí web.

Ve skutečnostiLazy loading zrychlí hlavně první načtení, pokud odloží zdroje mimo první použitelnou obrazovku. Nevhodné odložení klíčového obrázku, dat nebo komponenty může naopak zhoršit LCP nebo přidat čekání při první interakci.

MýtusStačí dát loading="lazy" na všechny obrázky.

Ve skutečnostiAtribut loading="lazy" není dobrá volba pro každý obrázek. Obrázky viditelné hned po otevření stránky, hlavně hero obrázek nebo důležitý produktový obrázek, mají být načtené prioritně.

Časté dotazy

Může lazy loading poškodit SEO?

Lazy loading může SEO pomoci i uškodit podle toho, co se odkládá. Vyhledávače dnes umí zpracovat mnoho JavaScriptu a líně načtených obrázků, ale hlavní obsah stránky by neměl záviset na pozdní interakci nebo nekonečném scrollu bez alternativy. Lazy loading je bezpečnější pro doplňkové obrázky, galerie, mapy a widgety než pro nadpis, produktový popis nebo primární interní odkazy.

Patří první hero obrázek do lazy loadingu?

Lazy loading se pro hlavní hero obrázek většinou nehodí, protože hero obrázek často ovlivňuje Largest Contentful Paint. Viditelný obrázek nad ohybem stránky má být dostupný co nejdříve a někdy má dostat vyšší prioritu načítání. Lazy loading dává větší smysl pro obrázky níže na stránce, které uživatel uvidí až po scrollování.

Kdy je lepší eager loading než lazy loading?

Eager loading je vhodnější než lazy loading pro zdroje, které jsou nutné k prvnímu použitelnému zobrazení nebo k okamžité interakci. Typickým příkladem je hlavní navigace, základní CSS, data pro první obrazovku nebo komponenta, na kterou uživatel klikne hned po otevření stránky. Lazy loading má smysl tam, kde odklad nezablokuje první úkol uživatele.

Jak měřit přínos lazy loadingu v reálném webu?

Přínos lazy loadingu se měří porovnáním chování před úpravou a po úpravě na podobných stránkách, zařízeních a sítích. Důležitý není jen menší úvodní balík, ale také LCP, CLS, čas do interakce a zpoždění při pozdějším zobrazení odloženého obsahu. Dobrá implementace zlepší první načtení, aniž by vytvořila citelné čekání po scrollu nebo kliknutí.

Zdroje

1. Lazy loading(otevře se v novém okně)MDN Web Docs
2. HTMLImageElement: loading property(otevře se v novém okně)MDN Web Docs
3. HTML Standard(otevře se v novém okně)WHATWG
4. lazy(otevře se v novém okně)React
5. Intersection Observer(otevře se v novém okně)W3C

Související pojmy

• ORMORM je vrstva softwaru, která mapuje objekty v aplikaci na tabulky a vztahy v relační databázi. Umožňuje pracovat s daty přes třídy, entity a metody místo ručního skládání SQL pro každý dotaz, ale zároveň přidává abstrakci, jejíž chování, výkon a transakce musí vývojář chápat.
• Largest Contentful PaintLargest Contentful Paint je metrika webového výkonu, která měří dobu od začátku načítání stránky do okamžiku, kdy se v okně prohlížeče vykreslí největší obrázkový nebo textový blok. Patří mezi Core Web Vitals od Googlu a hodnotí se jako dobrá do 2,5 sekundy měřeno na 75. percentilu reálných návštěv.
• Code splittingCode splitting je technika, při které se JavaScriptový balík aplikace rozdělí na menší soubory (chunky), jež prohlížeč stahuje až ve chvíli, kdy jsou skutečně potřeba. Místo jednoho velkého bundlu se při prvním načtení přenese jen kód nutný pro zobrazenou stránku, zbytek dorazí později na vyžádání.
• Cumulative Layout ShiftCumulative Layout Shift je metrika ze sady Core Web Vitals, která měří, jak moc se viditelný obsah stránky během načítání a používání samovolně posune. Hodnota vzniká součtem jednotlivých posunů, kde každý se počítá jako podíl zasažené plochy viewportu vynásobený vzdáleností posunu. Za dobrou se považuje hodnota do 0,1.
• Splash screenSplash screen je úvodní obrazovka s logem nebo grafikou, kterou aplikace zobrazí okamžitě po spuštění a nechá běžet, dokud se nenačte hlavní rozhraní. Slouží k překlenutí startovací prodlevy a k potvrzení, že se aplikace opravdu spustila. Na Androidu i iOS ji definuje systém, na webu ji řeší manifest progresivní webové aplikace.
• Page experiencePage experience je souhrn signálů, kterými Google hodnotí, jak se návštěvníkovi stránka používá nezávisle na obsahu: rychlost načtení a stabilita měřené přes Core Web Vitals, zabezpečení přes HTTPS, použitelnost na mobilu a absence rušivých vyskakovacích prvků. Do vyhledávání vstupuje jako doplňkový faktor, nikoli jako náhrada za kvalitní obsah.
• Skeleton screenSkeleton screen je způsob zobrazení načítacího stavu, při kterém rozhraní ukáže šedé obrysy budoucího obsahu (bloky místo textu, obdélníky místo obrázků) namísto spinneru. Uživatel tak vidí strukturu stránky dřív, než dorazí data, čekání mu připadá kratší a po dokreslení obsahu nedochází k poskakování rozvržení.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.