Milyen módszereket használhat az weboldal betöltési idejének gyorsítására?

CSS és JavaScript fájlok minimalizálása és egyesítése. Képek tömörítése és modern formátumok, például WebP használata. Késleltetett betöltés (lazy loading) alkalmazása képek és videók esetén. Erőforrások cache-elése az ügyfél- és szerveroldalon. GZIP tömörítés szöveges erőforrásokhoz. HTTP kérések számának csökkentése. CDN (Content Delivery Network) használata. A kritikus renderelési út optimalizálása. Használatlan kód eltávolítása. Offline hozzáférés és cache-elés céljából Service Workers alkalmazása.

// Lazy loading példa egy képre
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);
});

Képformátumok összehasonlítása:

Formátum	Tipikus felhasználás	Jellemzők
JPEG	Fotók	Káros tömörítés, széles színskála
PNG	Átlátszó grafika, logók	Káros tömörítés, támogatja az átlátszóságot
GIF	Animált képek	Káros tömörítés, támogatja az animációt
WebP	Fotók és grafika	Hatékonyabb tömörítés (káros és káros nélküli), támogatja az átlátszóságot és az animációt

/* CSS összefoglalása és minimalizálása példa */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Nem használt kód eltávolítva */
}

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

# GZIP tömörítés példája Nginx-ben
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;