So stellen Sie weniger HTTP-Anfragen in WordPress (11 Tipps)

Um Ihre Website anzuzeigen, sendet der Browser eines Benutzers HTTP-Anforderungen an Ihren Server. Wenn Sie jedoch mehrere nicht optimierte Dateien haben, muss der Server viele Anforderungen verarbeiten. Da diese Ihre Seitenladezeiten erheblich verlängern können, möchten Sie, dass Ihre Website weniger HTTP-Anfragen sendet.

Glücklicherweise ist es möglich, sie zu reduzieren, worum es in diesem Beitrag geht.

Eine Einführung in HTTP-Anforderungen

Immer wenn ein Benutzer Ihre Website besucht, muss sein Browser Ressourcen von Ihrem Server herunterladen. Um damit zu kommunizieren, sendet der Browser Anfragen mit HTTP (Hypertext Transfer Protocol).

Websites umfassen verschiedene Datenformen, und die Dateien für HTML, CSS, Bilder und Videos werden alle auf einem Server gespeichert – das Rendern dieser Inhalte in einem Browser erfordert HTTP-Anforderungen.

Hier sind die Schritte, die erforderlich sind, wenn jemand im Internet surft:

Es ist wichtig zu beachten, dass das Rendern einer Website nicht nur eine HTTP-Anforderung erfordert. Jede einzelne Bilddatei, jedes Plugin-Stylesheet, jedes JavaScript-Skript, jede Webschriftart usw. hat normalerweise ihre eigenen. Wenn Ihre Website nicht optimiert ist, kann sich dies daher negativ auf die Ladezeiten auswirken.

Warum Sie vielleicht möchten, dass Ihre WordPress-Site weniger HTTP-Anfragen stellt

Beim Erstellen einer Website ist es wichtig, unnötige Dateien zu minimieren. Dann muss der Browser eines Besuchers nicht so viele Ressourcen vom Server anfordern. Da Ihre Website weniger HTTP-Anfragen stellt, wird sie viel schneller geladen.

Als grobe Regel führt eine höhere Anzahl von HTTP-Anfragen zu langsameren Seitengeschwindigkeiten. Wenn weitere Ressourcen heruntergeladen werden müssen, bevor die Seite gerendert wird, müssen die Benutzer lange warten, bis sie den Inhalt sehen können.

Beispielsweise wird eine Website mit nur 50 Anfragen im Allgemeinen schneller geladen als eine mit 70 Anfragen. Dies liegt daran, dass weniger Ressourcen verarbeitet und heruntergeladen werden müssen.

Die wahre Geschichte ist etwas komplexer, da nicht alle HTTP-Anforderungen gleich sind. Eine große, langsam ladende HTTP-Anforderung könnte eine größere Wirkung haben als fünf kleine, schnell ladende HTTP-Anforderungen. Aber als Faustregel gilt: Weniger HTTP-Requests = schneller ladende Website .

Indem Sie HTTP-Anfragen auf Ihrer Website reduzieren, verbessern Sie Ihre Core Web Vitals, insbesondere Ihren Largest Content Paint (LCP) Score. Dies kann wiederum die Benutzererfahrung (UX) verbessern, da Besucher Inhalte schneller sehen.

So testen Sie die HTTP-Anfragen Ihrer Website

Wie bereits erwähnt, sind HTTP-Anforderungen Teil des Renderings. Allerdings ist nicht jede HTTP-Anfrage gleich. Bevor Sie damit beginnen, sie auf Ihrer Website zu reduzieren, müssen Sie genau wissen, auf welche Sie abzielen möchten.

Dazu können Sie ein Leistungsanalysetool wie GTmetrix verwenden. Geben Sie zunächst die URL Ihrer Website ein und klicken Sie auf Website testen :

Sie erhalten einen Leistungsbericht mit Informationen über Ihre Seitengröße und die Gesamtzahl der Anfragen. Um diese Daten anzuzeigen, scrollen Sie nach unten zu Seitendetails :

Sie können auch einzelne Anfragen anzeigen, indem Sie auf die Registerkarte Wasserfall klicken. Dies zeigt Ihnen, wie lange das Herunterladen jeder Datei gedauert hat:

Mithilfe dieses Wasserfalldiagramms können Sie erkennen, welche Elemente auf Ihrer Website unnötige HTTP-Anforderungen verursachen. Sobald Sie das Problem gefunden haben, können Sie die richtige Lösung implementieren und Ihre Website beschleunigen.

Wie Sie in der obigen Grafik sehen können, hat jede HTTP-Anforderung eine andere Größe und benötigt unterschiedlich lange zum Laden.

