Hoe optimaliseer je de prestaties van de website?

• Afbeeldingsoptimalisatie:
  • Gebruik van moderne formaten zoals WebP.
  • Compressie van afbeeldingen zonder kwaliteitsverlies.
  • Lazy loading voor afbeeldingen buiten het zichtbare gebied.
  • Adaptieve afbeeldingen met <picture> of srcset.
• Minificatie en compressie van bronnen:
  • Minificatie van HTML, CSS en JavaScript.
  • Gzip- of Brotli-compressie voor tekstuele bronnen.
• Caching:
  • Browsercaching met HTTP-headers (Cache-Control, Expires).
  • Server-side caching.
  • Gebruik van Service Workers voor offline toegang en geavanceerde caching.
• Optimalisatie van de kritieke renderpad:
  • Uitgestelde loading van niet-kritische CSS en JavaScript.
  • Asynchrone loading van scripts (async, defer).
  • Inline kritische CSS.
• Vermindering van HTTP-verzoeken:
  • Samenvoegen van CSS- en JavaScript-bestanden (voorzichtig met HTTP/2).
  • Gebruik van sprites voor kleine iconen.
  • Inbedden van kleine bronnen (zoals fonts of SVG's) in CSS met data URIs.
• Fontoptimalisatie:
  • Gebruik van moderne fontformaten (WOFF2).
  • Lokale opslag van fonts.
  • Preload van fonts (preload).
  • Gebruik van font-display om het tonen van fonts tijdens het laden te beheren.
• JavaScript-prestaties:
  • Optimalisatie van algoritmen en datastructuren.
  • Vermindering van DOM-bewerkingen.
  • Gebruik van gebeurtenisdelegatie.
  • Code splitting.
• Optimalisatie van rendering en tekenen:
  • Vermijd dure CSS-eigenschappen.
  • Gebruik van will-change.
  • Optimalisatie van animaties en overgangen.
• Gebruik van CDN (Content Delivery Network).
• Server-side optimalisatie:
  • Snelle serverreacties.
  • Optimalisatie van databasequery's.

// Voorbeeld van lazy loading van een afbeelding
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);
});

<!-- Voorbeeld van gebruik van async en defer voor scripts -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Voorbeeld van gebruik van font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Staat toe dat de browser een fallback font gebruikt terwijl de hoofdfont wordt geladen */
}