Wie optimieren Sie die Leistung der Website?

• Bildoptimierung:
  • Verwendung moderner Formate wie WebP.
  • Verlustfreie Bildkompression.
  • Lazy Loading für Bilder außerhalb des sichtbaren Bereichs.
  • Adaptive Bilder mit <picture> oder srcset.
• Ressourcenminifizierung und -kompression:
  • Minifizierung von HTML, CSS und JavaScript.
  • Gzip- oder Brotli-Kompression für Textressourcen.
• Caching:
  • Browser-Caching mit HTTP-Headern (Cache-Control, Expires).
  • Serverseitiges Caching.
  • Verwendung von Service Workern für Offline-Zugriff und erweitertes Caching.
• Optimierung des kritischen Rendering-Pfads:
  • Verzögertes Laden von nicht-kritischem CSS und JavaScript.
  • Asynchrones Laden von Skripten (async, defer).
  • Kritisches CSS inline.
• Reduzierung der HTTP-Anfragen:
  • Zusammenfassung von CSS- und JavaScript-Dateien (mit Vorsicht bei HTTP/2).
  • Verwendung von Sprites für kleine Icons.
  • Einbettung kleiner Ressourcen (z.B. Fonts oder SVGs) in CSS mittels Data-URIs.
• Font-Optimierung:
  • Verwendung moderner Font-Formate (WOFF2).
  • Lokale Platzierung von Fonts.
  • Preload für Fonts (preload).
  • Verwendung von font-display zur Steuerung der Schriftanzeige während des Ladens.
• JavaScript-Leistung:
  • Optimierung von Algorithmen und Datenstrukturen.
  • Reduzierung der DOM-Operationen.
  • Verwendung von Ereignisdelegation.
  • Code-Splitting.
• Optimierung des Renderings und der Darstellung:
  • Vermeidung teurer CSS-Eigenschaften.
  • Verwendung von will-change.
  • Optimierung von Animationen und Übergängen.
• Verwendung eines CDN (Content Delivery Network).
• Serverseitige Optimierung:
  • Schnelle Serverantworten.
  • Optimierung von Datenbankabfragen.

// Beispiel für Lazy Loading eines Bildes
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);
});

<!-- Beispiel für async und defer bei Skripten -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Beispiel für font-display */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Erlaubt dem Browser, eine Fallback-Schrift zu verwenden, während die Hauptschrift lädt */
}