Wenn Sie den größtmöglichen Nutzen aus Ihren Bemühungen ziehen möchten, versuchen Sie, sich darauf zu konzentrieren, die größten und langsamsten HTTP-Anforderungen zu eliminieren.

Sie sollten sich auch darauf konzentrieren, HTTP-Anforderungen von Drittanbietern zu entfernen ( Ressourcen, die Ihre Website vom Server einer anderen Person lädt, z. B. die Google Analytics-Skripts ). Diese Anfragen von Drittanbietern erfordern zusätzliche DNS-Lookups und haben andere Leistungsnachteile.

So stellen Sie weniger HTTP-Anfragen in WordPress und beschleunigen Ihre Website (11 Tipps)

Nachdem Sie Ihre Website getestet haben, ist es an der Zeit, ihre HTTP-Anfragen zu reduzieren.

Im Folgenden gehen wir auf 11 verschiedene Möglichkeiten ein, um weniger HTTP-Anforderungen zu stellen und die verbleibenden HTTP-Anforderungen zu optimieren. Einige dieser Tipps werden HTTP-Anfragen nicht unbedingt eliminieren , aber sie optimieren die Anfragen, damit sie schneller geladen werden, was immer noch wichtig ist, um Ihre Website zu beschleunigen.

1. LÖSCHEN SIE UNNÖTIGE PLUGINS
2. RENDER-BLOCKIERUNG VON JAVASCRIPT VERZÖGERN UND/ODER JAVASCRIPT-AUSFÜHRUNG VERZÖGERN
3. SKRIPTE BEDINGT LADEN
4. MINIMIEREN SIE ANFRAGEN DRITTER
5. OPTIMIEREN SIE IHRE BILDER
6. IMPLEMENTIEREN SIE LAZY LOADING
7. VERWENDEN SIE EINEN STAPEL FÜR SYSTEMSCHRIFTARTEN
8. KOMBINIEREN SIE CSS UND JAVASCRIPT
9. VERWENDEN SIE CSS-SPRITES, UM BILDER ZU KOMBINIEREN
10. MINIFIEREN SIE DEN CODE IHRER WEBSITE
11. EMOJIS DEAKTIVIEREN

1. Löschen Sie unnötige Plugins

Möglicherweise haben Sie mehrere Plugins auf Ihrer Website installiert. Selbst wenn Sie sie nicht aktiv verwenden, können unnötige Plugins die HTTP-Anforderungen erhöhen und Ihre Webseiten verlangsamen.

Um Ihre Plugin-Anfragen zu analysieren, suchen Sie im GTmetrix Waterfall-Bericht nach „Plugins“. Dadurch werden nur HTTP-Anforderungen angezeigt, die aus Ihrem wp-content/plugins- Ordner stammen:

Sie sehen, welches Plugin die Anfrage erstellt hat, indem Sie mit der Maus über ein Ergebnis fahren. Um Ihre Website zu optimieren, gehen Sie die Liste durch und suchen Sie nach unnötigen Plugins. Wenn ein bestimmtes Tool nicht aktiv zu Ihrer Website beiträgt, sollten Sie es löschen.

2. Verzögern Sie Render-blockierendes JavaScript und/oder verzögern Sie die JavaScript-Ausführung

Wenn Sie weniger HTTP-Anfragen stellen und Ihre HTTP-Anfragen optimieren möchten, ist die Konzentration auf JavaScript eine weitere großartige Taktik.

Es gibt zwei Möglichkeiten, das Laden des JavaScripts Ihrer Website zu optimieren:

1. Renderblockierendes JavaScript aufschieben
2. JavaScript-Ausführung verzögern

Renderblockierendes JavaScript aufschieben

Durch das Verzögern von Render-blockierendem JavaScript werden HTTP-Anforderungen nicht von selbst entfernt, aber es wird sichergestellt, dass das Laden von JavaScript auf Ihrer Website keine wichtigeren HTTP-Anforderungen blockiert.

Während des Ladevorgangs kann ein Browser auf eine Renderblockierungsressource stoßen. Diese CSS- oder JavaScript-Dateien halten das Rendering an, bis die Ressource verarbeitet ist. Wenn Sie über diese unnötigen Dateien verfügen, können sie die Anzeigedauer Ihrer Inhalte verlängern.

Das Hinzufügen von Zurückstellungs- oder Asynchron-Attributen zu diesen Dateien informiert den Browser darüber, sie später auszuführen. Mit Defer-Attributen werden die Skripte während des HTML-Parsings heruntergeladen und dann ausgeführt. Asynchrone Attribute führen das Skript aus, sobald es verfügbar ist.

