« Zurück zu allen Tipps

Browser Caching einschalten

Home / Tipps / Browser Caching nutzen /

Falls Du nur wissen möchtest, wie Du das Problem behebst, findest Du hier die Lösungen.
HTML & PHP Entwickler

Das Problem

Erfahre hier, warum die Ladezeiten deiner Webseite wichtig sind

Wenn Du eine Webseite besuchst, lädt Dein Browser die Webseite. Dabei werden die folgenden Anfragen an den Server gestellt.

  1. Der Browser lädt nach der Auflösung der Domain das HTML herunter, also den Inhalt der Webseite. (Auflösen der Domain bedeutet, dass der Browser herausfindet welche IP-Adresse der Server hat und damit wie der Browser den Server kontaktieren kann.)
  2. Der Server sendet das Dokument an den Browser.
  3. Der Browser verarbeitet das Dokument, auch Parsen genannt, und extrahiert damit alle anderen Resourcen, die gebraucht werden. Dazu gehören Bilder, CSS-Dateien (das Design) und JavaScript-Dateien (alle aktiven Elemente).
  4. Der Browser fragt alle Dokumente beim Server an.
  5. Der Server sendet alle Dokumente an den Browser. Jedes einzeln.
  6. Die Webseite wird vollständig angezeigt.

Das Problem an dieser Vorgehensweise ist, dass der Browser jede Resource bei jedem einzelnen Aufruf herunterladen muss. Dies verschwendet Ressourcen und kann im mobilen Netz lange dauern. Ganz zu schweigen von der Möglichkeit eines Übertragungsabbruches zum Beispiel im Auto oder einer U-Bahn.

Browser bieten daher die Möglichkeit alle Dateien zwischen zu speichern, die sich nicht ändern. Dazu müssen nur die richtigen Metainformationen (Header) gesendet werden. Wenn dies der Fall ist, sieht die Übertragung wie folgt aus:

  1. Der Browser löst die Domain auf und fordert die HTML Seite an.
  2. Der Server sendet die Seite.
  3. Der Browser ermittelt welche weiteren Ressourcen benötigt werden.
  4. Der Browser lädt die Ressourcen aus dem Cache.
  5. Die Webseite wird dargestellt.

Durch das Laden aus dem Cache verringert sich die Zeit, die die Webseite zum Laden benötigt.

Um diese Funktion in Browsern zu aktivieren gibt es vier verschiedene Header: Expires, Cache-Control, Last-Modified sowie E-Tag.

Die Expires und Cache-Control Header legen jeweils fest, wie lange die Ressourcen zwischengespeichert werden sollten. Expires gibt ein Datum an, an welchem die Ressource erneut angefordert werden soll. Cache-Control hingegen übermittelt wie “alt” die Ressource werden soll. Letztendlich haben beide Header den selben Effekt, erzielen ihr Ergebnis nur über verschiedene Wege. Aus diesem Grund wird auch nur ein Header von den beiden benötigt.

Die Header Last-Modified und E-Tag hingegen dienen dazu, dass der Browser in dieser Zeit überprüfen kann, ob die Ressourcen nicht geändert wurden. Ein Browser, der bestimmte Bilder zwischen speichert, prüft regelmäßig, ob diese Dateien noch aktuell sind. Dabei helfen diese beiden Header. Der Last-Modified Header zeigt, wann die Datei das letzte Mal geändert wurde. Das E-Tag auf der anderen Seite überliefert einen Hash-Wert, der sich bei jeder Änderung der Datei ändert. Auch hier benötigt es nur einen der beiden Header.

Die Lösung

Für HTML-Entwickler und PHP-Entwickler

Ich selbe setze auf meinen Servern immer die Expires und die Last-Modified Header ein. Hier sind aber die Möglichkeiten alle Header zu setzen. Die unten gezeigten Zeilen müssen in eine .htaccess-Datei (Datei mit dem Namen ”.htaccess”) kopiert werden. (Beachte, dass .htaccess auf dem Server freigeschaltet werden muss.)

Hier der Code für die Expires-Header:

<IfModule mod_expires.c>
     ExpiresActive On
     ExpiresDefault "access plus 1 seconds"
     ExpiresByType image/jpeg "access plus 1 year"
     ExpiresByType image/x-icon "access plus 1 year"
     ExpiresByType image/jpg "access plus 1 year"
     ExpiresByType image/png "access plus 1 year"
     ExpiresByType image/gif "access plus 1 year"
     ExpiresByType application/x-shockwave-flash "access plus 1 year"
     ExpiresByType text/css "access plus 1 month"
     ExpiresByType text/javascript "access plus 1 month"
     ExpiresByType application/x-javascript "access plus 1 month"
     ExpiresByType text/html "access plus 10 minutes"
     ExpiresByType application/xhtml+xml "access plus 10 minutes”
</IfModule>

Um den Cache-Control Header zu aktivieren, füge diese Zeilen Deiner .htaccess-Datei hinzu:

<IfModule mod_headers.c>
     <FilesMatch "\\.(ico|jpeg|jpg|png|gif|swf)$">
         Header set Cache-Control "max-age=4592000, public"
     </FilesMatch>
     <FilesMatch "\\.(css)$">
         Header set Cache-Control "max-age=2592000, public"
     </FilesMatch>
     <FilesMatch "\\.(js)$">
         Header set Cache-Control "max-age=216000, private"
     </FilesMatch>
</IfModule>

Aktiviere den Last-Modified-Header mit diesem Code:

<IfModule mod_headers.c>
     <FilesMatch "\.(json|pdf|swf|bmp­|gif|jpeg|jpg|png|svg­|tiff|ico|flv|js)$">
         Header Set Last-Modified "Fri, 01 Jan 2016 12:00:00 GMT"
     </FilesMatch>
</IfModule>

In den Browser Entwicklertools kann man im Netzwerk-Tab die mitgesendeten Header sehen. Dazu kannst Du einfach auf die jeweilige Datei klicken und Dir die Header ansehen.

 

« Zurück zu allen Tipps