WP Umbrella Logo

Vollständige Anleitung zur Reduzierung von HTTP-Anfragen in WordPress

Das Team von WP Umbrella
-

Die Optimierung der Geschwindigkeit und Leistung von WordPress-Websites ist wichtig, um Besucher anzuziehen und zu halten. Jeder Webentwickler und Website-Besitzer sollte der Optimierung der Leistung Priorität einräumen, da sie nicht nur die Benutzerfreundlichkeit verbessert, sondern auch die Platzierung in Suchmaschinen erhöht.

Wenn Sie die Leistung Ihrer WordPress-Website mit Online-Tools überprüfen, haben Sie vielleicht festgestellt, dass diese Test-Tools Ihnen raten, "weniger HTTP-Anfragen zu stellen" oder "die Anzahl der HTTP-Anfragen zu reduzieren".

In diesem Leitfaden wird erklärt, was HTTP-Anfragen sind, warum sie wichtig sind und wie Sie die Anfragen, die Ihre WordPress-Website stellt, minimieren können.

Was ist eine HTTP-Anfrage?

Das Frontend einer Website setzt sich aus verschiedenen Komponenten wie HTML, CSS, JavaScript, Bildern und Videos zusammen.

Diese Elemente arbeiten zusammen, um eine Webseite zu erstellen. Jedes Element sendet eine oder mehrere Anfragen an den Hosting-Server.

Wenn Sie den Namen einer Website in Ihren Browser eingeben, geschieht Folgendes:

  1. Ihr Browser kontaktiert den Hosting-Server der Webseite und fordert eine Datei mit dem Inhalt der Seite an, z. B. ein Bild.
  2. Der Server lehnt die Anfrage entweder ab oder sendet die Datei.
  3. Wird der Anfrage stattgegeben, beginnt Ihr Browser mit der Darstellung der Seite.
  4. Wenn zusätzliche Inhalte, wie z. B. CSS-Styling, zur Vervollständigung der Seite erforderlich sind, sendet Ihr Browser weitere Anfragen.
  5. Dieser Prozess wird so lange fortgesetzt, bis alle erforderlichen Anfragen von Ihrem Hosting-Server an den Browser des Besuchers übermittelt wurden und die Seite vollständig geladen ist.
Schema, das zeigt, wie HTTP-Anfragen funktionieren

Anzahl der Verbindungen: HTTP vs. HTTP2 vs. HTTP3

HTTP: Steht für Hypertext Transfer Protocol, ein Protokoll der Anwendungsschicht, das zur Übertragung von Informationen zwischen einem Webserver und einem Browser verwendet wird. 

Die Kenntnis der maximalen Anzahl von Verbindungen, die Ihr Hosting-Server gleichzeitig verarbeiten kann, ist für die Optimierung der Website-Performance und die Gewährleistung eines reibungslosen Nutzererlebnisses von entscheidender Bedeutung, vor allem in Spitzenzeiten des Datenverkehrs.

HTTP/1.1 ist die älteste Version und wird immer noch häufig verwendet. Bei diesem Protokoll wird nacheinander für jede Anforderung eine neue Verbindung geöffnet; wenn eine Anforderung nicht zugestellt werden kann, werden die folgenden Verbindungen blockiert und schlagen somit fehl. Dieses Protokoll kann ineffizient sein, insbesondere für Websites mit vielen Bildern und anderen Ressourcen.

HTTP/2 und HTTP/3: Mit der Einführung dieser neueren Protokolle können die Browser die Verbindungen effizienter nutzen; dank Funktionen wie Multiplexing können sie mehrere Datenströme gleichzeitig senden, ohne andere Ressourcen zu blockieren. Es gibt zwar immer noch Beschränkungen, aber diese sind im Vergleich zu HTTP/1.1 in der Regel höher.

