Milyen optimalizálási módszerek léteznek az adatmennyiség csökkentésére a frontend és a szerver között?

• Adatkompresszió: Az algoritmusok (gzip, Brotli) használata a szerveren az adatok küldése előtt.

• Minifikáció és obfuskáció: Felesleges karakterek (szóközök, sortörések) eltávolítása és változók átnevezése JS, CSS, HTML fájlokban a build során.

• Lusta betöltés (Lazy Loading): Erőforrások (képek, komponensek, modulok) csak akkor töltődnek be, amikor szükségesek, nem az oldal első betöltésekor.

• Tree Shaking (használaton kívüli kód eltávolítása): A build eszközök (Webpack, Rollup) képesek elemezni a függőségeket és kizárni a nem használt kódot a végső csomagból.

• Képek optimalizálása:

  • Modern formátumok (WebP, AVIF) használata.
  • Káros vagy veszteségmentes tömörítés.
  • Reszponzív képek (<picture> vagy srcset).
  • Lazy loading képek (loading="lazy").

• Gyorsítótár:

  • Böngésző oldali gyorsítótár (HTTP gyorsítótár fejléc).
  • API adatok gyorsítótárba helyezése a frontendben (pl. állapotkezelő könyvtárak segítségével).

• Oldalrészek és végtelen görgetés: Az adatok részletekben történő betöltése a teljes adathalmaz helyett.

• GraphQL a REST helyett: Csak a szükséges mezőket kérheti a kliens, elkerülve a redundáns adatokat.

• Adatformátum: Kompaktabb formátumok használata, mint például Protocol Buffers vagy MessagePack, XML vagy redundáns JSON helyett.

• HTTP-kérések számának csökkentése: Fájlok összefűzése (CSS, JS), CSS sprite-ok használata.

• Szerveroldali renderelés (SSR) / Statikus oldalak generálása (SSG): Csökkenti az első megjelenítéshez szükséges JS mennyiségét szerveroldali rendereléssel.

• Kérés tömörítése (Request Compression): Ritkán használják, de a POST kérés testének tömörítése is lehetséges.

// React-ben példaként a React.lazy és Suspense használata a komponens késleltetett betöltéséhez
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Betöltés...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Reszponzív kép példája -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Kép leírása">
</picture>