Kuidas optimeerite veebisaidi jõudlust?

• Piltide optimeerimine:
  • Kasutades kaasaegseid formaate nagu WebP.
  • Piltide tihendamine ilma kvaliteedi kaota.
  • Lazy loading piltidele, mis asuvad nähtamatust piirkonnast.
  • Reageerivad pildid kasutades <picture> või srcset.
• Ressursside minimeerimine ja tihendamine:
  • HTML, CSS ja JavaScript minimeerimine.
  • Gzip või Brotli tihendamine tekstilistele ressurssidele.
• Vahemälu kasutamine:
  • Brauseri vahemälu kasutamine HTTP päistega (Cache-Control, Expires).
  • Serveri poole vahemälu kasutamine.
  • Service Workers kasutamine offline juurdepääsuks ja keerulisemaks vahemälu haldamiseks.
• Kriitilise tee optimeerimine:
  • Mitte-kriitiliste CSS ja JavaScripti hilinenud laadimine.
  • Asünkrooniline laadimine (async, defer).
  • Kriitilise CSSi inline-kasutamine.
• HTTP-päringute arvu vähendamine:
  • CSS ja JavaScript failide ühendamine (aga ettevaatusega HTTP/2-s).
  • Väikeste ikoonide jaoks sprite kasutamine.
  • Väikeste ressursside CSS-i sisestamine data URIs abil.
• Fontide optimeerimine:
  • Kasutades kaasaegseid fontide formaate (WOFF2).
  • Fontide kohalik paigutus.
  • Eellaadimine (preload).
  • font-display kasutamine fontide kuvamise juhtimiseks.
• JavaScripti jõudlus:
  • Algoritmide ja andmestruktuuride optimeerimine.
  • DOM-operatsioonide arvu vähendamine.
  • Sündmuste delegatsiooni kasutamine.
  • Koodi jagamine (code splitting).
• Renderdamise ja kuvamise optimeerimine:
  • Kallimate CSS-omaduste ja stiilide vältimine.
  • will-change kasutamine.
  • Animatsioonide ja üleminekute optimeerimine.
• CDN (Content Delivery Network) kasutamine.
• Serveri osa optimeerimine:
  • Kiire vastus serverilt.
  • Andmebaasi päringute optimeerimine.

// Lazy laadimise näide pildile
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 ja defer kasutamise näide skriptidele -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display kasutamise näide */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* võimaldab brauseril kasutada varufonti, kuni põhifont laaditakse */
}