SpezifikationHTTP/1.1HTTP/2HTTP/3
ProtokollTCPTCPQUIC
MultiplexingNeinJaJa
Kopfzeilen-KomprimierungJaJaJa
Server-PushNeinJaJa
LatenzzeitHochUnterUnter
LeistungGutBesserAm besten

Wie Sie sehen können, haben HTTP/2 und HTTP/3 erhebliche Verbesserungen gegenüber HTTP/1.1. Sie sollten also ein WordPress-Hosting in Betracht ziehen, das mindestens HTTP/2 unterstützt.

Warum weniger HTTP-Anfragen in WordPress?

Wenn es viele HTTP-Anfragen gibt, werden die Seiten langsam geladen. Langsame Seiten führen dazu, dass Besucher Ihre Website verlassen und Ihr Suchmaschinenranking beeinträchtigt wird.

Selbst eine kleine Verzögerung der Seitenladezeiten von 2 bis 5 Sekunden kann sich negativ auf die Absprungraten auswirken.

Indem Sie also die Anzahl der Anfragen reduzieren, verringern Sie die Größe der Seite und verbessern damit die Situation für Ihre Besucher. Ihre Website wird schneller geladen, läuft reibungsloser und sieht leistungsfähiger aus.

Herausfinden, wie viele Anfragen Ihre WordPress-Website stellt

Sie können verschiedene Online-Tools verwenden, um zu sehen, wie viele Zugriffe auf Ihre Webseite erfolgen, und herausfinden, wo Sie Verbesserungen vornehmen müssen. Einige der beliebtesten Tools sind:

Schauen wir uns an, wie Sie die Browser-Entwicklerwerkzeuge verwenden können.

Mit Chrome können wir sehen, wie viele Anfragen gestellt werden, wie groß sie sind und wie lange sie zum Laden einer Webseite brauchen.

Denken Sie aber daran, dass Chrome-Erweiterungen den Ladevorgang verlangsamen können. Am besten testen Sie im "Gast"-Modus, um bessere Ergebnisse zu erzielen.

So können Sie es tun:

  1. Chrome öffnen.
  2. Klicken Sie oben rechts auf Ihr Profilsymbol und wählen Sie dann "Gast".
  3. Klicken Sie mit der rechten Maustaste auf den leeren Bildschirm, wählen Sie "Untersuchen", gehen Sie auf die Registerkarte "Netzwerk" und besuchen Sie dann Ihre Website.

Hinweis: Sie können die Seite durch Drücken von "F5" aktualisieren, um die Ergebnisse erneut anzuzeigen.

Dev-Konsole in Google Chrome

Arten von HTTP-Anfragen in WordPress

In WordPress gibt es verschiedene Arten von Anfragen, wie z.B.:

  • HTML
  • JS (JavaScript)
  • CSS
  • Web-Schriften
  • Bilder
  • Videos
  • JSON
Art der HTTP-Anfragen in WordPress

Wenn Sie die verschiedenen Arten von HTTP-Anfragen kennen, die Ihre Website auslöst, können Sie sie besser für die Leistung optimieren. Wenn Sie zum Beispiel viele CSS- und JS-Dateien haben, können Sie diese in einer Datei zusammenfassen, um weniger HTTP-Anfragen zu stellen.

Wie viele HTTP-Anfragen sollten es sein?

Einige populäre Studien empfehlen, die Anzahl der HTTP-Anfragen unter 50 zu halten, wobei eine außergewöhnliche Leistung unter 25 Anfragen erreicht werden sollte.

Diese Anfragen sind zwar notwendig, aber der Schlüssel liegt darin, ihre Anzahl zu reduzieren, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
Derzeit liegt die durchschnittliche Anzahl der Anfragen pro Seite bei etwa 70, was auf Verbesserungsmöglichkeiten hinweist.

Wie reduziert man die Anzahl der Anfragen in WordPress?

