Веб-сайттын жүктөлүү убактысын кыскартуу үчүн кайсы ыкмаларды колдонсо болот?

CSS жана JavaScript файлдарын минималдаштыруу жана бириктирүү: Сүрөттөрдү кысуу жана WebP сыяктуу заманбап форматтарды колдонуу: Сүрөттөр жана видеолор үчүн lazy loading (кечиктирилген жүктөө): Ресурстарды кардар жана сервер тараптан кэшке алуу: GZIP кысуу тексттик ресурстар үчүн: HTTP суроолорду азайтуу: CDN (Content Delivery Network) колдонуу: Критикалык рендер жолун оптималдаштыруу: Колдонулбаган кодду алып салуу: Офлайн кирүү жана кэшке алуу үчүн Service Workers колдонуу:

// Сүрөт үчүн lazy loading мисалы
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);
});

Сүрөт форматтарынын салыштырылышы:

Формат	Түшүнүктүү колдонуу	Өзгөчөлүктөрү
JPEG	Сүрөттөр	Жоготмо кысуу, кең түстөр диапазону
PNG	Түстүү жана ачыктык менен графика, логотиптер	Жоготпоо кысуу, ачыктыкты колдоо
GIF	Анимацияланган сүрөттөр	Жоготпо кысуу, анимацияны колдоо
WebP	Сүрөттөр жана графика	Эффективдүү кысуу (жоготмо жана жоготмо эмес), ачыктык жана анимацияны колдоо

/* CSSти бириктирүү жана минималдаштыруу мисалы */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Колдонулбаган код алынып салынды */
}

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

# GZIP кысуу Nginxте мисалы
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;