Expires-Header zur .htaccess hinzufügen

Expires Headers optimieren die Ladezeit Deiner Webseite. Sie geben dem Browser Anweisungen, ob er eine bereits im Cache gespeicherte Version einer Seite oder ihrer Komponenten verwenden oder neue Versionen der Dateien herunterladen soll. In diesem Beitrag zeigen wir Dir, wie Du Expires Headers zu Deiner .htaccess-Datei hinzufügst und was jede Zeile in dieser Datei bewirkt.

Ziel von Expires Headers

Das Hauptziel von Expires Headers ist es, die Anzahl der Downloads einer Datei von einem Server zu reduzieren und dem Browser zu ermöglichen, eine bereits auf Deinem Computer gespeicherte Version einer Datei zu verwenden. Dies reduziert die Anzahl der HTTP-Anfragen an den Server, wenn jemand auf Deine Website zurückkehrt, da Du die zuvor heruntergeladene Version derselben Datei wiederverwenden kannst.

Wie funktionieren Expires Headers?

Das Speichern der Dateien im Cache Deines Computers bedeutet, dass bei zukünftigen Besuchen dieser Seite der Browser die Datei nicht erneut herunterladen muss. Beachte aber, dass Expires Headers die Seitengeschwindigkeit bei einem ersten Besuch nicht verbessern, schließlich musst Du die Dateien mindestens einmal heruntergeladen haben, um sie erneut zu referenzieren.

Wie fügst Du Expires Headers zu Deiner .htaccess-Datei hinzu?

Zunächst musst Du entscheiden, welche Dateien Du häufig aktualisierst und welche Dateitypen nicht oft aktualisiert werden. Hier ist eine gängige Liste von Dateitypen, die Du einbeziehen solltest:

• Bilder: jpg, jpeg, gif, png, svg, webp
• favicon/ico
• Javascript
• CSS
• HTML
• PDF

Nachdem Du Dich für die Dateitypen entschieden hast, musst Du überlegen, wie oft Du jeden einzelnen änderst. Bilder werden beispielsweise in der Regel nicht oft geändert, während CSS häufiger geändert wird.

Expires Headers werden in der .htaccess-Datei definiert. Dies ist eine versteckte Datei, die sich oft im Hauptverzeichnis Deiner Website befindet (über FTP).

Öffne nun Deine .htaccess-Datei in einem Texteditor und füge den folgenden Code hinzu:

# Expires headers
<IfModule mod_expires.c>
ExpiresActive on
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 4 months"
ExpiresByType audio/ogg "access plus 4 months"
ExpiresByType video/mp4 "access plus 4 months"
ExpiresByType video/webm "access plus 4 months"
# 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>

Erklärung des Codes:

• <IfModule mod_expires.c>: Dieser Code überprüft, ob das Modul mod_expires auf Deinem Server aktiviert ist.
• ExpiresActive on: Dies aktiviert die Expires Headers.
• ExpiresDefault "access plus 1 month": Dies setzt die Standardablaufzeit für alle Dateitypen, die nicht spezifisch definiert sind, auf einen Monat.
• ExpiresByType: Mit diesem Befehl kannst Du spezifische Ablaufzeiten für bestimmte Dateitypen festlegen. Zum Beispiel legt ExpiresByType image/gif "access plus 4 months" fest, dass GIF-Bilder vier Monate im Cache gespeichert werden sollen.

Zeiträume für Expires Headers und ihre Auswirkungen

Unsere Best Practices:

1. Bilder und Videos: Da diese Dateien selten geändert werden, ist es sinnvoll, sie für einen längeren Zeitraum, z.B. ein Jahr, im Cache zu behalten.
2. CSS und JavaScript: Diese Dateien werden häufiger aktualisiert. Ein Monat ist ein guter Kompromiss, um sicherzustellen, dass die Benutzer nicht ständig veraltete Dateien verwenden.
3. HTML-Dateien: Da der Inhalt einer Webseite häufig aktualisiert wird, ist es sinnvoll, diese Dateien nur für kurze Zeiträume, z.B. 10 Minuten bis 1 Stunde, im Cache zu behalten.