Idealerweise gibt es zwei Möglichkeiten, dies zu tun. Entweder "Entfernen" oder "Kombinieren" von HTTP-Anfragen. Hier ist, wie Sie das tun können:

  • Kombinieren Sie JS- und CSS-Dateien innerhalb Ihrer Website
  • Entledigen Sie sich nicht benötigter Plugins und Themes
  • Bilder werden nur dann geladen, wenn die Besucher sie gerade sehen wollen; dies wird als Lazy Loading bezeichnet.
  • Verzögern Sie die Ausführung bestimmter Skripte, wie Google Analytics, Meta Pixel, Clarity usw., bis der Rest der Seite geladen ist.
  • Verwenden Sie Objekt-Caching, um weniger HTTP-Anfragen auf Datenbankebene zu stellen.

Mit diesen Tricks wird die Anzahl der Anfragen reduziert, so dass Ihre Website schneller geladen wird und besser funktioniert.

Im Folgenden finden Sie detaillierte Techniken, mit denen Sie die Anzahl der HTTP-Anfragen leicht reduzieren können.

1. Verwenden Sie ein Caching- oder Performance-Plugin

Verwenden Sie ein Caching-Plugin, um weniger HTTP-Anfragen zu stellen

Der einfachste Weg, weniger HTTP-Anfragen in WordPress zu stellen, ist die Verwendung von Caching- oder Performance-Plugins. Diese Plugins sollen Ihre Website schneller machen, indem sie verschiedene Methoden zur Reduzierung von HTTP-Anfragen verwenden.

Durch die Aktivierung verschiedener Caching-Methoden werden häufig wiederholte Anfragen von den Besucher-Browsern oder Ihrem Server zwischengespeichert. Diese Anfragen werden über den Cache bedient, wodurch die Anzahl der Anfragen reduziert und Ihre Bandbreite und Serverressourcen geschont werden. 

Einige beliebte Plugins sind:

  • WP Rakete
  • Perfmatters
  • Bereinigung von Vermögenswerten
  • LiteSpeed-Cache
  • Autoptimieren
  • FlyingPress
  • W3Total Cache

Und die Liste geht weiter.

2. CSS Verkleinern und Kombinieren

Das Verkleinern von CSS-Dateien bedeutet, dass die Größe der .css-Datei reduziert wird, indem zusätzliche Leerzeichen und Kommentare entfernt werden.

Bei der CSS-Kombination werden alle CSS-Dateien in einer einzigen großen Datei zusammengefasst. Anstatt also 10 verschiedene Dateien zu laden, laden Sie nur eine. Dadurch verringert sich die Anzahl der CSS-Dateien, die ein Browser beim Laden der Seite aufrufen muss.

CSS verkleinern und zusammenfassen - LiteSpeed Cache Plugin

Aber manchmal wird nicht das gesamte CSS auf jeder Seite benötigt. An dieser Stelle kommt "Remove Unused CSS" ins Spiel. Sie können Plugins wie "WP Rocket", "Perfmatters" oder "Asset CleanUp" verwenden, um dies zu beheben.

3. JS Minify und Kombinieren

Wie bei CSS können Sie auch Ihre JavaScript-Dateien verkleinern und ihre Anzahl verringern, indem Sie sie minifizieren und kombinieren. Das bedeutet, dass Sie zusätzliches Material entfernen und Ihr gesamtes JavaScript in eine Datei packen.

Aber seien Sie vorsichtig! Wenn Sie JavaScript kombinieren, kann es sein, dass es nicht richtig funktioniert. Überprüfen Sie also immer doppelt, ob alles noch so funktioniert, wie es sollte.

4. Ungenutzte CSS und JS entfernen

Wenn Sie CSS und JavaScript loswerden möchten, die Sie nicht auf Ihrer Website oder einer Webseite verwenden, können Plugins wie "WP Rocket" und "Perfmatters" helfen, indem sie nicht benötigtes CSS automatisch entfernen.

Eine weitere Option ist das Plugin "Asset CleanUp". Es zeigt Ihnen alle Dateien und Assets an, die geladen werden, wenn jemand eine Seite auf Ihrer Website besucht. Dann können Sie alle CSS- oder JavaScript-Dateien, die für diese Seite nicht benötigt werden, entladen.

