Кадом усулҳоро барои суръат бахшидани боркунии вебсайт истифода бурда метавонед?

Ҳадди аққоллаш ва CSS ва JavaScript файлларини бирлаштириш. Расмларни сиғиш ва WebP каби замонавий форматлардан фойдаланиш. Расмлар ва видеолар учун lazy loading (кечиктирилган юклаш) қўллаш. Манбааларни мижоз ва сервер томонида кешлаш. Матн манбаалари учун GZIP сиғиш. HTTP сўровлар сонини камайтириш. CDN (Content Delivery Network)дан фойдаланиш. Рендер қилишнинг муҳим йўлини оптималлаштириш. Ишлатилмаган кодни олиб ташлаш. Offline кириш ва кешлаш учун 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;
}

# Nginxда GZIP сиғиш мисоли
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;