Ako optimalizujete výkon stránky?

• Optimalizácia obrázkov:
  • Použitie moderných formátov, ako je WebP.
  • Kompresia obrázkov bez straty kvality.
  • Lazy loading pre obrázky mimo viditeľnej oblasti.
  • Responzívne obrázky pomocou <picture> alebo srcset.
• Minifikácia a kompresia zdrojov:
  • Minifikácia HTML, CSS a JavaScriptu.
  • Gzip alebo Brotli kompresia pre textové zdroje.
• Ukladanie do vyrovnávacej pamäte:
  • Ukladanie do vyrovnávacej pamäte prehliadača pomocou HTTP hlavičiek (Cache-Control, Expires).
  • Ukladanie do vyrovnávacej pamäte na strane servera.
  • Použitie Service Workers pre offline prístup a zložitejšie spravovanie cache.
• Optimalizácia kritickej cesty vykresľovania:
  • Odložené načítanie nekritických CSS a JavaScriptu.
  • Asynchrónne načítanie skriptov (async, defer).
  • Inline kritického CSS.
• Zníženie počtu HTTP požiadaviek:
  • Zlúčenie CSS a JavaScript súborov (ale s opatrnosťou v HTTP/2).
  • Použitie spriteov pre malé ikony.
  • Vkladanie malých zdrojov (napríklad fontov alebo SVG) do CSS pomocou data URIs.
• Optimalizácia fontov:
  • Použitie moderných formátov fontov (WOFF2).
  • Umiestnenie fontov lokálne.
  • Predbežné načítanie fontov (preload).
  • Použitie font-display na riadenie zobrazovania fontov počas načítania.
• Výkon JavaScriptu:
  • Optimalizácia algoritmov a štruktúr dát.
  • Zníženie počtu DOM operácií.
  • Použitie udalostnej delegácie.
  • Rozdelenie kódu (code splitting).
• Optimalizácia vykresľovania a zobrazenia:
  • Vyhýbanie sa nákladným CSS vlastnostiam a štýlom.
  • Použitie will-change.
  • Optimalizácia animácií a prechodov.
• Použitie CDN (Content Delivery Network).
• Optimalizácia serverovej časti:
  • Rýchla odpoveď servera.
  • Optimalizácia požiadaviek na databázu.

// Príklad lazy loading obrázka
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);
});

<!-- Príklad použitia async a defer pre skripty -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Príklad použitia font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Umožňuje prehliadaču použiť záložný font, kým sa hlavný nenačíta */
}