Wie man Expires-Header in WordPress hinzufügt (2 Methoden)

Einer der häufigsten Fehler, die wir bei WordPress-Website-Besitzern sehen, ist die Übersehen des Browser-Cachings. Ihre Website verliert möglicherweise Besucher aufgrund langsamer Seitenladezeiten. Selbst nach der Optimierung von Bildern und dem Upgrade des Hostings kann sich Ihre Website immer noch träge anfühlen, bis Sie Expires-Header hinzufügen.

Expires-Header teilen den Browsern der Besucher mit, dass sie die Dateien Ihrer Website, wie Bilder, CSS und JavaScript, für einen bestimmten Zeitraum speichern sollen. Das bedeutet, dass der Browser nicht alles erneut herunterladen muss, wenn jemand mehrere Seiten Ihrer Website besucht.

Das Ergebnis sind deutlich schnellere Ladezeiten für wiederkehrende Besucher, was die Benutzererfahrung verbessert und Ihre Suchrankings steigern kann.

Wir haben Expires-Header auf vielen WordPress-Seiten implementiert und den Prozess auf zwei zuverlässige Methoden reduziert, die auf jedem Hosting-Setup funktionieren. Egal, ob Sie sich mit der Bearbeitung von Code wohlfühlen oder eine Plugin-Lösung bevorzugen, wir zeigen Ihnen, wie Sie Expires-Header zu Ihrer WordPress-Seite hinzufügen.

Wie werden Expires-Header in WordPress verwendet?

Wenn jemand zum ersten Mal eine Webseite auf Ihrer WordPress-Website besucht, werden alle Dateien nacheinander geladen. All diese HTTP-Anfragen zwischen dem Browser und Ihrem WordPress-Hosting-Server erhöhen die Ladezeit der Webseite.

Browser-Caching speichert einige oder alle dieser Dateien auf dem Computer des Besuchers. Das bedeutet, dass die Dateien beim nächsten Besuch der Seite vom eigenen Computer geladen werden können, was die Leistung Ihrer WordPress-Website verbessert und die Benutzererfahrung optimiert.

Nun fragen Sie sich vielleicht, wie die Browser wissen, welche Dateien sie speichern und wie lange sie sie aufbewahren sollen. Hier kommen die 'Expires-Header' ins Spiel.

Die Regeln, welche Dateien gespeichert und wie lange sie gespeichert werden sollen, werden entweder mit Expires-Headern oder Cache-Control-Headern festgelegt. In diesem Artikel konzentrieren wir uns auf Expires-Header, da sie für die meisten Benutzer einfacher einzurichten sind.

Expires-Header legen ein Ablaufdatum für jeden Dateityp fest, der im Browser-Cache gespeichert ist. Nach diesem Datum werden die Dateien von Ihrem Server neu geladen, um Besuchern die aktuellste Version der Seite anzuzeigen.

Wir zeigen Ihnen, wie Sie Expires-Header mit zwei verschiedenen Methoden hinzufügen. Die erste Methode ist einfacher und wird für die meisten Benutzer empfohlen. Sie können auf die Links unten klicken, um zu Ihrem bevorzugten Abschnitt zu springen:

1. Ablauf-Header mit dem WP Rocket WordPress-Plugin hinzufügen
2. Expires-Header in WordPress mit Code hinzufügen
3. Häufig gestellte Fragen zu Expires-Headern in WordPress
4. Video-Tutorial

Methode 1: Expires-Header mit dem WP Rocket WordPress-Plugin hinzufügen

WP Rocket ist das anfängerfreundlichste WordPress-Performance-Plugin auf dem Markt. Sobald es aktiviert ist, verbessert es sofort die Geschwindigkeit Ihrer Website, ohne dass Sie sich mit komplizierten Konfigurationseinstellungen herumschlagen müssen, wie bei vielen anderen Caching-Plugins.

WP Rocket ist ein Premium-Plugin, aber das Beste daran ist, dass alle Funktionen in ihrem niedrigsten Plan enthalten sind.

Das Erste, was Sie tun müssen, ist, das WP Rocket-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Installation und Aktivierung schaltet WP Rocket automatisch das Browser-Caching ein. Standardmäßig fügt es Ablauf-Header und Cache-Control-Header mit den besten Einstellungen hinzu, um Ihre WordPress-Website zu beschleunigen.

Das ist alles, was Sie tun müssen. Wenn Sie mehr über das Plugin erfahren möchten, lesen Sie unseren Leitfaden zur richtigen Installation und Einrichtung von WP Rocket in WordPress.

