Add Expires headers

Wie füge ich Expires Header zur .htaccess-Datei hinzu?

Wird in GTmetrix oder Pingdom der Fehler „Add Expires headers“ (Verfallsdatum hinzufügen) angezeigt?

Was ist der Expires-Header?

Was sind die Schritte zum Hinzufügen von abgelaufenen Headern zu .htaccess ?

Wann ist der richtige Zeitpunkt für das Ablaufen von Dateien und Cache?

Verständlich erklärt, wie das Hinzufügen von Expires-Headern zur .htaccess-Datei erfolgt.

Einer der häufigsten Fehlermeldungen beim Test der Webseite auf Pingdom oder GTmetrix ist: Add Expires headers.

Die Fehlernachricht besagt, dass die Zeit für die Dateien (Bilder, HTML, CSS und JavaScript), die im Cache deiner Website verbleiben, erhöht werden soll. Das Zwischenspeichern hat einen direkten Einfluss auf die Ladezeit deiner Website. Die Website-Geschwindigkeit ist eine sehr wichtige SEO-Optimierung. Google bewertet die Geschwindigkeit der Website als bedeutenden Ranking Faktor. Websitebetreiber, die die Ladegeschwindigkeit ihrer Website nicht optimiert haben, werden in Zeiten von „Mobile First“ keine guten Platzierungen in den Suchergebnissen bei Google erreichen. Websites, die im Jahr 2019 nicht für Mobile Endgeräte optimiert sind und nicht über schnelle Ladezeiten verfügen, werden in den Suchmaschinen kaum noch an vorderen Platzierungen zu finden sein.

Wenn ein Benutzer deine Website im Netz aufruft, lädt der Browser automatisch eine Reihe an Dateien herunter. Jede dieser Dateien hat ein Ablaufdatum und verbleibt für eine bestimmte Zeit im Cache. Wenn der Benutzer beschließt, andere Seiten deines Webauftritts oder deine Website neu zu besuchen, müssen nicht alle Dateien erneut geladen werden. Wenn die Zeit für den Ablauf der Dateien zu kurz eingestellt ist, wird der Fehler „Add Expires Headers“ angezeigt.

Wie funktioniert Expires Header?

Abgelaufene Header geben dem Browser den Befehl, diese Dateien herunterzuladen und zu speichern. Der Grund dafür ist das Senden und Empfangen zwischen dem Computer und dem Server (also der Website) zu reduzieren und die im Cache gespeicherten Daten zu verwenden.

JoeWP WordPress Agentur - Add Expires headers - Pingdom
JoeWP WordPress Agentur – Add Expires headers – Pingdom

Dadurch dauert das Laden einer neu aufgerufenen Webseite etwas länger als beim wiederholten Aufruf. Je nach Webseite sind unterschiedliche Dateien wie HTML, CSS, JavaScripts, Grafiken, Bilder, PDF und andere Dateien vorhanden, die zur Funktionalität der Website gehören und die geladen werden müssen.

Jedes Mal, wenn ein neuer Benutzer deine Website aufruft, werden also alle diese Dateien vom Server angefordert. Jede Anfrage (für jede einzelne Datei) benötigt abhängig von der Grüße der Datei unterschiedliche Ladezeit. Wenn jedoch bestimmte Dateien im Speicher abgelegt werden, verringert sich die Anzahl der Anforderungen. Damit wird die Website schneller geladen.

# Wie lange sollen die Daten im Cache des Browsers verbleiben?

Um zu verhindern, dass Benutzer freigegebene Dateien erneut herunterladen, sollte ein Ablaufdatum für diese Dateien definiert werden. Das definierte Ablaufdatum teilt dem Browser mit, welche Datei vom Server und welche Datei vom Cache angefordert werden soll.

Welche Dateien werden im Cache gespeichert?

Zunächst ist zu ermitteln, welche Dateien häufig aktualisiert und welche selten aktualisiert werden.

Dateien, die selten aktualisiert werden:
Bilder
Videos
Audio
das Favicon
Webfonts, Schriften

Dateien, die häufiger aktualisiert werden:
Javascript und CSS
Text

Wie füge ich Expires Header zur .htaccess-Datei hinzu, um den Fehler „add expires headers“ zu vermeiden.

Füge Expires Header zur .htaccess-Datei hinzu:
Die Datei .htaccess ist oft eine versteckte Datei in deinem Root-Verzeichnis (Stammverzeichnis). Erstelle auf jeden Fall eine Sicherung dieser Datei, bevor du etwas änderst. Falls etwas schief läuft, kannst du so die gesicherte Datei wieder einspielen.

