Aké sú spôsoby optimalizácie na zníženie objemu dát…

Komprimácia dát: Použitie algoritmov kompresie (gzip, Brotli) na serveri pred odoslaním dát klientovi.
Minifikácia a obfuskácia: Odstránenie zbytočných znakov (medzery, riadkové zlomky) a premenovanie premenných v JS, CSS, HTML súboroch počas build procesu.
Lazy Loading: Načítanie zdrojov (obrázkov, komponentov, modulov) iba v prípade potreby, nie pri prvom načítaní stránky.
Odstránenie nepoužívaného kódu (Tree Shaking): Nástroje na build (Webpack, Rollup) môžu analyzovať závislosti a vylúčiť z výsledného balíka nepoužívaný kód.
Optimalizácia obrázkov:
- Použitie moderných formátov (WebP, AVIF).
- Kompresia s stratami alebo bez strát.
- Responzívne obrázky (<picture> alebo srcset).
- Lazy loading obrázkov (loading="lazy").
Caching:
- Cache na strane prehliadača (HTTP hlavičky cache).
- Cache dát API na frontende (napríklad pomocou knižníc na správu stavu).
Paginácia a nekonečné rolovanie: Načítanie dát po častiach namiesto úplného načítania celého datasetu.
GraphQL namiesto REST: Umožňuje klientovi žiadať len o tie polia, ktoré potrebuje, čím sa vyhýba nadbytočným dátam.
Formát dát: Použitie kompaktnejších formátov na výmenu dát, ako sú Protocol Buffers alebo MessagePack, namiesto XML alebo nadbytočného JSON.
Zníženie počtu HTTP požiadaviek: Zlúčenie súborov (CSS, JS), použitie CSS sprite-ov.
Server-side rendering (SSR) / Generovanie statických stránok (SSG): Zníženie objemu JS potrebného na prvé zobrazenie, vďaka renderovaniu na serveri.
Komprimácia požiadaviek (Request Compression): Zriedkavo používané, ale možné komprimovať telo POST požiadaviek.

// Príklad lazy loading komponenty v React pomocou React.lazy a Suspense
import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Načítava sa...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Príklad responzívneho obrázka -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Popis obrázka">
</picture>

Aké sú spôsoby optimalizácie na zníženie objemu dát prenášaných medzi frontendom a serverom?