Veb səhifələrin optimallaşdırılması üçün hansı…

Tənqidi render yolunun optimallaşdırılması (CRP): Kritikal resursların (CSS, JavaScript) prioritetləşdirilməsi ilə yükləmə, render və məzmunun "üst xətt"də göstərilməsi vaxtını qısaltmaq.
HTTP sorğularının minimallaşdırılması: CSS, JavaScript fayllarının birləşdirilməsi və minifikasiya olunması, şəkillər üçün sprite-lərdən istifadə.
Lazımi yükləmə (Lazy Loading): Resursların (şəkillər, videolar) istifadəçiyə görünənə qədər gecikdirilməsi.
Şəkillərin optimallaşdırılması: Keyfiyyət itkisi olmadan sıxışdırma, müasir formatların istifadəsi (WebP), cavab verən şəkillər (srcset, sizes).
Keş: Brauzer və server keşindən istifadə edərək yükləmə vaxtını azaltmaq və yenidən yükləmələri sürətləndirmək.
CDN (Content Delivery Network): Məzmunu coğrafi olaraq yayılmış serverlərə paylamaqla gecikməni azaltmaq.
Asinxron və gecikdirilmiş skriptlərin yüklənməsi: <script> üçün async və defer atributlarından istifadə.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Fontların optimallaşdırılması: font-display: swap istifadə edərək FOUC (Flash Of Unstyled Content) qarşısını almaq, yalnız lazım olan simvol dəstlərini yükləmək.
```
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Görünməz mətnin qarşısını alır */
}
```
İstifadə olunmayan CSS və JavaScript-in silinməsi: Chrome DevTools Coverage kimi analiz alətləri və Webpack, Parcel kimi paketləyicilər istifadə edilərək istifadə olunmayan kodun müəyyənləşdirilməsi və silinməsi.
SSR (Server-Side Rendering) və ya pre-rendering: Səhifənin qismən və ya tam olaraq serverdə render olunması, performans və SEO-nu yaxşılaşdırmaq üçün, xüsusən SPA (Single Page Applications) üçün.

Web Workers: JavaScript-in resurs tələb edən tapşırıqlarını fon rejimində icra etmək, əsas UI axını bloklamadan.

// Web Worker yaradılması
const worker = new Worker('worker.js');

// Veriləri worker-ə göndərmək
worker.postMessage({ data: 'some data' });

// Worker-dən gələn mesajların işlənməsi
worker.onmessage = (event) => {
  console.log('Worker-dən alınan:', event.data);
};

PWA (Progressive Web Apps): Service worker-lərdən istifadə edərək keş və offline giriş.
Performans analizi: Lighthouse, PageSpeed Insights, WebPageTest, Chrome DevTools Performance tab kimi vasitələrdən müntəzəm istifadə.

Veb səhifələrin optimallaşdırılması üçün hansı yanaşmaları bilirsiniz?