Aké metódy môžete použiť na zrýchlenie načítania webovej stránky?

Minimalizácia a zoskupovanie súborov CSS a JavaScript. Kompresia obrázkov a použitie moderných formátov ako WebP. Použitie lazy loading (lenivé načítanie) pre obrázky a videá. Cacheovanie zdrojov na strane klienta a servera. GZIP kompresia pre textové zdroje. Minimalizácia HTTP požiadaviek. Použitie CDN (Content Delivery Network). Optimalizácia kritickej cesty renderovania. Odstránenie nepoužívaného kódu. Použitie Service Workers pre offline prístup a cacheovanie.

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

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

Porovnanie formátov obrázkov:

Formát	Typické použitie	Vlastnosti
JPEG	Fotografie	Strata kompresie, široký rozsah farieb
PNG	Grafika s transparentnosťou, logá	Bezstratová kompresia, podpora transparentnosti
GIF	Animované obrázky	Bezstratová kompresia, podpora animácií
WebP	Fotografie a grafika	Efektívnejšia kompresia (so stratou a bez), podpora transparentnosti a animácií

/* Príklad zoskupenia a minimalizácie CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Odstránený nepoužívaný kód */
}

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

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