Millised on optimeerimise viisid andmete mahtude vähendamiseks, mis edastatakse frontend ja serveri vahel?

• Andmete tihendamine: Kasutades serveris enne andmete saatmist kliendile, tihendusalgoritme (gzip, Brotli).

• Minimeerimine ja obfuskatsioon: Eemaldada tarbetuid märke (tühikud, reavahetused) ning ümber nimetada muutujad JS, CSS, HTML failides projekti ehitamise ajal.

• Hilislaadimine (Lazy Loading): Laadida ressursid (pildid, komponendid, moodulid) ainult siis, kui need on vajalikud, mitte alglaadimisel.

• Puu raputamise (Tree Shaking): Ehitusvahendid (Webpack, Rollup) saavad analüüsida sõltuvusi ja välistada kasutamata koodi lõplikust paketist.

• Piltide optimeerimine:

  • Kasutada kaasaegseid formaate (WebP, AVIF).
  • Suruda kaotustega või kaotusteta.
  • Kohanduvad pildid (<picture> või srcset).
  • Hilislaadimine (loading="lazy").

• Vahemälu:

  • Brauseri vahemälu (HTTP vahemälu päised).
  • API andmete vahemälu (näiteks oleku haldamise raamatukogudega).

• Lehekülje jagamine ja lõpmatu kerimine: Andmete laadimine osade kaupa kogu andmekogumi asemel.

• GraphQL asemel REST: Annab kliendile võimaluse küsida ainult vajalikke välju, vältides liigseid andmeid.

• Andmevorming: Kasutada kompaktsemaid vorminguid, näiteks Protocol Buffers või MessagePack, XML või JSON asemel.

• HTTP-päringute arvu vähendamine: Failide ühendamine (CSS, JS), kasutades CSS sprite.

• Serveripoolne renderdamine (SSR) / Statiliste saitide genereerimine (SSG): Vähendada JS mahtu, mis on vajalik esmakordseks kuvamiseks, kasutades serveripoolset renderdamist.

• Päringute tihendamine (Request Compression): Harva kasutatav, kuid võimalik tihendada POST-päringute keha.

// React näide React.lazy ja Suspense kasutamisest aeglase laadimisega
import React, { Suspense } from 'react';

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

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

<!-- Kohanduv pildi näide -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Kirjeldus">
</picture>