Jaké jsou způsoby optimalizace pro snížení objemu dat…

Data komprese: Použití algoritmů komprese (gzip, Brotli) na serveru před odesláním dat klientovi.
Minifikace a obfuskace: Odstranění zbytečných znaků (mezery, řádkové přerušení) a přejmenování proměnných v JS, CSS, HTML souborech při sestavení projektu.
Líné načítání (Lazy Loading): Načítání zdrojů (obrázků, komponent, modulů) pouze tehdy, když jsou potřeba, nikoli při počátečním načtení stránky.
Tree Shaking (odstranění nepoužívaného kódu): Nástroje pro sestavení (Webpack, Rollup) mohou analyzovat závislosti a vyloučit z výsledného balíčku nepoužívaný kód.
Optimalizace obrázků:
- Použití moderních formátů (WebP, AVIF).
- Komprese s nebo bez ztráty kvality.
- Responzivní obrázky (<picture> nebo srcset).
- Lazy načítání obrázků (loading="lazy").
Caching:
- Caching na straně prohlížeče (HTTP hlavičky cache).
- Caching dat API na frontendu (například pomocí knihoven pro správu stavu).
Paginace a nekonečné rolování: Načítání dat po částech místo načítání celého datasetu.
GraphQL místo REST: Umožňuje klientovi požadovat pouze ta pole, která potřebuje, čímž se vyhýbá nadbytečným datům.
Formát dat: Použití kompaktnějších formátů pro výměnu dat, jako jsou Protocol Buffers nebo MessagePack, místo XML nebo nadbytečného JSON.
Snížení počtu HTTP požadavků: Sloučení souborů (CSS, JS), použití CSS spriteů.
Server-side rendering (SSR) / Generování statických stránek (SSG): Snížení objemu JS potřebného pro počáteční zobrazení díky renderování na serveru.
Komprese požadavků (Request Compression): Zřídka používané, ale možné komprimovat tělo POST požadavků.

// Příklad lazy loading komponenty v React s React.lazy a Suspense
import React, { Suspense } from 'react';

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

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

<!-- Příklad adaptivního obrázku -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Popis obrázku">
</picture>

Jaké jsou způsoby optimalizace pro snížení objemu dat přenášených mezi frontendem a serverem?