In unserem letzten Ratgeber-Artikel haben wir erklärt, mit welchen Maßnahmen sich die Ladegeschwindigkeit der Webseite beschleunigen lässt um von Suchmaschinen besser gerankt zu werden. Ein Punkt, auf den ich heute näher eingehen möchte ist das Aktivieren von Browser-Caching.

Was ist Browser-Caching?

Unter Browser-Caching versteht man das Zwischenspeichern von Website-Elementen wie Grafiken, CSS-, Javascript- oder anderen Assset-Dateien auf dem Endgerät des Nutzers. Ohne Browser-Caching würden alle Dateien bei jedem Website-Besuch erneut heruntergeladen werden. Ziel des Browser-Cachings ist es also, ein erneutes Herunterladen dieser Dateien zu verhindern und somit die  Ladezeit der Webseite zu beschleunigen.

Infografik Browser Caching
Infografik Browser Caching

Was bringt Browser-Caching

  • Eine schnell ladende Website kann sich positiv auf das Website-Ranking in Suchmaschinen auswirken.
  • Schnellere Ladezeiten sorgen für eine bessere User-Experience.
  • Besonders auf Smartphone können schnellere Ladezeiten zu einer geringeren Abbruchrate beitragen.

 

Welche Dateien können vom Browser gecached werden?

  • HTML-Dateien: In HTML-Dateien ist der grundlegende Programmiercode einer Webseite enthalten. Alle Inhalte, die auf einer Webseite erscheinen werden dort festgelegt.
  • CSS-Dateien: Mit CSS-Dateien lassen sich HTML-Elemente optisch gestalten. So lassen sich beispielsweise Anordnung, Größe, Farbe, Abstände sowie etliche weitere Eigenschaften festlegen.
  • Bildateien: JPEG-, JPG-, PNG-, und ICO-Dateien lassen sich ebenfalls im Browser zwischenspeichern.

 

Wie wird Browser-Caching aktiviert?

Die Einrichtung des Browser-Cachings erfolgt über die .htaccess Datei im Stammverzeichnis der Webseite. Hier wird das Apache-Modul „mod_expires“ aktiviert, die Dateitypen festgelegt, die gecached werden sollen und es wird ein Ablaufdatum gesetzt. Mit dem Ablaufdatum wird dem Browser mitgeteilt, wie lange der Dateityp im Cache gespeichert werden soll. Nach Ablauf dieses Zeitraums werden die Dateien neu vom Webserver angefordert. Google empfielt für statische Ressourcen eine Haltbarkeitsdauer von mindestens einer Woche.

Hier ein Beispiel, bei dem das Ablaufdatum für die Dateien auf eine Woche festgelegt wird:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css „access plus 1 week“
ExpiresByType text/javascript „access plus 1 week“
ExpiresByType text/html „access plus 1 week“
ExpiresByType application/javascript „access plus 1 week“
ExpiresByType image/gif „access plus 1 week“
ExpiresByType image/jpeg „access plus 1 week“
ExpiresByType image/png „access plus 1 week“
ExpiresByType image/x-icon „access plus 1 week“
</IfModule>

Für die Laufzeit können verschiedene Zeiteinheiten eingesetzt werden. Hier ein paar Beispiele:

  • access plus 0 seconds
  • access plus 1 hour
  • access plus 1 week
  • access plus 1 month
  • access plus 1 year

Das Problem der veralteten Inhalte

Wenn sich eine Website in der Entwicklungsphase befindet, kann es vorkommen, dass häufig Änderungen an z. B. Stylesheet-Dateien vorgenommen werden. Diese Änderungen werden durch einfaches Neuladen der Website nicht aktualisiert – im Browser werden also noch veraltete Inhalte dargestellt, da die CSS-Dateien nicht erneut vom Server abgerufen werden.

Hier könnte man zwar das Browser-Caching wieder deaktivieren, indem in der .htaccess der Wert für ExpiresActive auf „off“ gesetzt wird, wenn die Änderungen jedoch nur für die Entwicklung der Website relevant sind, kann der Browser „gezwungen“ werden, alle Inhalte erneut vom Webserver zu laden. Dazu weist man den Browser an, die kompletten Inhalte einer Seite neu zu laden – hier die Shortcuts dazu für gängigsten Internetbrowser:

  • Firefox: Strg + Shift + R
  • Google Chrome: Strg + F5
  • Internet Explorer: Strg + F5
  • Opera: Strg + F5
  • Safari: Shift + Reload-Button

Bei mobilen Browsern ist dieses Neuladen in dieser Form leider nicht möglich. Für mobiles Testing muss vor jedem Reload der Cache manuell geleert werden.

 

Was, wenn kein Browser-Caching gesetzt wurde?

Moderne Browser speichern Dateien automatisch im Cache. Die Lebensdauer der gespeicherten Dateien hängt hierbei von dem jeweiligen Browser bzw. deren Einstellungen ab. Wir empfehlen aber in jedem Fall, das Caching selbst wie beschrieben über die .htaccess Datei vorzunehmen.

Ähnliche Beiträge

5. APRIL 2018

DSGVO: Das ändert sich für Ihre Firmenwebsite

Die Datenschutz Grundverordnung (DSGVO) bzw. General Data Protection Regulation (GDPR) ist derzeit in aller Munde. Ab dem 25.05.2018 gilt die neue EU Datenschutzgrundverordnung auch in Deutschland. Wir geben Ihnen einen Überblick, wobei es sich bei der DSGVO handelt und welche...

0

28. MäRZ 2018

HowTo: So ändern Sie den WordPress E-Mail Absender

Standardmäßig wird „WordPress“ als Abender-Name und „wordpress@domainname.de“ als Absende-E-Mail verwendet. Wenn WordPress als CMS für eine Firmenwebsite eingesetzt wird, kann die Standard-Absender E-Mail und -Name als störend empfunden werden. Wir haben die Änderung...

0

30. JANUAR 2018

Besseres Ranking durch schnellere Websites – Pagespeed Optimierung

PageSpeed, oder auch Seitenladegeschwindigkeit bezeichnet die Ladezeit, die eine Webseite vom Aufruf über den Browser des Users bis zum vollständigen Laden benötigt. Die Seitenladegeschwindigkeit ist ein wichtiger Rankingfaktor für Google und deren Optimierung somit ein wesentlicher Bestandteil...

0

25. JANUAR 2018

SSL-Verschlüsselung von Firmenwebseiten

Vor einigen Monaten habe ich einen Bericht über Abmahnungen für nicht SSL-Verschlüsselte Webseiten gelesen. In unserer Agentur betreuen wir einige Kundenprojekte, darunter Onlineshops, Firmenwebsites, aber auch private Websites und Blogs, bei denen wir SSL-Zertifikate eingerichtet haben. Das...

0

Hinterlassen Sie einen Kommentar