Чӣ гуна ба беҳтар кардани иҷрои вебсайт кӯмак мерасонед?

• Беҳтарсозии тасвирҳо:
  • Истифодаи форматҳои муосир, ба монанди WebP.
  • Таҳрири тасвирҳо бе аз даст додани сифат.
  • Lazy loading барои тасвирҳо берун аз минтақаи намоён.
  • Тасвирҳои ҷавобгӯ бо истифодаи <picture> ё srcset.
• Минфикатсия ва таҳрири захираҳо:
  • Минфикатсия кардани HTML, CSS ва JavaScript.
  • Gzip ё Brotli таҳрири барои захираҳои матнӣ.
• Кэшгирӣ:
  • Кэшгирии браузер бо истифода аз сариҳолҳои HTTP (Cache-Control, Expires).
  • Кэшгирии дар ҷониби сервер.
  • Истифодаи Service Workers барои дастрасии офлайн ва кэшгирии мураккаб.
• Беҳтарсозии роҳи муҳим барои рендеринг:
  • боркунии таъхирӣ барои CSS ва JavaScript ғайриқатъӣ.
  • боркунии асинхронӣ (async, defer).
  • CSS-и муҳимро дарунӣ кардан.
• Кам кардани шумораи дархостҳои HTTP:
  • Иҷрои якҷояи файлҳои CSS ва JavaScript (аммо бо эҳтиёт дар HTTP/2).
  • Истифодаи спрайтҳо барои нишонаҳои хурд.
  • Вуруд кардани захираҳои хурд (масалан, шрифтовҳо ё SVGs) ба CSS бо истифодаи data URIs.
• Беҳтарсозии шрифтов:
  • Истифодаи форматҳои муосир (WOFF2).
  • ҷойгиркунии локалӣ.
  • боркунии пешакӣ (preload).
  • Истифодаи font-display барои идоракунии намоиши шрифтов.
• Самаранокии JavaScript:
  • Беҳтарсозии алгоритмҳо ва сохторҳои додаҳо.
  • Кам кардани шумораи амалҳои DOM.
  • Истифодаи делегацияи рӯйдодҳо.
  • тақсим кардани коди (code splitting).
• Беҳтарсозии рендеринг ва тасвир:
  • Ҳаросати хусусиятҳои гаронбаҳо ва услубҳои CSS.
  • Истифодаи will-change.
  • Беҳтарсозии анимациялар ва гузаришҳо.
• Истифодаи CDN (Content Delivery Network).
• Беҳтарсозии қисми серверӣ:
  • Посухи зуд аз сервер.
  • Беҳтарсозии дархостҳо ба базаи додаҳо.

// Намунаи боркунии сустии тасвир
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; /* Имкон медиҳад браузер ба истифодаи шрифтҳои захиравӣ ҳангоми боркунӣ */
}