Ungenutzte CSS in WP Rocket entfernen

Aber seien Sie vorsichtig! Manchmal können diese Plugins Dinge entfernen, die eigentlich benötigt werden. Überprüfen Sie also immer Ihre Website, nachdem Sie Änderungen vorgenommen haben, um sicherzugehen, dass alles noch gut funktioniert.

CSS/JS-Manager in Asset CleanUp

5. Lazyloading für Bilder, Videos und iFrames verwenden

Bilder und Videos sind wichtig, damit Ihre Website gut aussieht, aber wenn Sie viele davon haben, kann das die Arbeit verlangsamen, weil sie so viele Anfragen stellen.

Langsam ladende Bilder

Lazy Loading ist eine Technik, die dazu beiträgt, die anfängliche Anzahl von Anfragen zu reduzieren, indem die Bilder und Videos erst geladen werden, wenn der Besucher Ihrer Website zu ihnen scrollt.

Dies spart Bandbreite und trägt dazu bei, dass beim ersten Laden der Seite weniger HTTP-Anfragen gestellt werden.

6. Skripte verzögern

Eine weitere Möglichkeit, die Anzahl der Anfragen zu reduzieren, besteht darin, Skripte für Google Analytics, Microsoft Clarity, Meta Pixel oder andere nicht benötigte Skripte zu verzögern, wenn die Seite zu laden beginnt.

Es gibt zwei Möglichkeiten, dies zu tun:

  1. Aufgeschoben: Dies bedeutet, dass das JavaScript nach dem Laden des HTML-Satzes ausgeführt wird.
  2. Verzögert: Bei dieser Methode wartet das JavaScript, bis es eine Benutzeraktivität feststellt, z. B. das Klicken einer Taste oder eine Mausbewegung.
JS verzögert laden - LiteSpeed Cache Plugin

Verzögert ist besser, da die Ausführung von JavaScript unterbrochen wird, während die Leistungsbewertung berechnet wird.

7. Browser-Caching aktivieren

Das Browser-Caching speichert statische Dateien in den Browsern der Besucher, so dass diese bei wiederholten Besuchen nicht jedes Mal neu heruntergeladen werden müssen.

Das bedeutet weniger HTTP-Anfragen für Dateien, die sich nicht geändert haben, was die Ladezeiten für wiederkehrende Besucher verkürzt. Browser-Caching kann leicht mit einem der oben erwähnten Caching-Plugins aktiviert werden. 

8. Kombinieren von Bildern zur Erstellung von Sprites

Spriting bedeutet, dass man viele Bilder in eine Datei packt. Das ist hilfreich, weil der Browser dann nur eine Anfrage für all diese Bilder stellen muss, statt vieler.

Dadurch wird Ihre Website schneller geladen. Sprites sind praktisch für Dinge wie Icons oder kleine Bilder, die in verschiedenen Teilen Ihrer WordPress-Website verwendet werden.

Es gibt eine Vielzahl von Online-Tools, wie z. B. das "CSS Sprites Tool", mit denen Sie mehrere Bilder kombinieren können, um Sprites zu erstellen.

9. Lazy Load Kommentare und Widgets

Die Implementierung von "Lazy Loading" für Kommentarabschnitte und Widgets bedeutet, dass der Inhalt nur dann geladen wird, wenn die Benutzer mit ihnen interagieren, anstatt alles beim ersten Laden der Seite zu laden.

Dadurch werden die Anzahl der Anfragen und die anfänglichen Ladezeiten der Seite verringert und die Gesamtleistung verbessert.
Die meisten Caching-Lösungen unterstützen standardmäßig Lazy Loading. Alternativ dazu können Sie auch Plugins wie "Lazy Load for Comments" verwenden.

Lazy Load für Kommentare Plugin

10. Umstellung auf HTTP/2

