Zuletzt aktualisiert am 17. Juni 2024 von Jérôme Kerviel

Möchten Sie WordPress-Browser-Caching auf Ihrer Website implementieren?

Tools zum Testen der Website-Geschwindigkeit wie Google PageSpeed Insights, GTmetrix und Pingdom empfehlen, den Browser-Cache zu nutzen, da dies eine unglaublich effektive Methode zur Beschleunigung einer WordPress-Website ist. 🚀

Beim Browser-Caching werden Daten im Browser zwischengespeichert, so dass sie schneller abgerufen werden können, ohne dass die Seite bei jedem Aufruf neu geladen werden muss.

Wie kann man das Browser-Caching in WordPress nutzen?

Es gibt zwei verschiedene Möglichkeiten, den Browser-Cache zu nutzen. Sie können dazu ein Plugin verwenden oder die Konfigurationsdateien manuell bearbeiten.

Wir empfehlen Ihnen, alle unten aufgeführten Methoden durchzulesen und die für Sie günstigste Methode anzuwenden.

⚠️ WICHTIG! Sie können damit beginnen, Folgendes zu entfernen WordPress-Plugins die Sie nicht benötigen, von Ihrer WordPress-Website zu entfernen. Plugins fügen Ihrer Website zusätzlichen Code und Funktionen hinzu. Solche zusätzlichen Codes können die Leistung Ihrer Website verlangsamen, insbesondere wenn die Plugins schlecht kodiert sind oder miteinander in Konflikt geraten.

Erstellen Sie außerdem eine Sicherungskopie Ihrer gesamten Website. 💾

Einige der Schritte in diesem Tutorial beinhalten den Zugriff auf das Backend Ihrer Website, den Zugriff auf wichtige Konfigurationsdateien und das Einfügen von Codeschnipseln.

Andere Schritte umfassen die Installation neuer Plugins und das Hinzufügen von Codeschnipseln in Ihre Konfigurationsdateien. All dies ist eine riskante Angelegenheit. Ein Fehler kann Ihre Website zum Absturz bringen. Die Sicherungskopie ist Ihr Sicherheitsnetz für den Fall, dass eine Katastrophe eintritt. Erstellen Sie also eine Sicherungskopie, bevor Sie mit dem nächsten Schritt fortfahren.

1. Installieren und aktivieren Sie ein Caching-Plugin
2. Verwenden Sie Konfigurationsdateien, um Codeschnipsel manuell hinzuzufügen

1. Installieren und aktivieren Sie ein Caching-Plugin 🔌.

Die Verwendung eines Caching-Plugins ist der einfachste Weg, das Browser-Caching zu nutzen. Sie müssen das Plugin nur installieren und richtig einrichten.

Es gibt mehrere Caching-Plugins zur Auswahl. Einige der beliebtesten sind WP Rocket, W3 Total Cache, WP Super Cache, WP Fastest Cache und Comet Cache.

Die meisten dieser Plugins haben eine kostenlose Version, mit der Sie das Browser-Caching nutzen können.

2. Verwenden Sie Konfigurationsdateien, um Codeschnipsel manuell hinzuzufügen 🧑‍💻

Um die Browser-Zwischenspeicherung manuell zu nutzen, müssen Sie die folgenden zwei Schritte durchführen: Bestimmen Sie Ihren Webserver (Apache oder Nginx) und fügen Sie cache-control-Header oder expires-Header hinzu.

Bestimmen Sie Ihren Webserver

Sie können sich kurz mit Ihrem Hosting-Anbieter unterhalten und ihn fragen, ob Sie Apache oder Nginx verwenden.

Cache-Control-Header oder Expires-Header hinzufügen

"Cache-control-Header" und "expires-Header" sind Richtlinien, die den Browsern mitteilen, wie lange sie Inhalte im Cache speichern und verwenden sollen.

Sowohl cache-control-Header als auch expires-Header dienen demselben Zweck, so dass Sie müssen nicht beide Kopfzeilen hinzufügen zu Ihrem Hosting-Server.

In diesem Abschnitt haben wir beschrieben, wie man beides hinzufügt, aber achten Sie darauf, dass nur einen hinzufügen auf Ihrem Server. Es ist bekannt, dass das Hinzufügen beider Header zu Konflikten in einem WordPress-Website.

Cache-control-Header sind vielseitiger und moderner und bieten eine fein abgestufte Kontrolle über die Zwischenspeicherung, während expires-Header eine einfache Möglichkeit zur Angabe von Cache-Ablaufzeiten bieten. Es steht Ihnen jedoch frei, den Header hinzuzufügen, der Ihnen am besten gefällt.

