Hogyan optimalizálja a webhely teljesítményét?

• Képoptimalizálás:
  • Modern formátumok, például WebP használata.
  • Képek tömörítése minőségvesztés nélkül.
  • Lazy loading a nem látható képekhez.
  • Adaptív képek <picture> vagy srcset segítségével.
• Erőforrások minifikálása és tömörítése:
  • HTML, CSS és JavaScript minifikálása.
  • Gzip vagy Brotli tömörítés szöveges erőforrásokhoz.
• Gyorsítótár:
  • Böngésző gyorsítótár HTTP fejléc segítségével (Cache-Control, Expires).
  • Szerveroldali gyorsítótár.
  • Service Workers használata offline hozzáféréshez és fejlettebb gyorsítótárhoz.
• Kritikus renderelési út optimalizálása:
  • Nem kritikus CSS és JavaScript késleltetett betöltése.
  • Aszinkron script betöltés (async, defer).
  • Kritikus CSS inline.
• HTTP kérések számának csökkentése:
  • CSS és JavaScript fájlok egyesítése (óvatosan HTTP/2 esetén).
  • Sprite-ok használata kis ikonokhoz.
  • Kisebb erőforrások (például betűk vagy SVG-k) beágyazása CSS-be data URIs segítségével.
• Betűk optimalizálása:
  • Modern betűformátumok használata (WOFF2).
  • Betűk helyi tárolása.
  • Betűk előtöltése (preload).
  • font-display használata a betűk betöltése közbeni megjelenés kezelésére.
• JavaScript teljesítmény:
  • Algoritmusok és adatszerkezetek optimalizálása.
  • DOM műveletek csökkentése.
  • Eseménydelegáció használata.
  • Kód szétválasztása (code splitting).
• Renderelés és rajzolás optimalizálása:
  • Költséges CSS tulajdonságok elkerülése.
  • will-change használata.
  • Animációk és átmenetek optimalizálása.
• CDN (Content Delivery Network) használata.
• Szerveroldali optimalizálás:
  • Gyors szerverválaszok.
  • Adatbázis lekérdezések optimalizálása.

// Lazy loading példa
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 és defer script példák -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* font-display használata például */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* A böngésző használhat tartalék betűt, amíg a fő betű betölt */
}