Veb saytın performansını necə optimallaşdırırsınız?

• Şəkil optimallaşdırması:
  • Müasir formatlardan, məsələn, WebP-dən istifadə.
  • Keyfiyyət itkisi olmadan şəkil sıxışdırması.
  • Görünən sahədən kənar şəkillər üçün lazy loading.
  • <picture> və ya srcset istifadə edərək adaptiv şəkillər.
• Resursların minimallaşdırılması və sıxışdırılması:
  • HTML, CSS və JavaScript-in minimallaşdırılması.
  • Mətn resursları üçün Gzip və ya Brotli sıxışdırması.
• Keşləmə:
  • Brauzer keşləməsi HTTP başlıqları (Cache-Control, Expires) ilə.
  • Server tərəfində keşləmə.
  • Offline giriş və daha mürəkkəb keşləmə üçün Service Workers istifadəsi.
• Kritik render yolunun optimallaşdırılması:
  • Kritik olmayan CSS və JavaScript-in gecikdirilməsi.
  • async, defer ilə asinxron skript yüklənməsi.
  • Kritik CSS-in inline olması.
• HTTP sorğularının sayını azaltmaq:
  • CSS və JavaScript fayllarının birləşdirilməsi (HTTP/2-də ehtiyatla).
  • Kiçik ikonlar üçün sprite-lərdən istifadə.
  • Kiçik resursların (məsələn, fontlar və ya SVG-lər) CSS-ə data URIs ilə daxil edilməsi.
• Fontların optimallaşdırılması:
  • Müasir font formatlarından istifadə (WOFF2).
  • Fontların lokal yerləşdirilməsi.
  • Fontların əvvəlcədən yüklənməsi (preload).
  • font-display istifadə edərək fontların yüklənmə zamanı necə göstəriləcəyini idarə etmək.
• JavaScript performansı:
  • Algoritmlərin və məlumat strukturlarının optimallaşdırılması.
  • DOM əməliyyatlarının azaldılması.
  • Hadisə delegasiyasından istifadə.
  • Kodun bölünməsi (code splitting).
• Render və çəkilmənin optimallaşdırılması:
  • Bahalı CSS xüsusiyyətlərindən qaçınmaq.
  • will-change istifadə.
  • Animasiya və keçidlərin optimallaşdırılması.
• CDN (Content Delivery Network) istifadəsi.
• Server tərəfi optimallaşdırması:
  • Sürətli server cavabları.
  • Verilənlər bazası sorğularının optimallaşdırılması.

// Lazy loading üçün nümunə
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

<!-- async və defer istifadə nümunəsi -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display istifadə nümunəsi */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Brauzerin əsas font yüklənənə qədər ehtiyat font istifadə etməsinə imkan verir */
}