Milliseid meetodeid saate kasutada veebisaidi laadimise kiiruse kiirendamiseks?

CSS ja JavaScript failide minimeerimine ja ühendamine. Piltide tihendamine ja kaasaegsete formaatide, näiteks WebP, kasutamine. Viivitatud laadimise (lazy loading) kasutamine piltidele ja videotele. Resursside vahemällu salvestamine kliendi ja serveri poolel. GZIP tihendamine tekstilistele ressurssidele. HTTP-päringute arvu vähendamine. CDN-i (Content Delivery Network) kasutamine. Kriitilise renderdamise tee optimeerimine. Kasutamata koodi eemaldamine. Service Workers kasutamine offline-juurdepääsuks ja vahemällu salvestamiseks.

// Näide, kuidas kasutada lazy loading piltidele
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);
});

Piltide formaatide võrdlus:

Formaat	Põhikasutus	Omadused
JPEG	Fotod	Kaotav tihend, laialdane värviulatus
PNG	Läbipaistvusega graafika, logod	Kaotamatu tihend, läbipaistvuse tugi
GIF	Animatsioonid	Kaotamatu tihend, animatsiooni tugi
WebP	Fotod ja graafika	Tõhusam tihend (kaotav ja kaotamatu), läbipaistvuse ja animatsiooni tugi

/* Näide, kuidas ühendada ja minimeerida CSS-i */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Kasutamata kood eemaldatud */
}

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

# GZIP tihendamise näide Nginx-is
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;