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.

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

8 thoughts on “Schnellere Ladezeiten Ihrer Webseite mit Browser-Caching

  1. Google Page Speed war mir neu. Und ich muss sagen ich habe noch einiges an potential gefunden.
    Mal schauen ob Google mich jetzt in Zukunft besser rankt. Ich denke auch das Speed wichtig für die eigene Seite ist. Aber bisher war es mir einfach zu unwichtig…
    Vielen Dank für die Infos.

  2. Danke für den Tipp, für einen Hoster sehr ungewöhnlich. Browser Caching war mir schon bekannt. Neu für mich ist das Cachen von HTML: ExpiresByType text/html „access plus 500 seconds“ werde dies mal versuchen.
    Auch ein herzliches Danke!

  3. Schöne Anleitung, nur funktioniert es bei uns auf dem V-Server nicht…
    Wir haben verschiedene Versionen in der htacces probiert aber
    Google PageSpeed Insights sagt immer, das kein Caching aktiviert ist.
    Da der Support von HE der Meinung ist, dass es lediglich darum geht,
    dass eine Seite läuft aber nicht wie hat vielleicht hier jemand noch eine Idee

    • Hallo,

      aktuell ist mir leider keine Möglichkeit bekannt. Wenn Sie Ihren Online-Shop bei Host Europe gehostet haben, können Sie sich aber gerne an unseren Support wenden. Wir leiten Ihre Anfrage dann gerne direkt an epages weiter.

      Mit besten Grüßen
      Wolf-Dieter Fiege

  4. Ich finde den Artikel und die Anleitung richtig gut. Laien verstehen hier die Materie auch endlich mal besser. Zumindest geht es mir so. Ich habe leider recht wenig Verständnis für das Programmieren, da fehlen mir anscheinend ein paar Synapsen. Das höchste der Gefühle sind ein paar Anpassungen im HTML-Code. Ich habe bei meinem Blog auch mal den Page Speed Test laufen lassen. Und neben der Verkleinerung der Bilder ist auch das Browser Caching vorgeschlagen wurden. Ich habe mich dann mal belesen wollen und stieß auch auf diese umfangreiche Seite ( https://www.seoagentur.de/seo-handbuch/seo-faktoren-fuer-website-und-online-shop.html ). Dort habe ich einiges an Wissen gefunden, und hier dann nochmal mehr. Ich werde jetzt versuche, dass mal umzusetzen.
    PS: Danke für die Erinnerung mit dem Back-Up. Da hätte ich jetzt so nicht dran gedacht. Manchmal kommt der Eifer doch der Sorgsamkeit zuvor.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.