Nginx-Server

Nginx-Benutzer müssen sich bei ihrem Hosting-Server anmelden, ihre Konfigurationsdateiund fügen Sie den folgenden Codeschnipsel hinzu cache-control-Kopfzeilen:

location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {

 abläuft 7d;

 add_header Cache-Control "public, no-transform";

}

Damit wird die Verfallszeit für die angegebenen Dateitypen auf sieben Tage festgelegt. Sie können die Anzahl der Tage ändern und Dateitypen aus dem Codeschnipsel hinzufügen oder entfernen.

In der gleicher Server-Blockkopieren Sie das Folgende und fügen es ein Kopfzeilen laufen ab:

location ~* \.(jpg|jpeg|gif|png|svg)$ {

  läuft 365d ab;

}

location ~* \.(pdf|css|html|js|swf)$ {

  läuft 3d ab;

}

Wie Sie sehen können, werden in diesem Codeausschnitt die Verfallszeiten für verschiedene Dateitypen festgelegt.

Sie können den Code nach Belieben an Ihre Bedürfnisse anpassen.

💡 Hinweis: Wenn Sie nicht wissen, wie Sie auf die Nginx-Konfigurationsdatei zugreifen können, suchen Sie nach einer Hilfedokumentation auf Ihrem Hosting-Server oder wenden Sie sich an Ihr Hosting-Supportteam.

Apache-Server

Apache-Benutzer müssen sich bei ihrem Hosting-Konto anmelden und auf die .htaccess-Datei, und fügen Sie den folgenden Codeschnipsel hinzu cache-control-Kopfzeilen.

⌛ Wichtig Fügen Sie ihn unbedingt vor dem Satz "#BEGIN WordPress" oder nach dem Satz "#END WordPress" ein.

Headersatz Cache-Control "max-age=172800, public"

Der Code setzt die Cache-Verfallszeit auf 172800 Sekunden oder zwei Tage.

Zum Hinzufügen Kopfzeilen laufen ab auf Ihren Apache-Server zu übertragen, fügen Sie den folgenden Codeschnipsel in die .htaccess-Datei ein:

## ZWISCHENSPEICHERUNG VON KOPFZEILEN MIT ABLAUFDATUM ##



ExpiresActive Ein

ExpiresByType image/jpg "Zugriff 1 Jahr"

ExpiresByType image/jpeg "Zugriff 1 Jahr"

ExpiresByType image/gif "Zugriff 1 Jahr"

ExpiresByType image/png "Zugriff 1 Jahr"

ExpiresByType image/svg "Zugriff 1 Jahr"

ExpiresByType text/css "Zugriff 1 Monat"

ExpiresByType anwendung/pdf "Zugriff 1 Monat"

ExpiresByType anwendung/javascript "Zugriff 1 Monat"

ExpiresByType anwendung/x-javascript "Zugriff 1 Monat"

ExpiresByType anwendung/x-shockwave-flash "Zugriff 1 Monat"

ExpiresByType image/x-icon "Zugriff 1 Jahr"

ExpiresDefault "Zugriff 2 Tage"



## EXPIRES HEADER CACHING ##

Sie können wahrscheinlich erkennen, dass der Code Caching-Perioden auf der Grundlage von Dateitypen festlegt.

Sie können beide Codes nach Belieben ändern.

Das war's, Leute. So nutzen Sie das Browser-Caching in WordPress.

Wird immer noch die Warnung "Browser-Cache leeren" angezeigt?

Wenn das Tool für die Website-Geschwindigkeit immer noch die Warnung "Leverage Browser Cache" anzeigt, dann liegt das wahrscheinlich an Google Analytics (GA).

Sie können überprüfen, ob GA der wahre Übeltäter ist, indem Sie Ihre Website auf Googles PageSpeed-Einblick. Erweitern Sie alle Auditergebnisse und suchen Sie die Google Analytics-Skripte. Wenn GA der Übeltäter ist, dann schlägt das Page Insight Tool vor, dass Sie "das Browser-Caching für die folgende cachefähige Ressource nutzen".

Um das Browser-Caching für GA zu nutzen, müssen Sie ein 3rd-Part-Plugin namens Vollständige Analyse-Optimierungssuite (CAOS).

Aber bevor Sie mit der Installation des Plugins auf Ihrer WordPress-Website beginnen, sollten Sie wissen, dass diese Methode nicht von Google unterstützt und dass das CAOS-Plugin mit vielen Google Analytics-Plugins nicht kompatibel ist.

Schlussfolgerung 🧐.