Expires Header in WordPress hinzufügen

Wie man Expires Header in WordPress am schnellsten hinzufügt

Hast du kürzlich einen Speedtest für deine WordPress-Seite durchgeführt und festgestellt, dass du „Expires-Header“ hinzufügen musst? Diese Header sind wichtig, um das Browser-Caching zu optimieren und die Ladezeiten deiner Seite zu verkürzen. Sie spielen auch eine Rolle in den Performance-Bewertungen von Tools wie GTmetrix, die auf den YSlow-Empfehlungen basieren.

In diesem Artikel erklären wir, was Expires-Header sind und wie sie sich auf deine Website auswirken. Anschließend zeigen wir dir Schritt für Schritt, wie du sie in WordPress integrieren kannst. Bevor wir jedoch dazu kommen, machen wir einen kurzen Ausflug zum Thema Browser-Caching.

Was ist Browser Caching?

Bevor wir uns den Expires-Headern zuwenden, ist es wichtig, das Konzept des Browser-Caching zu verstehen. Dies ist wichtig, da die Expires-Header dazu dienen, das Browser-Caching zu steuern und zu implementieren. Ohne ein Verständnis des Browser-Cachings ist es schwierig, die Funktionsweise der Expires-Header zu verstehen.

Mit Browser-Caching kann eine Website dem Browser des Besuchers mitteilen, dass bestimmte Dateien auf dem lokalen Computer des Besuchers gespeichert und bei zukünftigen Besuchen von dort geladen werden sollen, anstatt sie bei jedem Seitenaufruf vom Server herunterzuladen.

Durch die Vermeidung wiederholter Downloads kann die Ladezeit der Seite verkürzt und die Bandbreitennutzung reduziert werden.

Ein einfaches Beispiel ist das Logo deiner Website. Da das Logo auf jeder Seite gleich ist, ist es ineffizient, den Browser zu zwingen, das Logo jedes Mal neu herunterzuladen. Mit Hilfe des Browser-Cachings kann das Logo stattdessen lokal im Browser des Besuchers gespeichert werden. Während das Logo beim ersten Besuch der Seite noch heruntergeladen werden muss, wird es bei späteren Besuchen aus dem lokalen Cache geladen.

Was sind Expires Header?

Mit Hilfe von Expires-Headern kannst du dem Webbrowser eines Besuchers mitteilen, ob er eine bestimmte Ressource aus dem lokalen Cache laden soll, wie wir es bereits besprochen haben, oder ob er eine neue Version von der Website herunterladen soll.

Genauer gesagt kann man festlegen, wie lange verschiedene Dateitypen im Cache gespeichert werden sollen, bevor der Browser sie als veraltet betrachtet und sie erneut vom Server herunterladen muss.

Ein Beispiel soll dies verdeutlichen:

Angenommen, du möchtest das Caching-Verhalten des Browsers für PNG-Bilddateien auf deiner Website steuern. Wenn du die Expires-Header für PNG-Dateien auf einen Monat festlegst, bedeutet dies, dass der Browser eines Besuchers die bereits heruntergeladene Version für einen Monat speichert:

Die bereits heruntergeladene Version für einen Monat ab dem ersten Zugriff/Download aus dem Cache lädt.
Diese Datei nach einem Monat als veraltet betrachtet und erneut vom Server herunterlädt.
Durch das Setzen unterschiedlicher Expires-Header für verschiedene Dateitypen kann das Browser-Caching auf der Website genau gesteuert werden.

Es gibt dafür verschiedene Wege:

• Wie man Expires Header mit .htaccess auf Apache Webserver hinzufügt
• Wie man Expires Header mit der config Datei auf dem Nginx Webserver hinzufügt
• Wie man Expires Header mit einem WordPress Plugin hinzufügt

Wie man Expires Header mit .htaccess auf Apache Webserver hinzufügt

Wenn dein Hosting-Anbieter den Apache-Webserver verwendet, kannst du die Expires-Header mithilfe der .htaccess-Datei im Root-Verzeichnis deines Servers hinzufügen. Dieses Verzeichnis entspricht dem Ort, an dem sich auch die Datei wp-config.php befindet.

Folgende Schritte sind erforderlich:

1. Verbinde dich über FTP mit deinem bevorzugten Client mit dem Server.
2. Suche die .htaccess-Datei im Root-Verzeichnis.
3. Lade eine Sicherungskopie der .htaccess-Datei auf deinen lokalen Computer herunter. Dadurch kannst du im Falle von Problemen die Sicherungskopie wieder hochladen, um eventuelle Schwierigkeiten zu beheben.
4. Füge den nachstehenden Codeausschnitt am Anfang der Datei ein.

Obwohl die Standardwerte für die meisten Seiten in Ordnung sein sollten, ist es möglich, die Zeiten für verschiedene Dateitypen im Codeschnipsel an die eigenen Bedürfnisse anzupassen.

Wie man Expires Header mit der config Datei auf dem Nginx Webserver hinzufügt

Wenn dein Hosting-Anbieter den Nginx-Webserver verwendet, kannst du die Expires-Header steuern, indem du die Konfigurationsdatei deines Servers bearbeitest. Die Vorgehensweise zur Bearbeitung dieser Datei hängt von deinem Hosting-Anbieter ab. Bei Bedarf kannst du dich an den Support deines Hosts wenden.

Hier ist der Code, den du verwenden müsstest:

Wie man Expires Header mit einem WordPress Plugin hinzufügt

Falls du dich nicht sicher fühlst, den Expires-Header-Code selbst einzufügen, gibt es auch einige WordPress-Plugins, die diese Aufgabe für dich erledigen können. Einige dieser Plugins fügen Expires-Header hinzu, während andere Cache-Control verwenden. In jedem Fall wird das Ergebnis sein, dass deine WordPress-Seite von Browser-Caching profitieren kann.

Hier sind einige weitere Caching-Plugins, die bei der Implementierung von Expires-Headern und/oder Browser-Caching helfen können:

• WP Super Cache
• W3 Total Cache
• WP Fastest Cache

Wie teste ich, ob Expires Header funktionieren?

Um zu überprüfen, ob deine Expires-Header richtig konfiguriert sind, kannst du das kostenlose Tool von GiftOfSpeed verwenden. Nachdem du die URL deiner Webseite eingegeben hast, zeigt dir das Tool zwei wichtige Informationen an:

Die Cache-Dauer für alle Dateien auf deiner Seite.
Den Cache-Typ (idealerweise sollte hier „Expires headers“ stehen, da dies die von dir verwendete Methode ist, je nach Konfiguration deiner Seite kann aber auch „Cache-Control“ angezeigt werden).
Alternativ kannst du deine Webseite durch ein Speedtest-Tool wie GTmetrix laufen lassen und überprüfen, ob die Meldung „Add Expires headers“ weiterhin angezeigt wird.