Was ist Leverage Browser Caching und wie kann ich es für meine Website aktivieren?

Einleitung

Um zu verstehen, wie Leverage Browser Caching funktioniert, müssen Sie wissen, wie Webserver und Browser funktionieren. Gehen wir diesen Prozess kurz durch.

Um auf eine Website zugreifen zu können, benötigen Sie einen Webbrowser wie Google Chrome oder Mozilla Firefox. Eine Website wird normalerweise auf einem Webserver gehostet, der den Inhalt jedes Mal an den Browser des Benutzers sendet, wenn dieser die Website besucht. Eine Website wird mit verschiedenen Dateitypen erstellt, entweder dynamisch wie PHP-Dateien oder statisch wie HTML, JS, CSS und Bilder. Wenn die Seiten einer Website klein sind (wenige KB), werden sie schneller geladen, da der Webserver nur einen kleinen Teil des Inhalts an den Browser sendet. Wenn die Seite jedoch größer ist (3-4 MB oder mehr) und viele statische Ressourcen enthält, dauert das Laden länger.

Leverage Browser Caching

Um die Ladezeit umfangreicher Seiten zu verkürzen, wurde Leverage Browser Caching implementiert, das es Browsern ermöglicht, einige statische Ressourcen der besuchten Websites lokal herunterzuladen. Dieses Verfahren zielt darauf ab, die Anzahl der Anfragen an den Webserver beim Besuch einer Website zu reduzieren, was wiederum die Datenmenge verringert, die Ihr Browser herunterladen muss. Was ist das Ergebnis? Die Website wird schneller geladen.

Der Webserver selbst – in diesem Fall Apache und seine mod_expires – ermöglicht die Nutzung von Leverage Browser Caching. Um diese Funktion zu aktivieren, müssen Sie Ihre HTTP-Header ändern und Ablaufzeiten für die Dateitypen festlegen, die Sie nutzen möchten. Dies geschieht durch Regeln, die Sie in Ihre .htaccess-Datei einfügen.

Erstellen Sie diese Datei im Root-Verzeichnis der Domain, für die Sie Leverage Browser Cache nutzen möchten, oder öffnen Sie sie zur Bearbeitung, falls sie bereits existiert. Bitte kopieren Sie die folgenden Zeilen und fügen Sie sie in die .htaccess-Datei ein:

# Enabled Expires Headers

ExpiresActive on

# Set Expires Default
ExpiresDefault                          "access plus 1 year"

# Set Expires Header for cache.
ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your document html
ExpiresByType text/html                 "access plus 0 seconds"

# Data
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"

# RSS Feed
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon
ExpiresByType image/x-icon              "access plus 1 week"

# Media files - images, audio, video
ExpiresByType image/gif                 "access plus 1 year"
ExpiresByType image/png                 "access plus 1 year"
ExpiresByType image/jpeg                "access plus 1 year"
ExpiresByType video/ogg                 "access plus 1 year"
ExpiresByType audio/ogg                 "access plus 1 year"
ExpiresByType audio/mp3                 "access plus 1 year"
ExpiresByType video/mp4                 "access plus 1 year"
ExpiresByType video/webm                "access plus 1 yar"

# HTC files
ExpiresByType text/x-component          "access plus 1 year"

# Various Webfonts
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType application/x-font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css                  "access plus 1 year"
ExpiresByType application/javascript    "access plus 1 year"

Speichern Sie die Datei und voila! Sie haben nun Leverage Browser Caching für Ihre Website implementiert.