Веб-сайттын иштөөчәндігін кандайча оптималдаштырасыз?

• Сүрөттөрдү оптималдаштыруу:
  • WebP сыяктуу заманбап форматтарды колдонуу.
  • Сүрөттөрдү сапатын жоготпостон сыдыруу.
  • Lazy loading аркылуу көрүнбөгөн сүрөттөрдү жүктөө.
  • <picture> же srcset колдонуп адаптивдүү сүрөттөр.
• Ресурстарды минималдаштыруу жана сыдыруу:
  • HTML, CSS жана JavaScript минималдаштыруу.
  • Gzip же Brotli сыдыруу тексттик ресурстар үчүн.
• Кэшке сактоо:
  • Браузердин кэшке сактоосу HTTP башталыштары аркылуу (Cache-Control, Expires).
  • Сервер тараптан кэшке сактоо.
  • Offline жеткиликтүүлүк жана көбүрөөк кэшке башкаруу үчүн Service Workers колдонуу.
• Чийки рендеринг жолун оптималдаштыруу:
  • Критикалык эмес CSS жана JavaScriptти кечиктирип жүктөө.
  • Асинхрон жүктөө (async, defer).
  • Критикалык CSSди ички кылуу.
• HTTP суроолорунун санын азайтуу:
  • CSS жана JavaScript файлдарын бириктирүү (HTTP/2дө сак болуу менен).
  • Кичинекей иконалар үчүн sprite колдонуу.
  • Data URIs аркылуу CSSке кичинекей ресурстарды киргизүү.
• Шрифттерди оптималдаштыруу:
  • Modern форматтарды колдонуу (WOFF2).
  • Шрифттерди жергиликтүү жайгаштыруу.
  • Шрифттерди алдын ала жүктөө (preload).
  • font-display колдонуу менен шрифттердин көрсөтүлүшүн башкаруу.
• JavaScriptтин иштешин жогорулатуу:
  • Алгоритмдерди жана маалымат структураларын оптималдаштыруу.
  • DOM операцияларын азайтуу.
  • Окуя делегациясын колдонуу.
  • Кодду бөлүү (code splitting).
• Рендеринг жана көргөзүүнү оптималдаштыруу:
  • Кымбат CSS касиеттеринен качуу.
  • will-change колдонуу.
  • Анимациялар жана өтүүлөрдү оптималдаштыруу.
• CDN (Content Delivery Network) колдонуу.
• Сервердик бөлүктү оптималдаштыруу:
  • Жоопту тез берүү.
  • Базадагы суроолорду оптималдаштыруу.

// Lazy жүктөө үчүн сүрөт мисалы
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 жана defer колдонуу үчүн мисал -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display колдонуу үчүн мисал */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Браузерге резервдик шрифт колдонууга мүмкүндүк берет, негизгиси жүктөлгөнчө */
}