Cum optimizați performanța site-ului?

• Optimizarea imaginilor:
  • Utilizarea formatelor moderne precum WebP.
  • Comprimarea imaginilor fără pierderi de calitate.
  • Lazy loading pentru imaginile din afara zonei vizibile.
  • Imagini adaptative folosind <picture> sau srcset.
• Minificarea și comprimarea resurselor:
  • Minificarea HTML, CSS și JavaScript.
  • Comprimarea Gzip sau Brotli pentru resursele text.
• Caching:
  • Caching-ul browser-ului folosind anteturile HTTP (Cache-Control, Expires).
  • Caching pe partea serverului.
  • Utilizarea Service Workers pentru acces offline și caching avansat.
• Optimizarea drumului critic de randare:
  • Încărcarea întârziată a CSS și JavaScript necritice.
  • Încărcarea asincronă a scripturilor (async, defer).
  • CSS critic inline.
• Reducerea numărului de solicitări HTTP:
  • Combinarea fișierelor CSS și JavaScript (cu precauție în HTTP/2).
  • Utilizarea sprite-urilor pentru pictograme mici.
  • Încorporarea resurselor mici (de exemplu, fonturi sau SVG-uri) în CSS folosind data URIs.
• Optimizarea fonturilor:
  • Utilizarea formatelor moderne de fonturi (WOFF2).
  • Plasarea fonturilor local.
  • Preîncărcarea fonturilor (preload).
  • Utilizarea font-display pentru gestionarea afișării fonturilor în timpul încărcării.
• Performanța JavaScript:
  • Optimizarea algoritmilor și structurilor de date.
  • Reducerea operațiunilor DOM.
  • Utilizarea delegării evenimentelor.
  • Divizarea codului (code splitting).
• Optimizarea randării și desenului:
  • Evitarea proprietăților CSS costisitoare.
  • Utilizarea will-change.
  • Optimizarea animațiilor și tranzițiilor.
• Utilizarea CDN (Content Delivery Network).
• Optimizarea părții server:
  • Răspuns rapid al serverului.
  • Optimizarea interogărilor bazei de date.

// Exemplu de încărcare întârziată a imaginii
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);
});

<!-- Exemplu de utilizare a async și defer pentru scripturi -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Exemplu de utilizare a font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Permite browser-ului să folosească un font de rezervă în timp ce fontul principal se încarcă */
}