Frontend və server arasında ötürülən məlumatların…

Məlumatların sıxılması: Məlumatların göndərilməsindən əvvəl serverdə gzip, Brotli kimi sıxışdırma alqoritmlərindən istifadə.
Minifikasiya və obfuskasiya: Lazımsız simvolların (boşluqlar, sətir sonları) silinməsi və JS, CSS, HTML fayllarında dəyişən adlarının yenidən təyin edilməsi.
Lazımsız yükləmə (Lazy Loading): Resursların (şəkillər, komponentlər, modullar) yalnız lazım olduqda yüklənməsi, səhifənin ilkin yüklənməsində deyil.
Tree Shaking (istifadə olunmayan kodun çıxarılması): Yığma alətləri (Webpack, Rollup) asılılıqları analiz edə və istifadə olunmayan kodu çıxara bilər.
Şəkil optimallaşdırması:
- Müasir formatların istifadəsi (WebP, AVIF).
- Zərərli və ya zərərsiz sıxışdırma.
- Adaptiv şəkillər (<picture> və ya srcset).
- Şəkillərin lazy yüklənməsi (loading="lazy").
Keşləmə:
- Brauzer tərəfində keşləmə (HTTP keş başlıqları).
- API məlumatlarının önbelleğe alınması (məsələn, vəziyyət idarəetmə kitabxanaları ilə).
Səhifə bölmələri və sonsuz sürüşdürmə: Bütün məlumatların tam yüklənməsi yerinə, məlumatların hissə-hissə yüklənməsi.
GraphQL REST yerinə: Müştərinin yalnız lazım olan sahələri soruşmasına imkan verir, artıq məlumatların qarşısını alır.
Məlumat formatı: Protocol Buffers və ya MessagePack kimi daha sıxılmış formatların istifadəsi, XML və ya artıq JSON yerinə.
HTTP sorğularının sayını azaltmaq: Faylların birləşdirilməsi (CSS, JS), CSS sprite-lərindən istifadə.
Server tərəfi render (SSR) / Statik saytların yaradılması (SSG): İlk göstərim üçün lazım olan JS miqdarını azaltmaq üçün serverdə render etmək.
Sorğu sıxışdırması (Request Compression): Nadir istifadə olunur, amma POST sorğularının gövdəsini sıxışdırmaq mümkündür.

// React-də React.lazy və Suspense istifadə edərək komponentin tənbəl yüklənməsi nümunəsi
import React, { Suspense } from 'react';

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

function App() {
  return (
    <div>
      <Suspense fallback={<div>Yüklənir...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

<!-- Adaptiv şəkil nümunəsi -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Şəkil təsviri">
</picture>

Frontend və server arasında ötürülən məlumatların miqdarını azaltmaq üçün hansı optimallaşdırma üsulları mövcuddur?