Kako optimizujete performanse sajta?

• Оптимизација слика:
  • Коришћење модерних формата као што је 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).
  • Коришћење спрајтова за мале иконе.
  • Уклањање малих ресурса (нпр. фонтова или SVG-ја) у CSS помоћу data URIs.
• Оптимизација фонтова:
  • Коришћење модерних формата фонтова (WOFF2).
  • Локално постављање фонтова.
  • Предзагрузка фонтова (preload).
  • Коришћење font-display за управљање приказивањем фонтова током учитавања.
• Перформансе JavaScript-а:
  • Оптимизација алгоритама и структура података.
  • Смањење броја DOM операција.
  • Коришћење догађајне делегације.
  • Раздвајање кода (code splitting).
• Оптимизација рендеринга и приказивања:
  • Избегавање скупоценијих CSS својстава и стилова.
  • Коришћење will-change.
  • Оптимизација анимација и прелаза.
• Коришћење CDN (Content Delivery Network).
• Оптимизација серверске стране:
  • Брз одговор сервера.
  • Оптимизација захтева ка бази података.

// Пример за 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;
      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; /* Омогућава прегледачу да користи резервни фонт док се главни учитава */
}