Um dies zu implementieren, können Sie ein funktionsspezifisches Plugin wie das kostenlose Async-JavaScript-Plugin verwenden.

Oder viele allgemeine Leistungs-/Caching-Plugins bieten diese Funktion ebenfalls an, einschließlich WP Rocket und FlyingPress.

Sie können dies auch manuell im Code Ihrer Website einrichten, wenn Sie sich dabei wohlfühlen.

Um ein defer-Attribut zu implementieren, müssen Sie einfach Ihre functions.php- Datei öffnen und das <script> -Tag für die Ressource finden. Fügen Sie hier ein defer-Attribut ein:

 <script src="resource.js" defer></script>

So sieht ein asynchrones Attribut aus:

 <script src="resource.js" async></script>

Im Allgemeinen ist es am besten, asynchrone Attribute zu verwenden. Sie müssen jedoch Zurückstellungsattribute verwenden, wenn das Skript auf einem anderen Skript basiert.

JavaScript-Ausführung verzögern

Wenn Sie weniger HTTP-Anforderungen für das anfängliche Laden der Seite stellen möchten, besteht eine weitere beliebte Taktik darin, die JavaScript-Ausführung Ihrer Website ganz oder teilweise bis zur Benutzerinteraktion zu verzögern.

Wenn Sie dies einrichten, wartet Ihre Website mit dem Laden der Dateien, bis ein Benutzer eine Interaktion ausführt, z. B. Klicken, Scrollen usw.

Indem Sie diese HTTP-Anforderungen zu einem späteren Zeitpunkt des Besuchs verschieben, können Sie weniger HTTP-Anforderungen für das anfängliche Laden stellen und auf die Benutzererfahrung ausgerichtete Metriken wie Largest Contentful Paint erheblich beschleunigen.

Um dies einzurichten, können Sie eines dieser Leistungs-Plugins verwenden:

• WP-Rakete
• FlyingPress
• Leistungsangelegenheiten

So sieht es in FlyingPress aus – Sie können entweder alle Ihre Skripte außer ausgewählten Skripten verzögern oder nur ausgewählte Skripte verzögern:

3. Scripts bedingt laden

Einige Plugins laden unnötigerweise Skripte auf Ihrer gesamten Website. Beispielsweise kann ein Plugin nur die Formulare auf Ihrer Kontaktseite handhaben, aber Skripte zu einem anderen Bereich hinzufügen. In diesem Fall empfehlen wir, die Skripte des Plugins bedingt zu laden.

Um Ihre Plugins bedingt zu laden, sollten Sie ein Tool wie Perfmatters installieren. Es verfügt über einen integrierten Skriptmanager zum Deaktivieren von Plugins oder einzelnen Skripten auf bestimmten Seiten oder Beiträgen:

Als kostenlose Option können Sie auch das Asset CleanUp-Plugin in Betracht ziehen.

Laden Sie Ihre Plugins bedingt und führen Sie Ihre Website dann erneut über GTmetrix aus. Wenn Sie immer noch einen Überschuss an HTTP-Anfragen bemerken, ist es an der Zeit, mit der nächsten Methode fortzufahren.

4. Minimieren Sie Anfragen von Drittanbietern

Während Ihre Website geladen wird, muss der Browser eines Besuchers möglicherweise Daten von einer Drittanbieterplattform abrufen, was zusätzliche HTTP-Anforderungen erfordert. Da Sie sich außerdem auf einen Drittanbieter-Server verlassen, können diese Anfragen Ihre Website erheblich verlangsamen.

Hier sind einige Beispiele für Skripte von Drittanbietern:

• Eingebettete YouTube-Videos
• Tracking-Skripte von Google Analytics
• Google-Schriftarten
• Anzeigen von Drittanbietern

Wie bei Render-Blocking-Ressourcen können Sie asynchrone oder verzögerte Attribute auf die Skripts von Drittanbietern anwenden.

Für Dienste wie Google Analytics und Google Fonts können Sie auch erwägen, sie lokal zu hosten, indem Sie Plugins wie diese verwenden:

• OMGF – Google Fonts lokal hosten.
• CAOS – Google Analytics lokal hosten.

5. Optimieren Sie Ihre Bilder

Genau wie bei Plugins ist es wichtig, unnötige Bilder von Ihrer Website zu entfernen. Da für jedes Bild eine eigene HTTP-Anforderung erforderlich ist, sollten Sie die Anzahl der Fotos auf Ihrer Website minimieren.

