Səhifənin optimallaşdırılması üçün hansı metodları…

Resursların minimallaşdırılması və sıxılması:
- HTML, CSS, JavaScript: Artıq boşluqları, şərhləri, sətir sonlarını silmək, dəyişən adlarını qısaltmaq.
- Şəkillər: Formatların optimallaşdırılması (WebP, AVIF), keyfiyyət itkisi olmadan sıxışdırma, cavab verən şəkillərdən istifadə.
CDN (Content Delivery Network) istifadəsi: Statik resursların istifadəçiyə ən yaxın serverlərdən paylanması gecikməni azaldır.
Brauzer keşi: Müvafiq HTTP başlıqlarını (Cache-Control, Expires) qurmaq, statik resursların müştəri tərəfində keşikdə saxlanması.
Lazımi yükləmə (Lazy Loading): Şəkillər, videolar və digər ağır resursların yalnız görünən sahəyə daxil olduqda yüklənməsi.
JavaScript və CSS-in asinxron və gecikdirilmiş yüklənməsi: async və defer atributlarından istifadə, CSS-in kritik yol xaricində yüklənməsi.
Kritik CSS-nin optimallaşdırılması: HTML <head>-də minimal CSS toplusunun daxil edilməsi, qalan CSS-in asinxron yüklənməsi.
HTTP sorğularının sayını azaltmaq:
- CSS və JavaScript fayllarını birləşdirmək.
- Kiçik şəkillər üçün sprite-lərdən istifadə.
Fontların optimallaşdırılması:
- WOFF2 formatından istifadə.
- font-display-dən istifadə.
- Kritik fontların əvvəlcədən yüklənməsi.
Server-Side Rendering (SSR) və ya Static Site Generation (SSG): Səhifənin bir hissəsinin və ya tamamilə serverdə render edilməsi, bu ilk məzmun və indeksləşdirmə vaxtını yaxşılaşdırır.
Şəkillərin optimallaşdırılması:
- Müxtəlif cihazlar üçün düzgün ölçülər.
- <picture> və srcset-dən istifadə.
- Keyfiyyət itkisi ilə sıxışdırma.

Resource Hints (preconnect, prefetch, preload) istifadəsi: Brauzerə yaxın zamanda lazım ola biləcək resurslar haqqında ipucları.

<!-- Resurs üçün domenə əvvəlcədən qoşulma -->
<link rel="preconnect" href="https://example.com">
<!-- Resursu əvvəlcədən yükləmə -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Resursu əvvəlcədən alma -->
<link rel="prefetch" href="/next-page.html">

DOM-un optimallaşdırılması: DOM ağacının dərinliyini azaltmaq, döngələrdə bahalı DOM oxuma/yazma əməliyyatlarından qaçınmaq.
Renderin optimallaşdırılması (Layout, Paint, Composite): Stil və layout hesablamalarını məcburi yenidən hesablamalardan qaçın, CSS xüsusiyyətlərindən istifadə edin ki, bütün səhifənin yenidən çəkilməsinə səbəb olmasın (məsələn, transform, opacity top, left əvəzinə).
Web Workers istifadə: Resursa intensiv hesablamaları UI-nin əsas axınını bloklamadan ayrı axınlara köçürün.
Progressive Loading: Məzmunu yükləndikcə göstərin.

Səhifənin optimallaşdırılması üçün hansı metodları bilirsiniz?