Ratgeber Gesamtanzahl der Ressourcen ist hoch

Die Gesamtanzahl der Ressourcen auf deiner Website, wie Bilder, Skripte, Stylesheets und andere Dateien, ist ungewöhnlich hoch. Dies kann die Ladezeit deiner Seite erheblich verlängern, da der Browser viele Anfragen an den Server senden muss, um alle Ressourcen zu laden. Eine hohe Anzahl an Ressourcen kann die Performance und Nutzererfahrung negativ beeinflussen.

• Langsame Ladezeit: Zu viele Ressourcen erhöhen die Ladezeit deiner Seite, was Nutzer abschrecken kann.
• Schlechtere Nutzererfahrung: Besucher erwarten schnelle Ladezeiten, insbesondere auf mobilen Geräten.
• SEO-Nachteile: Google bevorzugt schnell ladende Websites, was bedeutet, dass eine hohe Anzahl an Ressourcen dein Ranking verschlechtern kann.
• Erhöhter Server-Traffic: Viele Anfragen belasten deinen Server und erhöhen die Bandbreitennutzung.

1. Analysiere die Ressourcen:
   • Nutze Tools wie Google PageSpeed Insights, GTmetrix oder Lighthouse, um die Anzahl und Art der geladenen Ressourcen zu ermitteln.
   • Achte auf Bilder, CSS-, JavaScript-Dateien und Drittanbieter-Skripte.
2. Minimiere unnötige Ressourcen:
   • Überprüfe und entferne ungenutzte Skripte und Styles: Lösche nicht benötigte JavaScript- und CSS-Dateien.
   • Vermeide redundante Bilder: Entferne Bilder, die nicht angezeigt werden, oder reduziere deren Größe.
3. Kombiniere Dateien:
   • Kombiniere mehrere CSS- oder JavaScript-Dateien, um die Anzahl der Anfragen zu verringern.
   • Beispiel:
     Anstelle von drei separaten Dateien:

     <link rel="stylesheet" href="style1.css">   
     <link rel="stylesheet" href="style2.css">
     <link rel="stylesheet" href="style3.css">

     Verwende eine kombinierte Datei:

     <link rel="stylesheet" href="combined-styles.css">

4. Verwende Lazy Loading:
   • Lade Bilder und Videos erst, wenn sie im sichtbaren Bereich des Nutzers erscheinen. Ergänze folgenden Code:

     <img src="bild.jpg" loading="lazy" alt="Beispielbild">

5. Nutze Caching und CDNs:
   • Aktiviere Browser-Caching, um häufig genutzte Ressourcen lokal zu speichern.
   • Verwende ein Content Delivery Network (CDN), um Ressourcen effizienter zu laden.
6. Komprimiere Dateien:
   • Minifiziere CSS- und JavaScript-Dateien, um unnötige Leerzeichen und Kommentare zu entfernen.
   • Komprimiere Bilder und nutze moderne Formate wie WebP.
7. Teste die Änderungen:
   • Überprüfe die Ladegeschwindigkeit deiner Website erneut mit Tools wie Google PageSpeed Insights, um sicherzustellen, dass die Anzahl der Ressourcen reduziert wurde.

Beispiele & Best Practices

• 50 Bilder mit jeweils 1 MB.
• 10 separate CSS-Dateien.
• 15 JavaScript-Dateien.

• 10 optimierte Bilder mit jeweils 300 KB.
• 1 kombinierte CSS-Datei.
• 2 JavaScript-Dateien.

• Zu viele Drittanbieter-Skripte: Begrenze die Nutzung von Tracking- und Werbeskripten.
• Unnötige Animationen und Widgets: Entferne Funktionen, die nicht zwingend notwendig sind.
• Keine Priorisierung: Lade wichtige Ressourcen zuerst und verzögere weniger wichtige Dateien.

• Optimalerweise sollte die Gesamtanzahl der Ressourcen auf einer Seite unter 50 bleiben.
• Nutze Lazy Loading und Prefetching, um die wahrgenommene Ladezeit zu reduzieren.
• Minifiziere Dateien und verwende Gzip oder Brotli für die Komprimierung.

• Google PageSpeed Insights
• GTmetrix
• W3C-Dokumentation zur Web-Performance