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.

Abbildung - PageSpeed Insights

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

Letzte Artikel von Wolf-Dieter Fiege (Alle anzeigen)

48 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!

  4. 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

  6. 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.

  7. Super Anleitung! 🙂

    Dennoch wollte ich etwas dazu ergänzen, meine Immobilienseite hat SWP Agentur in Nürnberg ( http://www.swp24.com ) umgesetzt und die Ladezeit ist durch die SSL-Verschlüsselung und auch von HTTP/1.1 zur HTTP/2.0 mit ALPN upgraded, seitdem her ist meine Seite viel schneller geworden.

    ♥ Einen schönen 2. Advent. ♥

    LG.
    Müller Immobilien

    • Hallo,
      die Hosting-Plattform spielt dabei nicht die entscheidende Rolle. Viel eher, welche Web-Applikation genutzt wird, wie die Contenst z.B. Bilder ausgeliefert werden, ob Cookies eingebunden sind etc. Das bestimmt, welche Contents überhaupt gecacht werden können.
      Mit besten Grüßen
      Wolf-Dieter

  10. Hallo zusammen,

    ich habe genau den Code in die .htaccess eingetragen und siehe da, die Ergebnisse von Google PageSpeed sind schon viel besser. Allerdings werden mir immer noch Optimierungspotenziale angezeigt in Bezug auf Analytics:

    Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
    https://www.googletagmanager.com/gtag/js?id=UA-104874630-2 (15 Minuten)
    https://www.google-analytics.com/analytics.js (2 Stunden)

    Es geht um die Seite https://www.kostenlosekreditkarte.com wo ich aktuell Versuche den Pagespeed zu verbessern. Wer kann helfen? Vielen Dank!

  11. WoW…noch nie habe ich so schnell ein gutes Stück weit meine Website in der Ladezeit optimieren können. Recht vielen lieben Dank für diesen Blog 🙂

  12. Häää?
    Sorry aber damit alleine zieht man bei PageSpeed keinen Hering vom Tisch.
    Immer wieder erstaunlich, wie andere Kommentatoren auf solche Ergebnisse kommen.

  13. Die Speed / Perfomance Optimierung ist wichtig, allerdings nur ein Baustein der erfolgreichen Onpage-Optimierung. Da Google aber jüngst auf den Mobilen Index setzt, wird dieses vermutlich noch stärker in dem organischen Ranking berücksichtigt werden. Ganz abgesehen von der verbesserten Usability, die durch die schnelleren Ladezeiten erreicht wird. Eine Steigerung der Nutzerfreundlichkeit wird durch längere Verweildauern – im Schnitt – honoriert, da ja die Absprungrate reduziert wird. Dies sind widerum weitere „Side Effects“, die sich zwangsläufig aus der Speed Optimierung ergeben.

  14. Servus,

    mit meinem Blog rund um Natur und gesunde Ernährung bin ich seit einigen Wochen im Internet zu finden. Ein Kollege hat mir gesagt, die Seite wäre recht langsam zu laden. Ich vermute es liegt an Bildern und alten Einstellungen bzw. fehlenden. Gibt es eine Übersicht um einfache Schritte durchzugehen für die Optimierung? Geht um die Seite https://www.naturbote.com und läuft auf WordPress bei All-Inkls.

  17. Also ich benutze für meine Website: https://www.seofreelancer.ch das Plugin von WP Rocket und muss sagen das ich begeistert bin. Die Ladezeiten haben sich um ein vielfaches verbessert. Lieber zahle ich für ein anständiges Plugin mit vielen Funktionen, anstatt 2-3 kostenlose Plugins zu nutzen, die dann selbe können, aber nur die Website mit noch mehr zusätzlichen Code voll müllen.

  19. Ich habe vor Monaten low time und pagespeed Optimierungen an meiner Webseite vorgenommen und wurde Wochen später in der Suchmaschine belohnt und bin prompt 4 Plätze aufgestiegen. Ich kann bestätigen, dass es essenziell für die Suchmaschine ist, dass die Webseite schnelle Ladezeiten aufweist ( bin aktuell bei knapp 4ms ).

    Überzeugt euch selber auf meine Webseite: https://www.ilovesolution.de/

  22. Danke für den aufschlussreichen und interessanten Artikel! Das Thema Browser Coaching war mir neu, klingt aber sehr interessant, vor allem für Unternehmen, die die User Experience verbessern möchten. Eine optimierte Webseite führt zu höheren Verweildauer und einer verbesserten User-Zufriedenheit. Das wiederum hat, wie im Text auch erwähnt, einen positiven Effekt für das Unternehmen: ein besseres Ranking der Webseite auf Google.

  30. Der Artikel ist jetzt schon mehr als 5 Jahre alt. In Zeiten des Internet also uralt. Und immer noch hoch aktuell!
    Google Lighthouse hat bei mir die Cache Strategie bei mehreren Webseiten bemängelt. Ich habe die bei mehreren TYPO3 Projekten jetzt umgesetzt. Der Artikel war dabei eine große Hilfe, weil er Diagnose und Therapie zusammen beschreibt.
    Ich weiß schon, warum ich meine Webseiten seit 11 Jahren bei HostEurope hoste!
    Danke für die Arbeit!

  31. Schnellere Ladezeiten werden immer wichtiger für Google. Gerade dann wenn man in einem starken Wettbewerb mit den Konkurrenten steht. Die Optimierung dann genau der Faktor den Google als Bonus einem zurrechnet und dann besser rankten lässt als die Mitbewerber.

  32. Wirklich interessanter Beitrag. Und in einigen Punkten noch immer aktuell. Lighthouse wäre heute m. E. die erste Wahl für entsprechende Speed Checks. Und bei einem nginx-Server, was immer häufiger der Fall ist bzw. sein sollte, wäre es z. B. nginx.conf für die Direktiven, da die htaccess dort nicht mehr funktioniert. Vielen Dank für den Beitrag!

  36. Wenn nicht die verdammten unterschiedlichen Bildschirme wären, würde ich meine alte html Seite aus dem Keller holen, die war selbst zu Modem-Zeiten schnell geladen. 😉

    Es wird nie langweilig, aber ein paar Basics bleiben.

  37. Interessante Tipps! Das Browser Caching werde ich auf jeden Fall für meine Website anwenden, bin gespannt! Heutzutage, möchte ja jeder die Ladezeiten seiner Website besonders schnell machen bzw. optimieren. LG Andreas

Schreibe einen Kommentar

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

Die von Ihnen hier erhobenen Daten werden von der Host Europe GmbH zur Veröffentlichung Ihres Beitrags in diesem Blog verarbeitet. Weitere Informationen entnehmen Sie bitte folgendem Link: www.hosteurope.de/AGB/Datenschutzerklaerung/