Wenn Sie sich für ein Hosting entscheiden, das HTTP/2 unterstützt, ermöglichen Sie Multiplexing und paralleles Laden von Ressourcen über eine einzige Verbindung.

Das bedeutet, dass mehrere Dateien gleichzeitig übertragen werden können, was die Auswirkungen mehrerer Anfragen reduziert und den Ladevorgang Ihrer WordPress-Website beschleunigt.

Um zu überprüfen, ob Ihr aktueller Hosting-Provider HTTP/2 unterstützt, können Sie das Online-Tool KeyCDN verwenden.

KeyCDN HTTP/2-Testwerkzeug

11. Reduzieren Sie Umleitungen

Jede Weiterleitung führt zu einer zusätzlichen HTTP-Anfrage, die Ihre Website verlangsamen kann. Um die Anzahl der Anfragen zu reduzieren und die Leistung zu verbessern, sollten Sie Weiterleitungen auf ein Minimum beschränken.

Darüber hinaus kann sich die Minimierung von Weiterleitungen positiv auf die Suchmaschinenoptimierung auswirken, indem der Linkwert konsolidiert und potenzielle Kettenweiterleitungen vermieden werden, was letztendlich zu einer besseren Platzierung in den Suchmaschinen beiträgt.

12. Externe Skripte, Stylesheets und Schriftarten minimieren

Auch wenn Sie externe Skripte nicht immer kontrollieren können, bieten einige Plugins, wie z. B. "LiteSpeed Cache", die Möglichkeit, sie zu lokalisieren. Dies ist jedoch möglicherweise nicht ideal, wenn sich die externen Dateien häufig ändern.

Skripte lokalisieren - LiteSpeed Cache Plugin

Um weniger HTTP-Anfragen zu stellen, sollten Sie so wenig externe Skripte, Stylesheets und Schriftarten wie möglich verwenden. Dies trägt dazu bei, die Leistung Ihrer Website zu optimieren.

13. Plugins einschränken

Plugins erhöhen nicht nur die Gesamtgröße Ihrer Website, sondern tragen auch zu den HTTP-Anfragen bei. Einige Plugins erzeugen unnötige Anfragen, da sie auf jeder Seite aufgerufen werden, auch wenn sie nicht verwendet werden.

Ziehen Sie in Erwägung, unnötige Plugins zu entfernen oder einfachere Alternativen zu finden, um die Anzahl der Anfragen zu reduzieren und die Leistung der Website zu verbessern.

14. WordPress-Emojis deaktivieren

Um die Leistung der Website zu verbessern und weniger HTTP-Anfragen zu stellen, können Sie die WordPress-Emojis auch deaktivieren.

Emojis deaktivieren - Perfmatters

Diese Emojis machen zwar Spaß, fügen aber zusätzliche Skripte und Stylesheets zu Ihrer Website hinzu, was zu langsameren Ladezeiten beiträgt.

Andere wichtige Überlegungen

1. Objekt-Cache verwenden: Redis oder Memcached

Die Verwendung von Objekt-Caching mit Redis oder Memcached kann die Leistung Ihrer WordPress-Website erheblich verbessern. Dies ist besonders vorteilhaft für datenbanklastige Websites wie LMS, soziale Netzwerke und WooCommerce-Sites.

Der Objekt-Cache speichert Daten, auf die häufig zugegriffen wird, im Arbeitsspeicher (RAM) Ihres Servers; dadurch wird die Zeit zur Bearbeitung der Anfragen erheblich verkürzt. 

2. Wählen Sie leichtgewichtige und gut kodierte Themes und Plugins

Themes und Plugins erhöhen die Anzahl der Anfragen auf Ihrer Website. Je mehr Plugins Sie haben, desto mehr Anfragen können sie erzeugen.

Um HTTP-Anfragen zu minimieren, sollten Sie weniger Plugins verwenden und sich für Themes und Plugins entscheiden, die leichtgewichtig und gut codiert sind. Dies sorgt für schnellere Ladezeiten und eine reibungslosere Leistung.