1. Lade deine .htaccess-Datei herunter. Falls die Datei ausgeblendet ist, aktiviere in deinem FTP die Option „Ausgeblendete Dateien anzeigen“.

2. Öffne deine .htaccess-Datei in einem Editor (Editor oder Editor ++) und füge deinen Code mit den Ablaufdaten hinzu. Das kann individuell nach deinen Erfordernissen festgelegt werden.

Wir benutzen z.B. den folgenden Code, du kannst ihn gerne kopieren und angepassst für deine .htaccess verwenden:

# Expires headers (for better cache control)
<ifmodule mod_expires.c>
        ExpiresActive on
        # Perhaps better to whitelist expires rules? Perhaps.
        ExpiresDefault                              "access plus 1 month"
        # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
        ExpiresByType text/cache-manifest           "access plus 0 seconds"
        # Your document html
        ExpiresByType text/html                     "access plus 0 seconds"
        # Data
        ExpiresByType text/xml                      "access plus 0 seconds"
        ExpiresByType application/xml               "access plus 0 seconds"
        ExpiresByType application/json              "access plus 0 seconds"
        # Feed
        ExpiresByType application/rss+xml           "access plus 1 hour"
        ExpiresByType application/atom+xml          "access plus 1 hour"
        # Favicon (cannot be renamed)
        ExpiresByType image/x-icon                  "access plus 1 week"
        # Media: images, video, audio
        ExpiresByType image/gif                     "access plus 4 months"
        ExpiresByType image/png                     "access plus 4 months"
        ExpiresByType image/jpeg                    "access plus 4 months"
        ExpiresByType image/webp                    "access plus 4 months"
        ExpiresByType video/ogg                     "access plus 1 month"
        ExpiresByType audio/ogg                     "access plus 1 month"
        ExpiresByType video/mp4                     "access plus 1 month"
        ExpiresByType video/webm                    "access plus 1 month"
        # HTC files  (css3pie)
        ExpiresByType text/x-component              "access plus 1 month"
        # Webfonts
        ExpiresByType font/ttf                      "access plus 4 months"
        ExpiresByType font/otf                      "access plus 4 months"
        ExpiresByType font/woff                     "access plus 4 months"
        ExpiresByType font/woff2                    "access plus 4 months"
        ExpiresByType image/svg+xml                 "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
        # CSS and JavaScript
        ExpiresByType text/css                      "access plus 1 year"
        ExpiresByType application/javascript        "access plus 1 year"
</ifmodule>
## EXPIRES END

Kurz eine Erläuterung dazu:

Die Abfrage <IfModule mod_expires.c> prüft, ob das notwendige Servermodul installiert ist.

ExpiresActive On schaltet das Modul für deine Webseite ein, danach folgen die Angaben, welche Dateitypen gecached werden sollen und für welchen Zeitraum. Die Zeitangabe erfolgt dabei in der Form „ab letztem Zugriff für Zeitraum X“, im Beispiel „access plus 1 weeks“ also „ab Zugriff für eine Woche“. Ist der gesetzte Zeitraum abgelaufen, wird die Datei im Browser-Cache durch die aktuelle Version von Ihrer Webseite ersetzt.

Achte darauf, dass die Zeitangabe immer in der Mehrzahl definiert wird, also ein „s“ am Ende steht (weeks, months, …). Welche Werte als Zeitangabe möglich sind, kannst du der offiziellen Dokumentation des Apache Webservers entnehmen: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

3. Nachdem du die Änderungen an der .htaccess-Datei vorgenommen hast, nicht vergessen, diese zu speichern und wieder in das Stammverzeichnis deiner Website hochzuladen, sofern du keine direkte Änderung auf dem Server vorgenommen hast.

Wie lange soll die Ablaufzeit von Dateien eingestellt werden?

Die Dauer des Caches kann in Jahren, Monaten, Wochen, Tagen, Stunden und sogar Sekunden festgelegt werden.

Das Ablaufdatum jeder Datei sollte auf der Grundlage der Zeit festgelegt werden, in der sie verwendet / angefordert wird.

Das Verfallsdatum von Bildern kann etwa auf ein Jahr eingestellt werden, da sie meist nicht geändert werden und das Laden von Bildern die meiste Zeit in Anspruch nimmt.

HTML, CSS und JavaScript werden eher regelmäßig aktualisiert. Das Ablaufdatum kann auf einen Monat oder kürzer festgelegt werden.

JoeWP WordPress Agentur - Anfrage

Du willst deen Fehler in Pingdom oder GTmetrix: „Add Expires headers“ von uns beheben lassen?

Du willst jetzt gleich loslegen? Bespreche Dein Projekt mit uns!