Browser Caching aktivieren in .htaccess für WordPress Installation

 3599 Mal gelesen

Hey Loadtimefreaks! Hier könnt Ihr noch ein paar Sekunden herausholen und den YSlow Score zum Mond schießen! Allen, die vor Änderungen in der .htaccess Datei Muffensausen haben, sei gesagt, dass das echt babyeinfach ist. Wenn Du Copy&Paste beherrschst, wirst Du mit diesem Artikel Dein Blog bedeutend schneller machen. Fatzzzzzz!

Wie verbessert Browser Caching die Ladezeit meiner Webseite?

Da Du hier gelandet bist, kennst Du die Antworten wahrscheinlich schon: Ist für eine Webseite Browser Caching aktiviert, fragt ein Browser nicht bei jedem Seitenbesuch alle Dateien ab, die die Webseite ausmachen. Je nach Konfiguration lädt er zum Beispiel nur den Text, die Bilder und von extern eingebundenen Elemente wie Like-Buttons und YouTube Videos.

Es gibt viele Dateien, die ein Besucher sich nicht jedes Mal neu herunterladen muss, wenn er auf Deiner Seite surft. Das sind zum Beispiel die grafischen Elemente des Layouts wie Logo und Hintergrundbilder, die CSS Dateien und ggf. die Banner in der Seitenleiste. Mit der Modifikation Deiner .htaccess Datei kannst Du dem Browser mitteilen, dass er für den Zeitraum X alle einmal aufgerufenen Ressourcen aus seinem periferen Speicher laden kann, anstatt sie vom Webserver zu holen. Das reduziert nicht nur die Ladezeit, sondern verringert auch die zu übertragende Datenmenge. Mobile Nutzer werden es Dir danken, wenn Du ihnen nicht das Datenvolumen des ganzen Monats verpulverst.

Speedtest mit Google oder YSlow

Falls noch nicht geschehen, miss die Ladezeit Deiner Homepage oder jeder beliebigen Unterseite mit kostenlosen Tools! Ich verwende immer die drei:

  • YSlow (als Firefox Addon, integriert in das Addon Firebug aber das gibt’s auch für Chrome, Safari,…)
  • Pingdom Tools (der Flaschenhalsfinder 😉 )
  • Google PageSpeed Insights (das gibt es auch in den Webmaster Tools)

Weitere 7 Ladezeitmesser findet Ihr im Blogpost von Craig Buckler: 10 of the Best Web Page Weight Analysis Tools. Von mir noch ein Tipp zu Pingdom: wenn Euer Hoster seine Server in Europa stehen hat, dann wählt vor dem Start unter Settings Amsterdam aus. Das Ergebnis hängt schließlich davon ab, von wo aus Euer WordPress Blog aufgrufen wird. Ansonsten lasse ich Euch mit den Tools an dieser Stelle auch schon wieder in Ruhe. Spielt einfach ein bisschen – besonders Pingdom Tools und YSlow machen richtig Spaß. Wissenswert ist nur noch, dass der YSlow Score eine bekannte Größe unter SEOs und UXlern (User Experience Leute) ist.

Tunnel mit Röhren bei hoher Geschwindigkeit

Schnellere Webseiten = zufriedenere Besucher (© La-Liana / PIXELIO)

Browser Caching per .htaccess Datei aktivieren

Jetzt geht es los. Wie gesagt, keine Angst. Mach Dir trotzdem eine oder am besten zwei Kopien Deiner aktuellen .htaccess Datei auf dem Desktop, damit Du ein Backup hast, falls doch etwas nicht gleich klappt!

Du findest die Datei im Root (Hauptverzeichnis) Deiner WordPress Installation auf dem Webspace. Falls Du noch keine .htaccess-Datei hast, was mich wundern würde, erstelle eine mit einem Text- oder HTML-Editor. Die Datei hat keine Dateiendung (wie etwa .txt, .php, .doc) und braucht auch keine. 😉

Kurze Variante:

Beim Browser Caching kann man detailiert festlegen, welche Dateiarten oder sogar Einzeldateien für wie lange gespeichert bleiben und nicht frisch abgerufen werden sollen. Man kann ihnen ein Verfallsdaum, das sogenannte Expiration Date zuweisen. Ich zeige Euch jetzt erst eine Kurzfassung der Befehle für Eure .htaccess, mit der Ihr keine Arbeit habt und trotzdem eine spürbare Verbesserung feststellen werdet. Sozusagen Fire and Forget.

