Veb-saytın yüklənmə sürətini artırmaq üçün hansı metodlardan istifadə edə bilərsiniz?

CSS və JavaScript fayllarının minimallaşdırılması və birləşdirilməsi. Şəkillərin sıxılması və WebP kimi müasir formatlardan istifadə. Şəkil və videolar üçün lazy loading (tələsmə yük) istifadə. Resursların müştəri və server tərəfində keşikdə saxlanması. Mətn resursları üçün GZIP sıxılması. HTTP sorğularının sayını azaltmaq. CDN (Content Delivery Network) istifadə. Render kritik yolunun optimallaşdırılması. İstifadə olunmayan kodların silinməsi. Offline giriş və keşikdə saxlama üçün Service Workers istifadə.

// Bir şəkil üçün lazy loading nümunəsi
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;
      observer.unobserve(img);
    }
  });
});

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

Şəkil formatlarının müqayisəsi:

Format	Tipik istifadə	Xüsusiyyətlər
JPEG	Fotoşəkillər	Zərərli sıxma, geniş rəng diapazonu
PNG	Şəffaflıq olan qrafika, loqotiplər	Zərərsiz sıxma, şəffaflıq dəstəyi
GIF	Animasiya şəkillər	Zərərsiz sıxma, animasiya dəstəyi
WebP	Fotoşəkillər və qrafika	Daha effektiv sıxma (zərərli və zərərsiz), şəffaflıq və animasiya dəstəyi

/* CSS-nin birləşdirilməsi və minimallashtırılması nümunəsi */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* İstifadə olunmayan kod silindi */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Nginx-də GZIP sıxma nümunəsi
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;