Hast du gerade deine WordPress-Seite durch ein Speedtest-Tool laufen lassen, nur um zu erfahren, dass du „Expires-Header“ zu deiner WordPress-Seite hinzufügen musst?
Expires-Header helfen dir, das Browser-Caching zu nutzen, um die Ladezeiten deiner Seite zu beschleunigen. Darüber hinaus sind sie auch Teil der YSlow Performance-Empfehlungen, was bedeutet, dass sie deinen Performance-„Score“ in Tools wie GTmetrix beeinflussen werden.
In diesem Beitrag erklären wir dir, was Expires-Header sind und wie sie deine Seite beeinflussen. Dann werden wir dir Schritt für Schritt zeigen, wie du in WordPress Header mit verschiedenen Methoden einfügen kannst.
Aber zuerst müssen wir einen kurzen Abstecher zu einem anderen Thema machen – dem Browser-Caching.
Was ist Browser Caching?
Bevor wir über expires-Header sprechen können, müssen wir dich zunächst in das Konzept des Browser-Cachings einführen. Das ist wichtig, weil expires-Header dir helfen, Browser-Caching zu kontrollieren und zu implementieren – wenn du also Browser-Caching nicht verstehst, kannst du expires-Header nicht verstehen.
Kurz gesagt, Browser-Caching ermöglicht es deiner Seite, dem Browser des Besuchers mitzuteilen, dass er bestimmte Dateien auf dem lokalen Computer des Besuchers speichern und diese lokalen Dateien bei späteren Besuchen laden soll, anstatt sie bei jedem Seitenaufruf von deinem Server herunterzuladen.
Dadurch, dass du die Datei nicht jedes Mal herunterladen musst, kannst du die Ladezeiten deiner Seite beschleunigen und die Bandbreitennutzung reduzieren.
Schauen wir uns ein Beispiel an – das Logobild deiner Seite. Dein Logo ist auf jeder Seite das selbe, also macht es keinen Sinn, die Browser der Besucher zu zwingen, die gleiche Logodatei bei jedem Laden der Seite neu herunterzuladen. Mit dem Browser-Caching könntest du die Logodatei stattdessen auf den lokalen Computern der Besucher speichern. Ein Besucher müsste dann beim ersten Besuch immer noch dein Logo herunterladen. Aber für die folgenden Seitenaufrufe würde die Datei aus dem lokalen Browser-Cache geladen werden.
Was sind Expires Header?
Mit Expires-Headern kannst du dem Webbrowser eines Besuchers mitteilen, ob er eine bestimmte Ressource aus dem lokalen Browser-Cache laden soll (wie wir oben besprochen haben) oder ob er eine neue Version vom Webserver herunterladen muss.
Genauer gesagt, kannst du eine Dauer für die gecachte Version verschiedener Dateitypen festlegen, bevor die Datei „abläuft“ und der Browser sie erneut vom Server herunterladen muss.
Schauen wir uns ein Beispiel an…
Nehmen wir an, du möchtest das Browser-Caching-Verhalten für PNG-Bilddateien auf deiner Seite steuern. Wenn du die Expires-Header für PNG-Dateien auf einen Monat setzt, bedeutet dies, dass der Browser eines Besuchers:
- Die bereits heruntergeladene Version für einen Monat nach dem ersten Zugriff/Download aus dem Cache laden.
- Diese Datei nach einem Monat erneut vom Server herunterladen.
Du kannst unterschiedliche Expires-Header für verschiedene Dateitypen setzen, was dir eine granulare Kontrolle über das Browser-Caching deiner Seite gibt.
Expires Headers vs cache-control
Während die Verwendung von Expires-Headern eine Möglichkeit ist, das Browser-Caching in WordPress zu kontrollieren, ist es nicht die einzige Möglichkeit. Es gibt auch eine andere Technik, die cache-control genannt wird.
Cache-control ist eine modernere Technik und bietet ein wenig mehr Flexibilität, um das Caching-Verhalten zu kontrollieren. Aus diesem Grund verwenden heute viele Seiten cache-control – auch wir hier bei Kinsta mit unserer eigenen Nginx-Konfiguration.
Die Expires-Header bieten jedoch immer noch alles, was die meisten Seiten haben müssen, so dass sie eine gute Option für das Browser-Caching sind. Du kannst auch beides verwenden, obwohl deine cache-control Header in den meisten Fällen Vorrang haben werden. Wenn du beide verwendest, solltest du sicherstellen, dass du in beiden die selben Zeitwerte einstellst.
Wenn du mehr darüber erfahren möchtest, wie du Cache-Control in WordPress implementieren kannst, dann schau dir unsere Anleitung an, wie du Browser-Caching in WordPress nutzen kannst.
Wie man „Expires Header hinzufügen“ in WordPress repariert
Jetzt kommen wir zum eigentlichen How-to-Teil und zeigen dir, wie du Expire-Header in WordPress einrichten kannst.
Aber zuerst – wir haben gute Nachrichten. Wenn du bei Kinsta hostest, musst du dir keine Gedanken über die Einrichtung von Expires-Headern machen, da wir das automatisch für dich tun. Wir konfigurieren sowohl unsere Server als auch unser integriertes Content Delivery Network (CDN) so, dass sie das Browser-Caching nutzen, sodass du nichts tun musst.
Wenn du anderswo hostest, kannst du expires-Header für deine WordPress-Seite hinzufügen. Dies kannst du entweder mit einem eigenen Codeschnipsel auf Serverebene (Nginx oder Apache) oder über einige benutzerfreundliche WordPress-Plugins tun.
Wie man Expires Header mit .htaccess auf Apache Webserver hinzufügt
Wenn dein Host den Apache Webserver, verwendet, kannst du Expires Header mit der .htaccess Datei hinzufügen, die sich im Root-Ordner deines Servers befindet (derselbe Ordner, in dem auch die wp-config.php Datei liegt).
Das musst du tun:
- Verbinde dich mit deinem bevorzugten Client per FTP mit deinem Server.
- Suche die .htaccess Datei im Root-Ordner
- Lade eine Sicherungskopie der .htaccess-Datei auf deinen lokalen Computer herunter. Auf diese Weise kannst du, falls etwas schief geht, deine Sicherungskopie wieder hochladen, um mögliche Probleme zu beheben.
- Füge den untenstehenden Codeschnipsel am Anfang der Datei ein
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Während die Standardwerte für die meisten Seiten gut funktionieren sollten, kannst du die Zeiträume für verschiedene Dateitypen im Codeschnipsel nach deinen Bedürfnissen anpassen.
Wie man Expires Header mit der config Datei auf dem Nginx Webserver hinzufügt
Wenn dein Host den Nginx Webserver verwendet, kannst du Expires Header kontrollieren, indem du die Konfigurationsdatei deines Servers bearbeitest. Wie du diese Datei bearbeitest, hängt von deinem Host ab – du kannst dich an den Support deines Hosts wenden, wenn du Hilfe brauchst.
Kinsta nutzt den Nginx-Webserver – aber bedenke, dass wir die Dinge bereits für dich konfigurieren, du musst also keinen eigenen Code hinzufügen.
Hier ist der Code, den du verwenden musst:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Du kannst die Verfallszeiten für verschiedene Dateitypen nach Bedarf anpassen.
Wie man Expires Header mit einem WordPress Plugin hinzufügt
Wenn du dich nicht wohl dabei fühlst, den Expires-Header-Code selbst hinzuzufügen, kannst du auch einige WordPress-Plugins finden, die diese Aufgabe für dich übernehmen können. Einige dieser Plugins fügen expires Header hinzu, während andere cache-control verwenden. So oder so, das Endergebnis ist, dass deine WordPress-Seite vom Browser-Caching profitieren kann.
Eine Lösung ist die Verwendung eines Caching-Plugins, wenn dein Host nicht bereits Caching für dich implementiert hat. Eine großartige Option ist hier WP Rocket, das vollständig mit Kinsta kompatibel ist. Sobald du das WP Rocket Plugin aktivierst, aktiviert es automatisch das Browser-Caching für dich – es müssen keine weiteren Einstellungen vorgenommen werden.
Hier sind einige andere Caching-Plugins, die dir helfen können, expires Header und/oder Browser-Caching zu implementieren:
Wenn du das Caching bereits sortiert hast und nur ein gezielteres Plugin möchtest, sind zwei gute kostenlose Plugins:
Das Leverage Browser Caching Plugin hat keine Einstellungen – du aktivierst es einfach und es beginnt sofort zu arbeiten.
Mit dem Add Expires Headers Plugin kannst du die Expires Header für verschiedene Dateitypen steuern – du kannst diese Auswahl im neuen Add Expires Headers Bereich in deinem WordPress Dashboard treffen:
Wie teste ich, ob Expires Header funktionieren?
Um zu testen, ob deine Expires-Header richtig konfiguriert sind, kannst du dieses kostenlose Tool von GiftOfSpeed verwenden. Sobald du die URL deiner Seite eingegeben hast, wird dir das Tool zwei Dinge mitteilen:
- Die Cache-Dauer für alle Dateien auf deiner Seite.
- Der Cache-Typ (es sollte „Expires headers“ stehen, da dies die Methode ist, die du verwendet hast, aber du kannst auch „cache-control“ sehen, abhängig von der Konfiguration deiner Seite).
Du kannst deine Seite auch durch ein Speedtest-Tool laufen lassen (z.B. GTmetrix) und überprüfen, ob du immer noch die Meldung „Add Expires headers“ siehst.
Wie man Expires Header mit dem Terminal testet
Wenn du es vorziehst, Expires-Header mit einer technischeren Option zu testen, kannst du einen Curl-Request in Terminal zu einem statischen Asset auf deiner Seite machen und die HTTP-Header direkt untersuchen. Wenn deine Expires- oder Cache-Control-Regel zum Beispiel CSS-Dateien abdeckt, kannst du eine Curl-Anfrage wie die folgende stellen.
curl -I https://kinstalife.com/wp-includes/css/dist/block-library/style.min.cssIn unserem Fall bietet die curl Anfrage an die style.min.css Datei die folgende Antwort.
HTTP/2 200
server: nginx
date: Wed, 27 Jan 2021 01:11:05 GMT
content-type: text/css; charset=UTF-8
content-length: 51433
last-modified: Tue, 12 Jan 2021 20:17:48 GMT
vary: Accept-Encoding
etag: "5ffe03ec-c8e9"
expires: Thu, 31 Dec 2037 23:55:55 GMT
cache-control: max-age=315360000
access-control-allow-origin: *
accept-ranges: bytes
x-edge-location-klb: HaIXowU1oNczJ391oDE9zVvZ7279840b5d30a89472f57253756b3e63Wie du sehen kannst, enthält die Antwort einen expires und cache-control Header. Der cache-control Header zeigt ein max-age von 315360000 Sekunden an, was eine Verfallszeit von einem Jahr bedeutet.
Wie man Expires Header für externe Skripte hinzufügt
Die Methoden, die wir dir oben gezeigt haben, ermöglichen es dir, die Header für alle Dateien auf dem Server deiner WordPress-Seite zu kontrollieren. Mit diesen Methoden kannst du jedoch nicht die Header für die Skripte von Drittanbietern kontrollieren, die du möglicherweise lädst, wie z.B. Google Fonts, Google Analytics, etc.
Aus diesem Grund kann es sein, dass einige Speedtest-Tools dies als potenzielles Problem anzeigen, auch wenn du die Expires-Header bereits mit den oben genannten Methoden implementiert hast.
Hier sind einige Lösungen für gängige Skripte von Drittanbietern…
Wie man Expires Header zu Google Fonts hinzufügt
Viele WordPress-Seiten setzen auf Google Fonts für eigene Schriften. Das bedeutet, dass du keine Expires-Header in der Serverkonfiguration setzen kannst.
Eine einfache Lösung ist es, die Schriftdateien lokal zu hosten, anstatt sich auf Googles CDN zu verlassen. Um dies einzurichten, kannst du das kostenlose Plugin Optimize My Google Fonts (OMGF) auf WordPress.org verwenden.
Du kannst auch unsere vollständige Anleitung zum lokalen Hosten von Schriftarten in WordPress lesen, um mehr über die Vor- und Nachteile dieses Ansatzes zu erfahren.
Wie man Expires Header zu Google Analytics hinzufügt
Wenn du Probleme mit dem Browser-Caching und Google Analytics hast, kannst du auch in Erwägung ziehen, das Google Analytics Skript lokal zu hosten, so wie wir es dir mit Google Fonts gezeigt haben.
Hier sind einige WordPress-Plugins, mit denen du dies leicht erreichen kannst:
- CAOS (Complete Analytics Optimization Suite)
- Perfmatters
- WP Rocket mit seinem integrierten Google Tracking Add-on.
Zusammenfassung
Zusammenfassend lässt sich sagen, dass Expires-Header dir helfen, das Browser-Caching-Verhalten für verschiedene Dateitypen auf deiner WordPress-Seite zu steuern.
Heutzutage verlassen sich viele Seiten auf cache-control Header anstelle von Expires Headern, weil cache-control eine modernere Option ist, die mehr Flexibilität bietet. Allerdings funktionieren Expires-Header für die meisten Seiten immer noch gut und du kannst auch sowohl Expires-Header als auch cache-control gleichzeitig verwenden.
Außerdem reduzieren einige Speedtest-Tools die Punktzahl deiner Seite, wenn du keine expires-Header einsetzt, was vielleicht deine Hauptmotivation für die Einrichtung dieser Taktik ist.
Wenn du deine WordPress-Seite bei Kinsta hostest, musst du dir keine Gedanken über Expires-Header machen, da wir alles für dich erledigen. Wenn deine Seite jedoch woanders gehostet wird, kannst du Expires-Header in WordPress hinzufügen, indem du die von uns angebotenen Code-Snippets oder eines der von uns vorgestellten Plugins verwendest.