Wenn Sie lieber ein kostenloses Caching-Plugin verwenden möchten, um Ablauf-Header zu Ihrer Website hinzuzufügen, dann empfehlen wir Ihnen, sich W3 Total Cache anzusehen.

W3 Total Cache bietet einige der gleichen Funktionen wie WP Rocket, ist aber nicht so anfängerfreundlich. Es bietet auch nicht alle Funktionen, die Sie in einem All-in-One-Performance-Plugin wie WP Rocket erhalten. Sie müssen die Ablauf-Header manuell aktivieren, da sie nicht automatisch aktiviert werden.

Methode 2: Hinzufügen von Expires-Headern in WordPress mit Code

Die zweite Methode zum Hinzufügen von Expires-Headern in WordPress beinhaltet das Hinzufügen eines Code-Snippets zu Ihren WordPress-Dateien. Wir empfehlen dies nicht für Anfänger, da ein Fehler im Code ernsthafte Fehler verursachen und Ihre Website beschädigen könnte.

Bevor Sie diese Änderungen vornehmen, empfehlen wir Ihnen, zuerst ein Backup Ihrer WordPress-Website zu erstellen. Weitere Details finden Sie in unserem Leitfaden zur Sicherung und Wiederherstellung Ihrer WordPress-Website.

Damit wollen wir uns ansehen, wie Sie Expires-Header hinzufügen, indem Sie Code zu WordPress hinzufügen.

Ermitteln Sie, ob Ihre Website Apache oder Nginx verwendet

Zuerst müssen Sie herausfinden, ob Ihre Website Apache- oder Nginx-Server verwendet. Sie müssen zu Ihrer Website navigieren, mit der rechten Maustaste auf die Seite klicken und dann die Option 'Untersuchen' auswählen.

Als Nächstes müssen Sie oben auf der Seite auf die Registerkarte „Netzwerk“ klicken.

Möglicherweise müssen Sie die Seite aktualisieren, damit die Ergebnisse geladen werden.

Danach können Sie oben in der Spalte „Name“ auf Ihren Domainnamen klicken.

Dann sollten Sie zum Abschnitt 'Response Headers' scrollen und nach einem Eintrag namens 'server' suchen.

Dies zeigt Ihnen, welcher Webserver verwendet wird. In diesem Fall läuft die Website auf einem Nginx-Server.

Jetzt, da Sie wissen, welchen Webserver Ihre Website verwendet, verwenden Sie die folgenden Links, um vorwärts zu springen:

• So fügen Sie Expires-Header in Apache hinzu
• Wie man Ablauf-Header in Nginx hinzufügt

So fügen Sie Expires-Header in Apache hinzu

Um Expires-Header zu einem Apache-Server hinzuzufügen, müssen Sie Code zu Ihrer .htaccess-Datei hinzufügen.

Um diese Datei zu bearbeiten, müssen Sie sich mit Ihrem WordPress-Hosting-Konto mit einem FTP-Client oder dem Dateimanager-Tool Ihres Hosts verbinden. Sie finden Ihre .htaccess-Datei im Stammordner Ihrer Website.

Als Nächstes müssen Sie Expires-Header hinzufügen, um das Browser-Caching zu aktivieren. Dies teilt dem Webbrowser mit, wie lange er Ihre Website-Ressourcen speichern soll, bevor sie gelöscht werden.

Sie können den folgenden Code am Anfang Ihrer .htaccess-Datei einfügen:

## 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 3 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Diese Werte sollten für die meisten Websites gut funktionieren, aber Sie können die Zeiträume anpassen, wenn Ihre Bedürfnisse anders sind.

Beachten Sie, dass der Code unterschiedliche Cache-Ablaufdaten basierend auf dem Dateityp festlegt. Bilder werden länger zwischengespeichert als HTML, CSS, Javascript und andere Dateitypen, da sie normalerweise gleich bleiben.

Wie man Ablauf-Header in Nginx hinzufügt

Wenn Sie einen Nginx-Server zum Hosten Ihres WordPress-Blogs verwenden, müssen Sie die Serverkonfigurationsdatei bearbeiten, um Expires-Header hinzuzufügen.

Wie Sie diese Datei bearbeiten und darauf zugreifen, hängt von Ihrem Hoster ab. Sie können sich also an Ihren Hosting-Anbieter wenden, wenn Sie Hilfe beim Zugriff auf die Datei benötigen.

Dann müssen Sie den folgenden Code hinzufügen:

location ~* \.(jpg|jpeg|gif|png|svg)$ {
  expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
  expires 3d;
}

