Jakie są metody optymalizacji zmniejszania ilości…

Kompresja danych: Użycie algorytmów kompresji (gzip, Brotli) na serwerze przed wysłaniem danych do klienta.
Minifikacja i obfuskacja: Usuwanie zbędnych znaków (spacji, łamań linii) i zmiana nazw zmiennych w plikach JS, CSS, HTML podczas budowania projektu.
Lazy Loading (leniwe ładowanie): Ładowanie zasobów (obrazów, komponentów, modułów) tylko wtedy, gdy są potrzebne, a nie podczas początkowego ładowania strony.
Tree Shaking (usuwanie nieużywanego kodu): Narzędzia do budowania (Webpack, Rollup) mogą analizować zależności i wykluczać z końcowego pakietu nieużywany kod.
Optymalizacja obrazów:
- Użycie nowoczesnych formatów (WebP, AVIF).
- Kompresja z utratą lub bez utraty jakości.
- Obrazy responsywne (<picture> lub srcset).
- Lazy loading obrazów (loading="lazy").
Caching:
- Cache po stronie przeglądarki (nagłówki cache HTTP).
- Cache danych API na froncie (np. za pomocą bibliotek do zarządzania stanem).
Paginacja i nieskończony scroll: Ładowanie danych porcjami zamiast pełnego zestawu danych.
GraphQL zamiast REST: Pozwala klientowi żądać tylko potrzebnych pól, unikając nadmiarowych danych.
Format danych: Użycie bardziej kompaktowych formatów do wymiany danych, takich jak Protocol Buffers lub MessagePack, zamiast XML lub nadmiarowego JSON.
Zmniejszenie liczby zapytań HTTP: łączenie plików (CSS, JS), użycie sprite'ów CSS.
Renderowanie po stronie serwera (SSR) / Generowanie statycznych stron (SSG): Zmniejszenie ilości JS potrzebnego do początkowego wyświetlenia poprzez renderowanie na serwerze.
Kompresja zapytań (Request Compression): Rzadko używane, ale możliwe do kompresji ciała zapytań POST.

// Przykład leniwego ładowania komponentu w React z użyciem React.lazy i Suspense
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Ładowanie...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Przykład obrazka responsywnego -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Opis obrazu">
</picture>

Jakie są metody optymalizacji zmniejszania ilości danych przesyłanych między frontendem a serwerem?