Jak optimalizujete výkon webové stránky?

• Optimalizace obrázků:
  • Použití moderních formátů, jako je WebP.
  • Komprese obrázků bez ztráty kvality.
  • Lazy loading pro obrázky mimo viditelnou oblast.
  • Responzivní obrázky pomocí <picture> nebo srcset.
• Minifikace a komprese zdrojů:
  • Minifikace HTML, CSS a JavaScriptu.
  • Gzip nebo Brotli komprese pro textové zdroje.
• Ukládání do mezipaměti:
  • Ukládání do mezipaměti prohlížeče pomocí HTTP hlaviček (Cache-Control, Expires).
  • Ukládání do mezipaměti na straně serveru.
  • Použití Service Workers pro offline přístup a složitější správu cache.
• Optimalizace kritické cesty vykreslování:
  • Odložené načítání nekritických CSS a JavaScriptu.
  • Asynchronní načítání skriptů (async, defer).
  • Inline kritického CSS.
• Snížení počtu HTTP požadavků:
  • Sloučení CSS a JavaScript souborů (ale s opatrností v HTTP/2).
  • Použití spriteů pro malé ikony.
  • Vkládání malých zdrojů (například fontů nebo SVG) do CSS pomocí data URIs.
• Optimalizace fontů:
  • Použití moderních formátů fontů (WOFF2).
  • Umístění fontů lokálně.
  • Předběžné načítání fontů (preload).
  • Použití font-display pro řízení zobrazení fontů během načítání.
• Výkon JavaScriptu:
  • Optimalizace algoritmů a datových struktur.
  • Snížení počtu DOM operací.
  • Použití událostní delegace.
  • Rozdělení kódu (code splitting).
• Optimalizace vykreslování a zobrazení:
  • Vyhýbání se nákladným vlastnostem a stylům CSS.
  • Použití will-change.
  • Optimalizace animací a přechodů.
• Použití CDN (Content Delivery Network).
• Optimalizace serverové části:
  • Rychlá odpověď serveru.
  • Optimalizace dotazů na databázi.

// Příklad lazy loading obrázku
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);
});

<!-- Příklad použití async a defer pro skripty -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Příklad použití font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Umožňuje prohlížeči použít záložní font, dokud se hlavní nenačte */
}