Kokie yra optimizavimo būdai, siekiant sumažinti…

Duomenų suspaudimas: Naudoti suspaudimo algoritmus (gzip, Brotli) serveryje prieš siunčiant duomenis klientui.
Minifikacija ir obfuskacija: Pašalinti nereikalingus simbolius (tuštumas, eilutės pertraukos) ir pervardyti kintamuosius JS, CSS, HTML failuose projekto kūrimo metu.
Vėlyvas įkėlimas (Lazy Loading): Įkelti išteklius (vaizdus, komponentus, modulius) tik tada, kai jų reikia, o ne pradiniame įkėmime.
Nepanaudoto kodo šalinimas (Tree Shaking): Konstravimo įrankiai (Webpack, Rollup) gali analizuoti priklausomybes ir išskirti nenaudojamą kodą galutiniame pakete.
Vaizdų optimizavimas:
- Naudoti šiuolaikinius formatus (WebP, AVIF).
- Suspaudimas su praradimais arba be jų.
- Adaptuojami vaizdai (<picture> arba srcset).
- Vėlyvas vaizdų įkėlimas (loading="lazy").
Talpykla:
- Naršyklės pusės talpykla (HTTP talpyklos antraštės).
- API duomenų talpykla (pvz., naudojant būsenos valdymo bibliotekas).
Puslapių skaidymas ir begalinis slinkimas: Duomenų įkėlimas dalimis vietoj viso duomenų rinkinio.
GraphQL vietoj REST: Leidžia klientui užklausti tik reikalingus laukus, išvengiant perteklinių duomenų.
Duomenų formatas: Naudoti kompaktiškesnius formatus, pvz., Protocol Buffers ar MessagePack, vietoj XML ar perteklinio JSON.
HTTP užklausų skaičiaus mažinimas: Sujungti failus (CSS, JS), naudoti CSS spraitus.
Serverio pusės atvaizdavimas (SSR) / Statinių svetainių generavimas (SSG): Sumažinti JS kiekį, reikalingą pradinei atvaizdavimui, naudojant serverio atvaizdavimą.
Užklausų suspaudimas (Request Compression): Nors retai naudojama, tačiau galima suspausti POST užklausų kūną.

// React pavyzdys su React.lazy ir Suspense lėtai įkeliant komponentą
import React, { Suspense } from 'react';

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

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

<!-- Adaptuojamas vaizdo pavyzdys -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Aprašymas">
</picture>

Kokie yra optimizavimo būdai, siekiant sumažinti duomenų kiekį, perduodamą tarp frontend ir serverio?