Dieser Code legt die Ablaufzeiten für die verschiedenen Dateitypen fest. Beachten Sie erneut, dass Bilder länger zwischengespeichert werden als HTML, CSS, JS und andere Dateitypen, da Bilder normalerweise gleich bleiben.

Häufig gestellte Fragen zu Expires-Headern in WordPress

Nachfolgend finden Sie einige der häufigsten Fragen, die uns zur Implementierung von Expires-Headern auf WordPress-Websites gestellt werden. Diese sollten alle Bedenken ausräumen, die Sie möglicherweise bezüglich des Prozesses haben.

1. Was genau sind Expires-Header und warum brauche ich sie?

Expires-Header sind Anweisungen, die Webbrowsern mitteilen, wie lange sie die Dateien Ihrer Website lokal auf dem Computer eines Besuchers speichern (cachen) sollen. Wenn jemand Ihre Website besucht, werden Dateien wie Bilder, CSS und JavaScript heruntergeladen und temporär gespeichert. Mit Expires-Headern müssen wiederkehrende Besucher diese Dateien nicht erneut herunterladen, bis sie abgelaufen sind, was die Ladezeiten Ihrer Website beschleunigt.

2. Brechen das Hinzufügen von Expires-Headern meine WordPress-Website?

Wenn Expires-Header korrekt implementiert sind, werden sie Ihre Website nicht beeinträchtigen. Wenn Sie jedoch die manuelle Code-Methode verwenden und einen Fehler in Ihrer .htaccess-Datei machen, kann dies zu Problemen führen. Deshalb empfehlen wir immer, ein Backup Ihrer Website zu erstellen, bevor Sie Änderungen vornehmen, und ein Plugin wie WP Rocket für Anfänger zu verwenden, da es alles automatisch und ohne Risiko handhabt.

3. Wie lange sollte ich meine Ablauf-Header für verschiedene Dateitypen einstellen?

Wir empfehlen, längere Ablaufzeiten für Dateien festzulegen, die sich selten ändern, wie z. B. Bilder (1 Jahr), und kürzere Zeiten für Dateien, die häufiger aktualisiert werden, wie z. B. CSS und JavaScript (1 Monat). HTML-Dateien sollten die kürzesten Cache-Zeiten haben (einige Tage), da sich Ihre Inhalte regelmäßig ändern. Die Codebeispiele in unserem Artikel verwenden diese bewährten Zeitrahmen, die für die meisten WordPress-Sites gut funktionieren.

4. Kann ich Expires-Header mit jedem WordPress-Hosting-Anbieter verwenden?

Ja, Expires-Header funktionieren mit den meisten Hosting-Anbietern, aber die Implementierungsmethode hängt von Ihrem Servertyp ab. Die meisten Shared-Hosting-Anbieter verwenden Apache-Server, was bedeutet, dass Sie Code zu Ihrer .htaccess-Datei hinzufügen. Einige Hoster verwenden Nginx-Server, die eine Bearbeitung der Serverkonfigurationsdatei erfordern. Wenn Sie sich über Ihren Servertyp unsicher sind, zeigen wir Ihnen im Artikel, wie Sie dies überprüfen können, oder Sie können sich für Unterstützung an Ihren Hosting-Anbieter wenden.

5. Benötige ich Expires-Header, wenn ich bereits ein CDN verwende?

Während CDNs (Content Delivery Networks) dazu beitragen, Ihre Website zu beschleunigen, indem sie Dateien von Standorten ausliefern, die näher an Ihren Besuchern liegen, bieten Ablauf-Header dennoch zusätzliche Vorteile. Sie arbeiten mit CDNs zusammen, um Serveranfragen weiter zu reduzieren und die Ladezeiten zu verbessern.

Viele CDN-Dienste haben auch ihre eigenen Caching-Regeln, aber das Festlegen von Expires-Headern auf Ihrem Ursprungsserver stellt ein konsistentes Caching-Verhalten in allen Szenarien sicher.

6. Wie kann ich testen, ob meine Expires-Header ordnungsgemäß funktionieren?

Sie können Ihre Expires-Header mit Online-Tools wie GTmetrix, Google PageSpeed Insights oder Pingdom testen. Diese Tools analysieren Ihre Website und zeigen Ihnen, ob das Browser-Caching richtig konfiguriert ist. Sie können auch die Entwicklertools Ihres Browsers verwenden, um die Antwort-Header zu überprüfen und zu sehen, ob die Expires- oder Cache-Control-Header mit Ihren Dateien gesendet werden.

Video-Tutorial

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie Expires-Header in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zur einfachen Behebung der Warnung 'Browser-Caching nutzen' in WordPress oder unsere Expertenauswahl der besten WordPress CDN-Dienste sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.