Kaip optimizuojate svetainės našumą?

• Vaizdų optimizavimas:
  • Naudojant šiuolaikinius formatus, pvz., WebP.
  • Vaizdų suspaudimas be kokybės praradimo.
  • Lazy loading vaizdams, esančioms už matomos srities.
  • Reaguojančius vaizdus naudojant <picture> arba srcset.
• Ištekliai minimalizavimas ir suspaudimas:
  • HTML, CSS ir JavaScript minimizavimas.
  • Gzip arba Brotli suspaudimas tekstiniams ištekliams.
• Talpyklos naudojimas:
  • Naršyklės talpyklos naudojimas per HTTP antraštes (Cache-Control, Expires).
  • Serverio pusės talpyklos naudojimas.
  • Naudojant Service Workers offline prieigai ir sudėtingesniam talpyklos valdymui.
• Kritinio kelių optimizavimas:
  • Nekritinių CSS ir JavaScript vėlinis įkėlimas.
  • Asinchroninis įkėlimas (async, defer).
  • Kritinio CSS įterpimas į vidų.
• HTTP užklausų skaičiaus mažinimas:
  • CSS ir JavaScript failų sujungimas (atsargiai naudojant HTTP/2).
  • Mažų piktogramų naudojimas sprite'ų pagalba.
  • Mažų išteklių įterpimas į CSS naudojant data URIs.
• Šriftų optimizavimas:
  • Naudojant šiuolaikinius formatų šriftus (WOFF2).
  • Vietinis šriftų talpinimas.
  • Išankstinis šriftų įkėlimas (preload).
  • font-display naudojimas šriftų rodymo valdymui.
• JavaScript našumas:
  • Algoritmų ir duomenų struktūrų optimizavimas.
  • DOM operacijų skaičiaus mažinimas.
  • Renginių delegacijos naudojimas.
  • Kodo skaidymas (code splitting).
• Rėndinimo ir atvaizdavimo optimizavimas:
  • Brangios CSS savybės ir stiliai vengti.
  • will-change naudojimas.
  • Animacijų ir perėjimų optimizavimas.
• CDN (Content Delivery Network) naudojimas.
• Serverio dalies optimizavimas:
  • Greitas serverio atsakas.
  • Duomenų bazės užklausų optimizavimas.

// Lazy įkėlimo pavyzdys vaizdui
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;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

<!-- async ir defer naudojimo pavyzdys -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display naudojimo pavyzdys */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* leidžia naršyklei naudoti atsarginį šriftą, kol pagrindinis įkeliamas */
}