3. Verwenden Sie ein CDN

Bei der Implementierung eines CDN werden die Inhalte Ihrer Website auf Server weltweit verteilt. Dies verringert nicht nur die Belastung Ihres Hosting-Servers und die Latenzzeit, sondern minimiert auch die Anzahl der Anfragen, indem die Inhalte vom nächstgelegenen CDN-Server an die Besucher Ihrer Website geliefert werden.

Mit dem KeyCDN Performance Tool durchgeführter Test

Dadurch werden die Ladezeiten von Seiten an verschiedenen geografischen Standorten verbessert.

4. Optimieren mit Preconnect, Preload und DNS-Prefetch

Preconnect, Preload und DNS-Prefetch sind Techniken, die dazu dienen, die Ladezeiten von Ressourcen zu verkürzen und die Latenzzeit zu verringern.

Sie stellen frühzeitig Verbindungen zu externen Domänen her, priorisieren das Laden wichtiger Ressourcen und holen DNS-Auflösungen für externe Domänen vor.

5. Verbesserung der Zeit bis zum ersten Byte (TTFB)

TTFB misst, wie schnell der Server auf die Anfrage eines Besuchers antwortet, und gibt damit Aufschluss über die Serverleistung und den Optimierungsgrad.

Wählen Sie ein optimiertes WordPress-Hosting und fügen Sie ein CDN hinzu, um TTFB zu reduzieren, was zu einer besseren Leistung und Benutzerfreundlichkeit führt.

6. Bilder optimieren

Um die Ladezeiten zu verbessern, sollten Sie Bilder komprimieren und optimieren, um die Dateigröße zu verringern. Eine HTTP-Anfrage für ein 3 MB großes Bild benötigt beispielsweise viel mehr Zeit als ein kleines 20 KB großes Bild.

Optimieren Sie Bilder für schnelles Laden

Squoosh ist ein cooles Tool zur Optimierung Ihrer Bilder.

Ziehen Sie auch die Verwendung von Bildformaten wie WebP in Betracht, die im Vergleich zu herkömmlichen Formaten eine bessere Komprimierung und schnellere Ladezeiten bieten.

7. GZIP- oder Brotli-Komprimierung verwenden

Mit Hilfe der GZIP- oder Brotli-Komprimierung können Sie die Größe Ihrer Website-Dateien verringern, bevor sie an die Besucher gesendet werden.

Durch diese Komprimierungstechnik wird die Datenmenge, die über das Internet übertragen werden muss, erheblich reduziert, was zu schnelleren Ladezeiten der Seiten führt.

8. JavaScript asynchron laden

Das asynchrone Laden von JavaScript ist eine Technik, die es ermöglicht, Skripte gleichzeitig mit anderen Seitenelementen zu laden, anstatt das Rendering einer Webseite zu blockieren.

Das bedeutet, dass der Browser mit dem Laden und Anzeigen von Inhalten fortfahren kann, während JavaScript-Dateien abgerufen werden, was zu einer verbesserten Leistung und Benutzerfreundlichkeit führt.

Schlussfolgerung

HTTP-Anfragen sind ein wesentlicher Bestandteil der Funktionsweise Ihrer Website. Sie sind die Art und Weise, wie Browser mit Ihrem Hosting-Server kommunizieren, um den Inhalt zu laden, den die Besucher sehen.

Zu viele HTTP-Anfragen verlangsamen jedoch definitiv Ihre Website und wirken sich negativ auf die Benutzerfreundlichkeit aus.

Wir hoffen, Sie haben gelernt, wie wichtig es ist, weniger HTTP-Anfragen zu stellen und Ihre Website für eine bessere Leistung zu optimieren. Sie müssen nicht alle oben erwähnten Techniken anwenden. Aber Sie sollten diejenigen implementieren, die die Leistung Ihrer Website am meisten verbessern.