Jaké metody můžete použít k urychlení načítání webové stránky?

Minimalizace a sloučení souborů CSS a JavaScript. Komprese obrázků a použití moderních formátů jako WebP. Použití lazy loading (odložené načítání) pro obrázky a videa. Ukládání do mezipaměti zdrojů na straně klienta i serveru. GZIP komprese pro textové zdroje. Minimalizace HTTP požadavků. Použití CDN (Content Delivery Network). Optimalizace kritické cesty renderování. Odstranění nepoužívaného kódu. Použití Service Workers pro offline přístup a cachování.

// 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;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

Porovnání formátů obrázků:

Formát	Typické použití	Vlastnosti
JPEG	Fotografie	Ztrátová komprese, široký rozsah barev
PNG	Grafika s průhledností, loga	Bezeztrátová komprese, podpora průhlednosti
GIF	Animované obrázky	Bezeztrátová komprese, podpora animací
WebP	Fotografie a grafika	Efektivnější komprese (s a bez ztráty), podpora průhlednosti a animací

/* Příklad sloučení a minimalizace CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Odstraněný nepoužitý kód */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# Příklad GZIP komprese v Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;