Dann müssen alle Ihre Bilder optimiert werden. Dies verringert zwar nicht die Anzahl der HTTP-Anforderungen, aber ihre Größe. Dies kann die Ladezeit der Seite effektiv verbessern.

Einer der besten Bildoptimierer ist Optimole. Dieses Freemium-Plugin bietet eine All-in-One-Suite von Bildoptimierungsfunktionen, darunter:

• Bereitstellen adaptiver Bilder, die für das Gerät jedes Benutzers optimiert sind.
• Bilder komprimieren.
• Bilder skalieren.
• Konvertieren von Bildern in optimale Formate.
• Bereitstellung von Bildern über das integrierte Content Delivery Network (CDN).

Wenn Sie neue Bilder hochladen, wird Optimole sie komprimieren und ihre Größe ändern. Daher müssen Sie sich keine Gedanken über große Bilddateien machen, die übermäßig viele Ressourcen erfordern.

6. Implementieren Sie verzögertes Laden

Es ist auch eine gute Idee, Lazy Loading zu implementieren. Dadurch wird verhindert, dass Bilder und Videos unterhalb der Falte geladen werden, bis ein Besucher die Seite nach unten scrollt.

Dadurch werden diese HTTP-Anforderungen beim Besuch des Benutzers nach hinten verschoben, wodurch Sie weniger HTTP-Anforderungen für das anfängliche Laden stellen und Ihre Zeit für Largest Contentful Paint verkürzen können.

WordPress 5.5 hat ein integriertes Lazy Loading für Bilder hinzugefügt, das das Lazy Loading des nativen Browsers verwendet.

Allerdings unterstützen noch nicht alle Browser natives Lazy Loading. Darüber hinaus gibt Ihnen die Verwendung eines speziellen Lazy-Loading-Plugins mehr Kontrolle über die Lazy-Loading-Funktionalität auf Ihrer Website.

Beispielsweise möchten Sie möglicherweise die ersten paar Bilder vom verzögerten Laden ausschließen, um Ihre Zeiten für Largest Contentful Paint nicht negativ zu beeinflussen.

Wenn Sie das Optimole-Plug-in aus dem vorherigen Abschnitt verwenden, enthält es auch eine integrierte Funktion, um die Bilder Ihrer Website optimal zu laden.

Sie können das Lazy-Loading-Verhalten auch über die Einstellungen des Plugins weiter anpassen.

7. Verwenden Sie einen Systemschriftenstapel

Sie können eine Vielzahl von benutzerdefinierten Schriftarten verwenden, um Ihre Website einzigartig zu machen. Jede neue Schriftart fügt jedoch beim Laden Ihrer Website eine weitere HTTP-Anforderung hinzu.

Aus diesem Grund ist es am besten, die Anzahl der von Ihnen verwendeten benutzerdefinierten Schriftarten zu begrenzen.

Alternativ können Sie sich an einen System-Font-Stack halten, der die nativen Schriftarten des Betriebssystems eines Besuchers verwendet.

Bei bestimmten Themen wie Neve, GeneratePress oder Astra können Sie zu Systemschriftarten zurückkehren. Sie können Ihren Schriftstapel jedoch auch mit CSS ändern.

8. Kombinieren Sie CSS und JavaScript

Eine andere Möglichkeit, weniger HTTP-Anforderungen für CSS- und JavaScript-Dateien zu stellen, besteht darin, separate CSS- und JavaScript-Dateien in einem einzigen Stylesheet oder einer einzigen Datei zu kombinieren.

Mit dem Autoptimize-Plug-in können Sie Site-Dateien in nur wenigen Schritten einfach aggregieren:

Aktivieren Sie unter Einstellungen > Autooptimieren das Plugin, um JavaScript- und CSS-Code zu optimieren. Aktivieren Sie dann die Kontrollkästchen neben Aggregate JS-files und Aggregate CSS-files :

Dadurch wird Ihr CSS in eine Datei und JavaScript in eine andere kompiliert. Anstatt viele Anfragen für mehrere Dateien zu senden, ermöglicht Autoptimize Ihrer Website, weniger HTTP-Anfragen zu stellen.

Hinweis – Während die Kombination von CSS und JavaScript eine todsichere Methode zur Reduzierung von HTTP-Anforderungen ist, hat dies je nach Webhost möglicherweise keine Auswirkungen auf die Leistung in der realen Welt.

