Kokius metodus galite naudoti norėdami pagreitinti svetainės įkėlimą?

CSS ir JavaScript failų minimalizavimas ir sujungimas. Vaizdų suspaudimas ir šiuolaikinių formatų, tokių kaip WebP, naudojimas. Atidėto įkėlimo (lazy loading) naudojimas vaizdams ir vaizdo įrašams. Išteklių talpyklavimas kliento ir serverio pusėje. GZIP suspaudimas tekstiniams ištekliams. HTTP užklausų sumažinimas. Naudojant CDN (Content Delivery Network). Kritinio atvaizdavimo kelio optimizavimas. Nenaudojamo kodo pašalinimas. Naudojant Service Workers neprisijungus ir talpyklavimui.

// Pavyzdys, kaip naudoti lazy loading vaizdams
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);
});

Vaizdų formatų palyginimas:

Formatą	Pagrindinis naudojimas	Ypatybės
JPEG	Fotografijos	Prarandamas suspaudimas, plačios spalvų galimybės
PNG	Skaidrumo grafika, logotipai	Be prarandamo suspaudimo, palaiko skaidrumą
GIF	Animuoti vaizdai	Be prarandamo suspaudimo, palaiko animaciją
WebP	Fotografijos ir grafika	Efektyvesnis suspaudimas (su praradimu ir be jo), palaiko skaidrumą ir animaciją

/* Pavyzdys, kaip sujungti ir minimizuoti CSS */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Nenaudojamas kodas pašalintas */
}

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

# GZIP suspaudimo pavyzdys Nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;