Veb-saytning ishlashini qanday optimallashtirasiz?

• Rasm optimallashtirish:
  • Zamonaviy formatlardan, masalan, WebP, foydalanish.
  • Sifatni yo'qotmasdan rasm siqishni amalga oshirish.
  • Ko‘rish maydonidan tashqaridagi rasmlar uchun lazy loading.
  • <picture> yoki srcset yordamida moslashtirilgan rasmlar.
• Resurslarni minimallashtirish va siqish:
  • HTML, CSS va JavaScript fayllarining minimallashtirilishi.
  • Matn resurslari uchun Gzip yoki Brotli siqishni qo‘llash.
• Kesh:
  • Brauzer keshini HTTP sarlavhalari (Cache-Control, Expires) bilan sozlash.
  • Server tomonida kesh.
  • Offline kirish va kengaytirilgan kesh uchun Service Workers foydalanish.
• Kritikal rendering yo‘lini optimallashtirish:
  • Kritikal bo‘lmagan CSS va JavaScriptni kechiktirish.
  • async, defer bilan asinxron skriptlarni yuklash.
  • Kritikal CSSni inline qilish.
• HTTP so‘rovlar sonini kamaytirish:
  • CSS va JavaScript fayllarini birlashtirish (HTTP/2da ehtiyotkorlik bilan).
  • Kichik ikonlar uchun sprite’lardan foydalanish.
  • Kichik resurslarni (masalan, fontlar yoki SVGlar) CSSga data URIs yordamida joylashtirish.
• Fontlarni optimallashtirish:
  • Zamonaviy font formatlaridan foydalanish (WOFF2).
  • Fontlarni lokal joylashtirish.
  • Fontlarni oldindan yuklash (preload).
  • font-display yordamida fontlarning yuklanish vaqtida qanday ko‘rinishini boshqarish.
• JavaScriptning ishlashini yaxshilash:
  • Algoritmlar va ma’lumotlar tuzilmalarini optimallashtirish.
  • DOM operatsiyalarini kamaytirish.
  • Voqealarni delegatsiya qilish.
  • Kodni bo‘lish (code splitting).
• Render va chizishni optimallashtirish:
  • Qimmatbaho CSS xususiyatlaridan qochish.
  • will-change dan foydalanish.
  • Animatsiyalar va o'tishlarni optimallashtirish.
• CDN (Content Delivery Network) foydalanish.
• Server tomonini optimallashtirish:
  • Tez javob beradigan server.
  • Ma’lumotlar bazasiga so‘rovlarni optimallashtirish.

// Lazy loading uchun misol
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 va defer uchun misol -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display dan foydalanish misoli */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Brauzer asosiy font yuklanayotgan paytda zaxira fontdan foydalanishga imkon beradi */
}