Wenn Ihr Host HTTP/2 oder höher verwendet (was die meisten Hosts heutzutage tun), kann es tatsächlich besser sein, Dateien nicht zu kombinieren, da HTTP/2 Multiplexing unterstützt (was bedeutet, dass mehrere Dateien vom Server ohne mehrere Serveranforderungen heruntergeladen werden können).

Wenn Sie nicht sicher sind, ob Ihr Host HTTP/2 verwendet, können Sie sich an den Support wenden.

9. Verwenden Sie CSS-Sprites, um Bilder zu kombinieren

Auf einer typischen WordPress-Seite ist jedes Bild eine einzelne Datei. Befinden sich mehrere Fotos auf einer Seite, sendet der Browser mehrere HTTP-Requests. Ein CSS-Sprite kombiniert diese Bilder jedoch in einer Datei.

Das CSS-Sprites-Tool ist eine kostenlose Software zum Erstellen und Anpassen von CSS-Sprites. Ziehen Sie zunächst Ihre Bilder in das Upload-Feld:

Sobald Sie das CSS-Sprite generiert haben, fügen Sie es der WordPress-Medienbibliothek hinzu. Anschließend können Sie den generierten HTML- und CSS-Code verwenden, um jedes Bild auf Ihrer Website zu platzieren.

10. Verkleinern Sie den Code Ihrer Website

Das Minimieren Ihrer Site-Dateien hilft Ihnen nicht dabei, weniger HTTP-Anforderungen zu stellen, aber es hilft Ihnen, die unvermeidlichen HTTP-Anforderungen für den HTML-, CSS- und JavaScript-Code Ihrer Site zu optimieren.

Beim Schreiben von Code können Sie Zeichen und Leerzeichen einfügen, um die Lesbarkeit zu verbessern. Da sie für die Bearbeitung einer Anfrage nicht erforderlich sind, können Sie sie entfernen.

Der einfachste Weg, den Code deiner WordPress-Seite zu minimieren, ist mit einem Plugin wie dem zuvor erwähnten Autoptimize-Plugin.

Die meisten WordPress-Caching-Plugins enthalten auch Code-Minifizierungsfunktionen, einschließlich WP Rocket, FlyingPress, WP Fastest Cache und mehr.

Wenn Sie das CDN von Cloudflare verwenden, können Sie Ihren Code auch von Cloudflare für Sie minimieren lassen.

Sobald Sie die Dateien Ihrer Website verkleinert haben, werden HTTP-Anforderungen schneller ausgeführt. Mit leichterem Code beschleunigen Sie Ihre Website und minimieren sperrige Anfragen.

11. Emojis deaktivieren

Standardmäßig fügen die WordPress-Emojis Ihrer Website eine zusätzliche HTTP-Anforderung hinzu. Um eine weitere HTTP-Anfrage loszuwerden, können Sie WordPress-Emojis deaktivieren.

Für die einfachste Option können Sie einfach das leichte Plug-in „Disable Emojis“ installieren.

Alternativ kannst du diesen Code der Datei functions.php deines Child-Themes oder einem Code-Manager-Plug-in wie Code Snippets hinzufügen:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Nachdem Sie all diese Tipps umgesetzt haben, sollten Sie eine Website mit weniger HTTP-Anfragen haben!

Machen Sie weniger HTTP-Anfragen auf Ihrer Website 🎯

Als grobe Regel gilt: Je mehr HTTP-Anfragen Ihre Website hat, desto langsamer lädt sie. Dies kann sich negativ auf die Benutzererfahrung (UX) Ihrer Website auswirken und dazu führen, dass Besucher die Website verlassen, ohne Ihre Inhalte zu lesen oder ein Produkt zu kaufen.

Um Ihre Website zu beschleunigen, möchten Sie möglichst viele HTTP-Anfragen eliminieren und die verbleibenden HTTP-Anfragen optimieren, damit sie möglichst schnell geladen werden.

Mit den Tipps in diesem Beitrag können Sie beide Aufgaben erledigen und eine schnell ladende Website für Ihre Besucher erstellen.

👉 Denken Sie jedoch daran, dass die Optimierung der HTTP-Anfragen Ihrer Website nur ein Teil des Leistungspuzzles ist. Sie benötigen auch hochwertiges WordPress-Hosting, wenn Sie möchten, dass Ihre Website schnell geladen wird – sehen Sie sich unsere beste WordPress-Hosting-Zusammenfassung an, um die besten Optionen zu sehen.

Haben Sie Fragen zur Reduzierung der Anzahl von HTTP-Anfragen in WordPress? Fragen Sie uns im Kommentarbereich unten!