Je schneller eine Webseite geladen ist, desto besser. Für eine höhere Geschwindigkeit ist das Browser-Caching ein sinnvolles und geeignetes Mittel. Dabei speichert der Browser statische oder nur selten modifizierte Ressourcen wie Grafiken und CSS-Dateien für einen konfigurierten Zeitraum im lokalen Speicher zwischen. Bei einem erneuten Besuch reduziert sich die Anzahl der notwendigen Serveranfragen drastisch und die Seite lädt wesentlich schneller. Die hohe Geschwindigkeit erhöht den Komfort für die Besucher, Suchmaschinen belohnen die Performance-Steigerung mit einem besseren Ranking.
Welche Dateitypen können zwischengespeichert werden?
Damit das Browser-Caching richtig funktioniert, muss der Browser wissen, wie lange die verschiedenen Dateitypen zwischengespeichert werden sollen. Zu diesen Ressourcen zählen neben den Bildformaten wie .gif, .jpg und .png auch JavaScript- und CSS-Dateien sowie weitere binäre Objektdaten wie PDFs und Mediendateien. Für die verschiedenen Dateitypen legen Sie individuelle Ablaufdaten fest.
Lebenszeit & Validierung
Für die Aktivierung müssen bestimmte Header-Typen an den Browser gesendet werden, der Erste regelt das Ablaufdatum, der andere bezieht sich auf die Validierung:
- Expires- und Cache-Control-Header legt die Gültigkeitsdauer fest.
- Last-Modified- und E-Tag-Header dienen der Ressourcen-Validierung.
Empfehlung zur Caching-Dauer
Die Lebensdauer sämtlicher Caching-Ressourcen sollte laut Google mindestens eine Woche betragen. Für Widgets oder Werbeanzeigen von Drittanbietern sollten Sie die Cache-Lebensdauer für mindestens einen Tag eintragen. Es gilt die Empfehlung:
Für Expires mindestens eine Woche festlegen, gegebenenfalls bis zu einem Jahr. Verwenden Sie Expires statt Cache-Control: max-age, da es besser unterstützt wird. Ein längerer Zeitraum als ein Jahr verstößt gegen die RTC-Richtlinien und ist nicht erlaubt.
Die Bedeutung von Last-Modified und E-Tag
Wie soll der Browser die Verfügbarkeit einer neuen Version prüfen? Beim Last-Modified-Header wird dazu das Datum zum Vergleich herangezogen. Beim E-Tag-Header kann ein beliebiger anderer Wert zur eindeutigen Identifizierung der Ressourcen genutzt werden. Häufig werden Dateiversionen oder Inhalts-Hashes verglichen. Die Verwendung ermöglicht dem Browser das effiziente Aktualisieren sämtlicher zwischengespeicherter Ressourcen.
Browser-Caching in der .htaccess-Datei aktivieren
Ist Ihre Website auf einem Apache-Server installiert und das Modul mod_expires aktiviert, aktivieren Sie das Browser-Caching mit folgendem Codeblock in der .htaccess-Datei:
Tipp: Speichern Sie die .htaccess-Datei zur Sicherheit lokal ab. Falls etwas schief geht, haben Sie ein Backup zur Hand. Der Grund: Bei Fehlern in der Datei kann die Website nicht mehr erreichbar sein.
Öffnen Sie die .htaccess-Datei und fügen Sie den folgenden Codeblock unter dem bereits vorhandenen Code hinzu. Prüfen Sie gegebenenfalls, ob bereits ein Codeblock mit mod_expires.c vorhanden ist.
<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/html "access plus 500 seconds" ExpiresByType image/gif "access plus 14 days" ExpiresByType image/ico "access plus 14 days" ExpiresByType image/jpeg "access plus 14 days" ExpiresByType image/jpg "access plus 14 days" ExpiresByType image/png "access plus 14 days" ExpiresByType text/css "access plus 14 days" ExpiresByType text/javascript "access plus 14 days" ExpiresByType application/x-javascript "access plus 14 days" ExpiresByType application/javascript "access plus 14 days" </IfModule>
Prüfen der Aktivierung mit Google Insights
Ob die Aktivierung erfolgreich ist, lässt sich leicht mithilfe von Google PageSpeed Insights prüfen. Die Punktebewertung sollte direkt ansteigen. Hier sehen Sie auch auf einen Blick, für welche Cache-fähigen Ressourcen noch ein Ablaufdatum angegeben werden sollte.
Google PageSpeed Insights hilft bei der Optimierung der Website
Google PageSpeed Insights liefert Ihnen zusätzlich weitere Tipps zur Optimierung Ihrer Website. Vergleichen Sie die Informationen zur Desktop- und Mobilversion. Das Programm prüft auch Eigenschaften wie die Schriftgröße, die ebenso zu einer besseren Nutzererfahrung beitragen.
Aktivieren Sie jetzt das Browser-Caching und testen Sie die Website anschließend auf Fehler. Die höhere Seitenladegeschwindigkeit macht die Bedienung für die Besucher komfortabler und führt langfristig zu einer besseren Bewertung durch die großen Suchmaschinen.
Sie haben Fragen oder Anregungen zum Thema Website schneller laden mit Browser-Caching? Schicken Sie uns einen Kommentar. Wir sind gespannt auf Ihr Feedback.
Bildnachweis: Fotolia, Lizenz: Host Europe
- Website erstellen? Wie geht das und was braucht man dafür? - 8. September 2023
- 10 Tipps, wie Sie mit Content Marketing Ihr Business voran bringen - 17. August 2023
- Favicon in Website einbinden: So erscheint Ihr Logo in der Browser-Adresszeile - 29. Juni 2023