# BEGIN Browser Cache aktivieren

ExpiresActive On
ExpiresDefault "access plus 1 hour"

# END Browser Cache

Kopiere das ans Ende Deiner .htaccess Datei. Damit sagst Du, dass alle Dateien Deines Blogs eine Stunde unverändert bleiben und in dieser Zeit nicht neu geladen werden müssen. Du kannst die Zahl auch verändern, falls Du nicht so oft bloggst. Mit „access plus 3 hours“ bleibt der Browsercache bis zu 3 Stunden nach dem Besuch der Webseite erhalten. Mehrere Tage gibt man so an: „access plus 3 days“. Das rockt jedenfalls schon, um ein paar Punkte bei Google und YSlow gut zu machen!

Ausführliche Variante mit mehr Finesse:

Wie gesagt, kannst Du konkret auf einzelne Dateien und Dateiendungen eingehen. Zum Beispiel macht es Sinn, alle Grafiken des Layouts für mehrere Tage, Monate oder sogar ein Jahr im Cache zu belassen, wenn man weiß, dass sie sich in diesem Zeitraum nicht ändern werden. Die .htaccess kann dann das hier enthalten (VORSICHT das ist nur ein Beispiel und sollte nicht wie oben einfach kopiert werden!):

# BEGIN Browser Cache aktivieren

ExpiresActive On

ExpiresDefault "access 1 year"

ExpiresByType image/gif "access 1 year"
ExpiresDefault "access plus 1 hour"

# END Browser Cache

Diese Variante legt fest, dass die Bilddatei mit dem Dateinamen logo.jpg ein Jahr lang im gecached bleiben darf, ebenso wie alle Grafiken im gif-Format. Das setzt natürlich voraus, dass das Logo auch genau so heißt und alle Grafiken des Seitenlayouts .gif Dateien sind. Alle anderen Ressourcen sind mit einem Verfallszeitraum von einer Stunde markiert.

Für die meisten Seiten, die mit WordPress laufen, nutze ich diesen Code:

# BEGIN Browser Cache aktivieren

ExpiresActive On

ExpiresDefault "access plus 1 hour"


ExpiresDefault "access plus 1 year"

ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

# END Browser Cache

Er beinhaltet auch die CSS Dateien und alle JavaScripte. PDFs und JPG Bilder lade ich einmal in den Beiträgen hoch und ändere sie dann meistens nie wieder. Deshalb ist der Zeitraum von einem Jahr durchaus gerechtfertigt. Du kannst den Auszug bei Dir testen und bei Bedarf noch Logos und sonstige Bilder hinzufügen und mit einem großzügigeren Verfallsdaum auszeichnen.

.htaccess testen und Syntax validieren

Zum Schluss sei noch gesagt, dass ich weder Systemadministrator noch Programmierer bin. Ich arbeite mit meinen Servern nach dem Trial And Error Prinzip. Eine grobe Prüfung der Syntax kann man z.B. bei htaccess.madewithlove.be durchführen. Falls Du mehr Ahnung hast, würde ich mich über einen Kommentar freuen. Korrekturen und Tipps sind natürlich sehr willkommen!

Ich möchte Euch noch zwei Quellen nennen, bei denen ich mich umgesehen habe, als ich mich zum ersten Mal mit dem Thema beschäftigte. Das ist einmal eine englischsprachige Seite mit einer guten Übersicht, über die verschiedenen Anwendungsmöglichkeiten von <filesmatch> und <files> in der .htaccess auf askapache.com. Und dann fand ich noch die etwas anspruchsvollere Erklärung von Browser Caching mittels der Module headers und expires auf sysadminslife.com (deutsch) hilfreich.

Ich hoffe, Euch freut die Ladezeitreduzierung durch diese einfache Methode auch so sehr, wie mich. Möge sich unsere Mühe schnell durch bessere User Experience und Google Rankings auszahlen!

Gleich teilen:

  • Twitter
  • Google Plus
  • Facebook
  • LinkedIn
  • Email
  • RSS


+Benjamin Wingerter ist Inhouse-SEO und Affiliate seit 2008. Er hat zwei Steckenpferde: Conversion Rate Optimierung und Suchmaschinenoptimierung. Seit 2011 spricht er auf Fachkonferenzen, wie der SEO Campixx.

Advertisement

EmailEmail