Kā jūs optimizējat vietnes veiktspēju?

• Attēlu optimizācija:
  • Izmantojot mūsdienīgus formātus, piemēram, WebP.
  • Attēlu saspiešana bez kvalitātes zuduma.
  • Lazy loading attēliem ārpus redzamās zonas.
  • Reaģējošus attēlus, izmantojot <picture> vai srcset.
• Resursu minimizācija un saspiešana:
  • HTML, CSS un JavaScript minimizācija.
  • Gzip vai Brotli saspiešana teksta resursiem.
• Kešatmiņas izmantošana:
  • Pārlūkprogrammas kešatmiņas izmantošana, izmantojot HTTP galvenes (Cache-Control, Expires).
  • Servera puses kešatmiņas izmantošana.
  • Service Workers izmantošana bezsaistes piekļuvei un sarežģītākai kešatmiņas pārvaldībai.
• Kritiskās ceļa optimizācija:
  • Ne-kritisko CSS un JavaScript aizkavēta ielāde.
  • Asinhrona ielāde (async, defer).
  • Kritiskā CSS iekļaušana tieši lapā.
• HTTP pieprasījumu skaita samazināšana:
  • CSS un JavaScript failu apvienošana (ar piesardzību HTTP/2).
  • Mazu ikonu izmantošana sprite veidā.
  • Mazāku resursu iekļaušana CSS ar data URIs.
• Fontu optimizācija:
  • Modernu formātu fontu izmantošana (WOFF2).
  • Fontu lokalizēšana.
  • Fontu iepriekšēja ielāde (preload).
  • font-display izmantošana fontu attēlošanas pārvaldībai.
• JavaScript veiktspēja:
  • Algoritmu un datu struktūru optimizācija.
  • DOM operāciju skaita samazināšana.
  • Notikumu delegācijas izmantošana.
  • Koda sadalīšana (code splitting).
• Renderēšanas un attēlošanas optimizācija:
  • Dārgu CSS īpašību un stilu izvairīšanās.
  • will-change izmantošana.
  • Animāciju un pāreju optimizācija.
• CDN (Content Delivery Network) izmantošana.
• Servera puses optimizācija:
  • Ātra servera atbilde.
  • Datu bāzes vaicājumu optimizācija.

// Lazy ielādes piemērs attēlam
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 un defer piemērs skriptiem -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display piemērs */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* ļauj pārlūkprogrammai izmantot rezerves fontu, kamēr galvenais tiek ielādēts */
}