So stellen Sie weniger HTTP-Anfragen in WordPress
Veröffentlicht: 2022-11-17
Websites, die mehr HTTP-Anfragen stellen, werden tendenziell langsamer geladen. Die Optimierung Ihres Servers für weniger HTTP-Anforderungen verbessert die Leistung Ihrer Website und die allgemeine Ladegeschwindigkeit.
In diesem Leitfaden erfahren Sie, wie Sie Ihre Website optimieren, um weniger HTTP-Anfragen zu stellen . Lassen Sie uns vorher erklären, was HTTP-Anfragen bedeuten und warum Sie die Anzahl der Anfragen, die Ihr Server verarbeitet, reduzieren sollten.
Inhalt:
- Was sind HTTP-Anforderungen?
- Vorteile der Reduzierung von HTTP-Anforderungen
- So analysieren Sie die HTTP-Anforderungen Ihrer Website
- Tipps, um weniger HTTP-Anfragen in WordPress zu stellen
- Fazit
Was sind HTTP-Anforderungen?
HTTP ist die Abkürzung für HyperText Transfer Protocol. Auf diese Weise kommunizieren Server miteinander (dh Browser und Webserver).
Eine Website enthält verschiedene Elemente wie Bilddateien, JavaScript- und CSS-Dateien. Diese Dateien arbeiten zusammen, um sicherzustellen, dass die Website korrekt angezeigt wird. Wenn eines der Elemente nicht richtig geladen wird, beeinträchtigt dies das Design und die Funktionalität der Website.
Um eine Seite zu laden, muss der Webbrowser alle Dateien vom Webserver herunterladen. Dazu muss der Browser HTTP-Anfragen an den Server stellen.
Der Server kümmert sich um den Abruf der angeforderten Seite. Wenn also 40 Dateien geladen werden müssen, stellt der Server 40 separate HTTP-Anforderungen.
Je mehr Dateien Sie auf Ihrer Website haben, desto mehr HTTP-Anfragen muss Ihr Server stellen.
Vorteile der Reduzierung von HTTP-Anforderungen
Sie müssen weniger Anforderungen auf Ihrem Server stellen, da dies die Antwortzeit des Servers verkürzt. Wenn der Server viele HTTP-Anfragen stellen muss, wird dies Ihre Website verlangsamen.
Die Standardeinstellungen der meisten Websites erfordern, dass der Server alle erforderlichen Dateien herunterlädt, bevor sie im Webbrowser des Benutzers angezeigt werden.
Einige Anfragen sind von Natur aus „blockierend“. Das bedeutet, dass andere Anforderungen nicht ausgeführt werden, bis die Sperranforderung abgeschlossen ist.
Eine langsame Website beeinträchtigt die Benutzererfahrung, was zu einer hohen Absprungrate auf Ihrer Website führen kann. Wenn Ihre Absprungrate hoch ist, wirkt sich dies außerdem auf das Ranking Ihrer Website in Suchmaschinen aus. Aus diesem Grund müssen Sie die Geschwindigkeit Ihrer Website optimieren, indem Sie weniger HTTP-Anfragen stellen.
Bevor wir fortfahren, müssen Sie eine allgemeine Faustregel verstehen. Wenn Sie mehr Dateien auf Ihrem Server haben, die geladen werden müssen, führt dies zu mehr HTTP-Anforderungen. Auch wenn Sie große Dateien auf Ihrem Server haben, führt dies zu einer längeren Antwortzeit.
Um weniger HTTP-Anfragen auf WordPress -Sites zu stellen, müssen Sie die Anzahl der Dateien reduzieren, die der Server verarbeitet. Aber das allein kann die Geschwindigkeit Ihrer Website möglicherweise nicht vollständig optimieren. Sie müssen auch die Dateigröße auf Ihrem Server reduzieren, damit er die Anfragen rechtzeitig verarbeiten kann.
So analysieren Sie die HTTP-Anforderungen Ihrer Website
Jetzt wissen Sie, was HTTP-Anfragen sind und welche Vorteile es hat, die Anzahl der Anfragen zu reduzieren, die Ihr Server verarbeitet.
Bevor Sie fortfahren, müssen Sie Ihre Website testen, um die Anzahl der Anfragen zu ermitteln, die sie derzeit generiert. Wenn Sie dies im Voraus wissen, wissen Sie, ob die Tipps, die Sie aus diesem Leitfaden anwenden, einen guten Einfluss auf die Anzahl der Anfragen haben, die Ihre Website stellt.
Es gibt viele Online-Tools zum Testen von HTTP-Anforderungen. GTmetrix- und Pingdom-Geschwindigkeitstest-Tools können die Ladezeiten Ihrer Website analysieren. Einige dieser Testtools können auch die Dateien hervorheben, die langsamer geladen werden, und mögliche Korrekturen vorschlagen.
Für dieses Beispiel verwenden wir das GTmetrix-Tool, um eine Test-Website zu analysieren. Gehen Sie zunächst zur GTmetrix-Website und geben Sie Ihre Website-Adresse ein. Klicken Sie danach auf Analysieren .
Das Tool analysiert die Leistung Ihrer Website, einschließlich der Zeit bis zum ersten Byte und der Gesamtladegeschwindigkeit.
Scrollen Sie nach unten zum Abschnitt "Top Issues". Sie werden Probleme sehen, die sich auf die Leistung Ihrer Website und die Ladegeschwindigkeit auswirken. Von hier aus können Sie auch mögliche Lösungen für die Probleme sehen.
Wenn Sie weiter nach unten zum Abschnitt „Seitendetails“ scrollen, sehen Sie die Gesamtladegeschwindigkeit der Seite und die Gesamtzahl der Anfragen. Die Website in diesem Beispiel stellt beim Laden der Seite etwa 57 Anfragen. Wir können die Anzahl der Anfragen reduzieren, um die Leistung der Website zu verbessern.
Über die Registerkarte " Wasserfall " können Sie auf einen detaillierten Bericht zu einzelnen Anfragen zugreifen.
Hier sehen Sie die Bearbeitungszeit jeder Anfrage im Detail.
Im nächsten Abschnitt geben wir Tipps, wie Sie weniger Anfragen stellen können. Nach der Umsetzung der Tipps werden wir diese Beispielseite erneut analysieren, um die erzielte Verbesserung zu sehen. Lass uns anfangen.
Tipps, um weniger HTTP-Anfragen in WordPress zu stellen
Jetzt wissen Sie, was HTTP-Anfragen sind und wie Sie die Anzahl der Anfragen Ihres Servers analysieren. Als Nächstes zeigen wir Ihnen 10 Möglichkeiten, Ihre Website zu optimieren und die Reaktionszeit des Servers zu verkürzen.
- Installieren Sie ein WordPress-Caching-Plugin
- Minimieren Sie CSS- und JavaScript-Dateien
- Kombinieren Sie CSS- und JavaScript-Ressourcen
- Optimieren Sie Ihre Bilder (entfernen Sie unnötige Bilder)
- Lazy Loading aktivieren
- Verwenden Sie ein CDN
- Ersetzen Sie schwere Plugins durch leichtere
- Löschen Sie nicht verwendete Plugins und Themes
- Reduzieren Sie Skripte von Drittanbietern
- Render-blockierendes JavaScript aufschieben
Installieren Sie ein WordPress-Caching-Plugin
Bevor wir mit den Optimierungen beginnen, müssen Sie ein Caching-Plugin auf Ihrer Website installieren. Mit einem Caching-Plugin können Sie die meisten Tipps, die wir in diesem Leitfaden teilen, implementieren.
Es gibt viele kostenlose und Premium-Plugins. Premium-Plugins wie WP Rocket optimieren standardmäßig einige Teile Ihrer Website. Es ist jedoch eine Premium-Option und steht Online-Anfängern nicht zur Verfügung.
Wir werden ein kostenloses Plugin verwenden, das in Bezug auf Funktionalität und Features nahe kommt. Um den Schritten in dieser Anleitung zu folgen, müssen Sie das LiteSpeed Cache-Plugin auf Ihrer Website installieren.
Melden Sie sich dazu in Ihrem WordPress-Admin-Dashboard an und gehen Sie dann zu Plugins >> Add New . Geben Sie im Suchfeld „litespeed cache“ ein.
Als Nächstes müssen Sie auf die Schaltfläche Jetzt installieren klicken, um mit der Installation zu beginnen.
Nach Abschluss der Installation ändert sich die Schaltfläche in „Aktivieren“. Klicken Sie auf diese Schaltfläche, um das Plugin zu aktivieren.
Minimieren Sie CSS- und JavaScript-Dateien
CSS- und JavaScript-Dateien sind unerlässlich, um Ihre Webseite zu verschönern und interaktiv zu gestalten. Diese Dateien sind jedoch oft groß und können die Zeit verlängern, die Ihr Server benötigt, um Anfragen zu verarbeiten.
Das Bereitstellen einer minimierten Version der Ressourcen Ihrer Website reduziert die Größe der Dateien erheblich. Einige Themes und Plugins verwenden bereits minimierte Skripte. Sie müssen diese Option jedoch noch aktivieren, um die Ressourcen Ihrer Website weiter zu optimieren.
Gehen Sie zunächst zu LiteSpeed Cache >> Page Optimization . Sie müssen die Option „CSS minimieren “ auf der Registerkarte „CSS-Einstellungen“ aktivieren.
Klicken Sie außerdem auf die Registerkarte JS-Einstellungen und aktivieren Sie die Option JS Minify .
Kombinieren Sie JavaScript- und CSS-Ressourcen
WordPress-Designs und -Plugins haben ihre separaten CSS-Stylesheets und JavaScript-Dateien. Jedes Mal, wenn Sie eine Seite laden, muss Ihr Server alle Dateien einzeln herunterladen, bevor die Seite dem Benutzer angezeigt wird.
Die Anzahl der HTTP-Anforderungen, die Ihre Website benötigt, steigt, wenn Sie weiterhin Plugins auf Ihrer Website installieren. Um dieses Problem zu lösen, müssen Sie alle CSS- und JavaScript-Dateien kombinieren, damit Ihr Server mehrere Anforderungen kombiniert.
Navigieren Sie in den Optimierungseinstellungen der LiteSpeed Cache-Seite zur Registerkarte CSS-Einstellungen und aktivieren Sie die Option „CSS Combine“.
Navigieren Sie auf ähnliche Weise zur Registerkarte JS-Einstellungen und aktivieren Sie die Option JS Combine .
Hinweis: Sie sehen eine Warnung, die lautet; „Diese Option kann zu einem JS-Fehler oder Layoutproblem auf Frontend-Seiten mit bestimmten Themen/Plugins führen. JS-Fehler finden Sie in der Entwicklerkonsole des Browsers, indem Sie mit der rechten Maustaste klicken und Inspect auswählen . ”
Dies bedeutet im Wesentlichen, dass das Kombinieren von JS-Dateien Kompatibilitätsprobleme mit einigen Ihrer Plugins verursachen kann. Wir empfehlen Ihnen daher, nach dem Speichern Ihrer Änderungen das Frontend Ihrer Website zu besuchen, um zu testen, ob alles so funktioniert, wie es sollte. Wenn nicht, können Sie diese Option deaktivieren und mit dem nächsten Optimierungstipp fortfahren.
Bilder optimieren (Unnötige Bilder entfernen)
Mediendateien wie Bilder und Videos machen Websites optisch ansprechend. Wenn Sie Ihre Mediendateien jedoch nicht optimieren, wirkt sich dies auf Ihre Benutzererfahrung aus.
Das Hochladen von hochauflösenden Bildern bedeutet, dass sie mehr Speicherplatz benötigen. Und wenn der Server eine Anfrage stellen muss, führt dies zu einer langen Ladezeit. Hier ist ein Beispiel dafür aus dem Testen der Beispiel-Website mit dem Tool PageSpeed Insights.
Wir empfehlen, Mediendateien zu komprimieren, um Ihre Bilder zu optimieren, bevor Sie sie auf Ihre WordPress-Site hochladen. Tools wie Compressor.io können zum Komprimieren von Bilddateien nützlich sein.
Sie können auch ein Bildoptimierungs-Plugin verwenden, um vorhandene Bilder auf Ihrer Website zu komprimieren. Hierfür empfehlen wir die Verwendung des Smush-Plugins.
Nachdem Sie das Plugin auf Ihrer Website installiert und aktiviert haben, müssen Sie über Smush >> Bulk Smush auf die Einstellungsseite des Plugins zugreifen. Sie sehen die Anzahl der Bilder, die komprimiert werden müssen, im Abschnitt „Bulk Smush“.
Um mit der Optimierung Ihrer Bilder zu beginnen, müssen Sie auf die Schaltfläche Bulk Smush Now klicken.
Es kann eine Weile dauern, bis das Plugin den Vorgang abgeschlossen hat. Nach Abschluss optimiert das Plugin große Bilder und reduziert ihre Dateigröße.
Das Plugin zeigt auch die Menge an Speicherplatz an, die Sie durch die Optimierung Ihrer Bilder eingespart haben.
Löschen nicht verwendeter Bilder
Wenn Sie Mediendateien haben, die Sie nicht mehr auf Ihrer Website verwenden, müssen Sie sie von Ihrer Website löschen. Um ein Bild von Ihrer Website zu löschen, gehen Sie zu Medien >> Bibliothek .
Suchen Sie als Nächstes das Bild, das Sie löschen möchten, bewegen Sie den Mauszeiger über das Bild und wählen Sie Endgültig löschen .
Aktivieren Sie Lazy Loading, um weniger HTTP-Anforderungen zu stellen
Lazy Loading ist eine Technik, mit der Webbilder nur geladen werden, wenn sich das Bild im Ansichtsfenster des Benutzers befindet. Dies bedeutet, dass Ihr Server andere wichtige Ressourcen lädt und das Laden von Bildern verzögert, bis sie benötigt werden.
Wir verwenden das Smush-Plugin, um Lazy Loading zu implementieren. Gehen Sie zunächst zu Smush >> Lazy Load und klicken Sie dann auf die Schaltfläche Aktivieren , um Lazy Loading auf Ihrer Website zu aktivieren.
Wir verwenden die vom Plugin ausgewählten Standardoptionen.
Scrollen Sie nach unten und klicken Sie auf Änderungen speichern, um Ihre Änderungen zu aktualisieren.
Verwenden Sie ein CDN, um HTTP-Anforderungen zu reduzieren
CDN ist die Abkürzung für Content Delivery Network. Es ist ein Web-Performance-Tool, das als Vermittler zwischen Ihrem Server und dem Browser des Benutzers dient.
Sie verbessern die Leistung Ihrer Website, indem sie Benutzern basierend auf ihrem Standort eine zwischengespeicherte Version Ihrer Website bereitstellen.
Darüber hinaus können CDNs Anfragen dank ihrer mehreren Server schneller verarbeiten. Der Browser des Benutzers reagiert schneller, wenn er sich in der Nähe des Servers befindet.
Es gibt viele CDN-Anbieter wie MaxCDN und Cloudflare. Einige von ihnen bieten kostenlose Dienste für Online-Anfänger an.
In unserem Tutorial erfahren Sie, wie Sie Cloudflare in WordPress einrichten . Die Anleitung erklärt auch, wie man kostenloses SSL mit Cloudflare erhält und konfiguriert.
Ersetzen Sie schwere Plugins durch leichtere Versionen
Wenn Sie ein Plugin verwenden, das viele Ressourcen benötigt, um zu funktionieren, wirkt sich dies auf die Leistung Ihrer Website aus.
Wir haben dieselbe Website für Core Web Vitals mit dem PageSpeed-Tool von Google getestet. Hier ist der Vorschlag von Google.
Google schlägt vor, ein optimiertes Design und Plugins zu verwenden, um die anfängliche Antwortzeit des Servers zu verkürzen.
Der beste Weg, dies zu lösen, besteht darin, nach einem alternativen Plugin mit leichtem Design zu suchen.
Wenn das Ersetzen des Plugins jedoch wichtige Funktionen auf Ihrer Website beeinträchtigt, verwenden Sie das Plugin weiterhin und wenden Sie sich an die Entwickler des Plugins, um sie über das Leistungsproblem zu informieren.
Löschen Sie nicht verwendete Plugins und Themes
Obwohl inaktiv, werden einige der Ressourcen von Themen und Plugins, die Sie nicht aktiv verwenden, dennoch geladen, wenn ein Benutzer Ihre Website besucht.
Idealerweise sollten Sie keine inaktiven Dateien auf Ihrer Website belassen. Abgesehen von der Zunahme von HTTP-Anfragen nehmen sie oft Serverplatz in Anspruch, was sich auf die Ladezeit Ihrer Website auswirken kann.
Um ein Plugin zu löschen, melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie dann zu Plugins >> Installierte Plugins . Klicken Sie anschließend auf die Registerkarte Inaktiv .
Klicken Sie danach unter dem inaktiven Plugin auf Löschen , um es von Ihrer Website zu entfernen.
Befolgen Sie denselben Vorgang, um andere nicht verwendete Plugins von Ihrer Website zu löschen.
Um ein Design von Ihrer Website zu löschen, gehen Sie zu Darstellung >> Designs , um die Designseite zu öffnen. Bewegen Sie als Nächstes den Mauszeiger über das inaktive Design und wählen Sie Designdetails aus.
Klicken Sie auf der nächsten Seite unten auf der Seite auf Löschen .
Wiederholen Sie denselben Vorgang für andere inaktive Themen auf Ihrem Dashboard.
Reduzieren Sie Skripte von Drittanbietern
Skripte von Drittanbietern sind Codeteile, die Sie dem <head> -Tag Ihres Themes hinzufügen, um Funktionen aus einem externen Skript auf Ihre Website zu importieren. Diese können Skripte von Google Analytics, Google Font, Facebook Pixel oder Werbenetzwerken von Drittanbietern enthalten.
Wenn die Skripte von Drittanbietern schwer sind, erhöht dies die Anzahl der HTTP-Anfragen und die Ladezeit Ihrer Website.
Angenommen, Sie haben Ihrer Website ein Skript hinzugefügt, um die Domain-Inhaberschaft bei einem Webdienst zu überprüfen. Sobald die Überprüfung abgeschlossen ist, sollten Sie diese Skripte entfernen, wenn sie für die Leistung Ihrer Website nicht unbedingt erforderlich sind.
Einige Skripte von Drittanbietern sind jedoch entscheidend für die Leistung Ihrer Website. Das Entfernen dieser Skripte kann das Design oder die Funktionalität Ihrer Website beeinträchtigen.
Wenn die Skripte erforderlich sind, gibt es zwei Möglichkeiten, wie Sie damit umgehen können. Mit dem Google Tag Manager können Sie Rendering-Blocking-Ressourcen verschieben oder Skripte extern laden.
Google Tag Manager bietet einen Speicherplatz zum Hosten von Ressourcen von Drittanbietern, anstatt sie direkt zu Ihrer Website hinzuzufügen. Sie müssen Ihrer Website lediglich den Google Tag Manager-Code hinzufügen.
Nachdem Sie den Code hinzugefügt haben, können Sie Ihrem Google-Tag-Konto andere Skripts hinzufügen, und es funktioniert problemlos auf Ihrer Website.
Wir werden im folgenden Abschnitt mehr über das Verzögern von JS erklären.
Render-Blocking-Skripts aufschieben
Render-Blocking-Skripte sind Ressourcen wie JavaScript und CSS-Code, die verhindern, dass Webseiten schnell geladen werden. Diese Skripte enthalten große Dateien, und der Server muss warten, bis sie geladen sind, bevor die Webseite angezeigt wird.
Eine Möglichkeit, dies zu umgehen, besteht darin, das Laden des Skripts bei der ersten Anforderung zu verzögern. Das Verzögern ähnelt dem verzögerten Laden von Bildern.
Wenn Sie Render-Blocking-Skripts verzögern, lädt Ihr Server die Ressourcen erst, wenn der Benutzer mit der Interaktion auf der Seite beginnt. Dadurch wird die Anzahl der Anfragen Ihres Servers zum Laden einer Webseite reduziert.
Das LiteSpeed Cache-Plug-in verfügt über diese Funktion. Um es zu aktivieren, gehen Sie zu LiteSpeed Cache >> Page Optimization . Klicken Sie danach auf die Registerkarte JS-Einstellungen und scrollen Sie nach unten zum Abschnitt „Load JS Deferred“.
Wir empfehlen, die Option Verzögert zu wählen. Diese Option lädt die Render-Blocking-Ressourcen, sobald der Benutzer zu scrollen beginnt. Auf diese Weise wirkt sich dies nicht auf die anfängliche Ladezeit der Seite aus.
Hinweis: Sie sehen eine Warnung, die lautet; „Diese Option kann bei bestimmten Themes/Plugins zu einem JS-Fehler oder Layoutproblem auf Frontend-Seiten führen.“
Wir empfehlen Ihnen, nach dem Speichern Ihrer Änderungen das Frontend Ihrer Website zu besuchen, um zu sehen, ob sich das auf das Layout Ihrer Website auswirkt. Wenn diese Einstellung nicht mit Ihrem Design kompatibel ist, empfehlen wir, sie zu deaktivieren, damit sie die Benutzererfahrung nicht beeinträchtigt.
Nachdem Sie die Tipps in diesem Leitfaden umgesetzt haben, analysieren Sie Ihre Website erneut mit dem GTmetrix-Tool, um die Anzahl der Anfragen Ihres Servers zu sehen. Hier ist das Ergebnis des Tests derselben Website mit GTmetrix.
Wir haben die Seitengröße und die Gesamtzahl der HTTP-Anforderungen von 57 auf 15 reduziert. Das entspricht einer Verringerung der Anzahl der Anforderungen um etwa 73 %.
Fazit
Kleine Änderungen an Ihrer Website können sich stark auf die Gesamtgeschwindigkeit Ihrer Website auswirken. Wenn Benutzer weniger Zeit damit verbringen, auf das Laden Ihrer Inhalte zu warten, bleiben sie länger.
In diesem Leitfaden haben wir erklärt, wie HTTP-Anfragen funktionieren und warum Sie Ihre Website optimieren müssen, um weniger Anfragen zu stellen. Anschließend haben wir 10 Möglichkeiten vorgestellt, wie Sie die Anzahl der Anfragen, die Ihr Server verarbeitet, reduzieren können.
Weniger HTTP-Anfragen zu stellen, ist eine Möglichkeit, Ihre Website zu beschleunigen. Weitere Informationen finden Sie in unserem Leitfaden zur Optimierung der WordPress-Geschwindigkeit.