Hey Loadtimefreaks! Mit Browser Caching per .htaccess könnt Ihr noch ein paar Sekunden Ladezeit herausholen und den YSlow Score zum Mond beamen! Allen, die vor Änderungen in der .htaccess Datei Muffensausen haben, sei gesagt, dass das echt babyeinfach ist. Wenn Sie Copy&Paste beherrschen, werden Sie mit diesem Artikel Ihre WordPress Seite bedeutend schneller machen. Fatzzzzzz!
Wie verbessert Browser Caching die Ladezeit meiner Webseite?
Da Sie hier gelandet sind, kennen Sie 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 der Browser zum Beispiel nur den Text, die Bilder und von extern eingebundenen Elemente wie Like-Buttons und YouTube Videos. Den Rest lädt der Browser aus dem lokalen Speicher auf dem Endgerät, also dem Laptop oder dem Handy. Er verbringt so weniger Zeit mit dem Herunterladen der Dateien und beginnt früher damit, die Seite visuell darzustellen. So kann man die Ladezeit unter Umständen um 50% verkürzen.
Es gibt viele Dateien, die ein Besucher sich nicht jedes Mal neu herunterladen muss, wenn er auf Ihrer 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 Ihrer .htaccess Datei teilen Sie dem Browser mit, 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 Ihnen danken, wenn Sie ihnen nicht das Datenvolumen des ganzen Monats verpulvern.
Ist-Stand messen: Page Speed Test mit Google, YSlow und anderen Tools
Falls noch nicht geschehen, messen Sie die Ladezeit Ihrer 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,…)
- GTmetrix (komfortable Übersicht über Header Information)
- Pingdom Tools (der Flaschenhalsfinder 😉 )
- Google PageSpeed Insights (das gibt es auch in den Webmaster Tools)
Von mir noch ein Tipp zu Pingdom: wenn Ihre Zielgruppe in Europa lebt, wählen Sie vor dem Start unter Settings „Amsterdam“ aus. Ihre WordPress Website muss dort schnell laden, wo sie aufgrufen wird und um das zu testen, sollte auch von dieser Region aus angefragt werden. Ansonsten lasse ich Sie mit den Page Speed Tools an dieser Stelle auch schon wieder in Ruhe. Spielen Sie einfach ein bisschen – besonders GTmetrix und YSlow machen richtig Spaß. Wissenswert ist nur noch, dass der YSlow Score eine bekannte Größe unter SEOs und UXlern (User Experience) ist.
Browser Caching per .htaccess Datei aktivieren
Jetzt geht es los. Wie gesagt, keine Angst. Mach Sie sich trotzdem eine oder am besten zwei Kopien Ihrer aktuellen .htaccess Datei auf dem Desktop, damit Sie ein Backup dieser wichtigen Datei haben, falls doch etwas nicht gleich klappt!
Sie finden die Datei im Root (Hauptverzeichnis) Ihrer WordPress Installation auf dem Webspace, sofern Sie einen Apache Server haben.
Falls Sie keine .htaccess-Datei sehen, ist sie entweder ausgeblendet, damit sie nicht aus Versehen bearbeitet oder gelöscht werden kann. Blenden Sie alle versteckten Dateien ein. Ist trotzdem keine zu sehen und Sie sind sich nicht sicher, ob Sie Apache oder nginx Server nutzen, fragen Sie bitte Ihren Webhoster.
Falls Sie einen Apache Server verwenden, aber keine .htaccess haben, erstellen Sie eine mit einem Text- oder HTML-Editor. Die Datei muss .htaccess heißen und hat keine Dateiendung (wie etwa .txt, .php, .doc) – und braucht auch keine.
Kurze Variante:
Beim Browser Caching kann man detailliert 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 Ihnen jetzt erst eine Kurzfassung der Befehle für Ihre .htaccess, mit der Sie fortan keine Arbeit haben und trotzdem eine spürbare Verbesserung feststellen werden. Sozusagen Fire and Forget.
# BEGIN Browser Cache aktivieren
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
</IfModule>
# END Browser CacheKopieren Sie das ans Ende Ihrer .htaccess Datei. Damit legen Sie fest, dass alle Dateien Ihrer WordPress-Installation einen Tag unverändert bleiben und in dieser Zeit nicht neu geladen werden müssen.
Sie können die Zahl auch verändern, falls Sie nicht so oft bloggen. Mit „access plus 1 week“ bleibt der Browsercache bis zu einer Woche nach dem Besuch der Webseite beim Nutzer gecached. Das sind einige weitere Möglichkeiten:
- 600 seconds
- 1 day
- 14 days
- 1 month
- 6 months
- 1 year
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:
# BEGIN Browser Cache aktivieren
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresDefault "access plus 1 week"
</IfModule>
# END Browser CacheDiese Variante legt fest, dass die Bilddateien ein Jahr lang gecached bleiben dürfen. Alle anderen Ressourcen sollen nach einer Woche frisch heruntergeladen werden.
Welche Browser Caching Dauer für die verschiedenen FileTypes ist gut?
Für die meisten Seiten, die mit WordPress laufen, nutze ich diesen Code:
# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/mpeg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType text/html "access plus 1 day"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/x-javascript "access plus 14 days"
ExpiresByType application/pdf "access plus 1 year"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>
# END Cache-Control HeadersDiese Code-Snippet Vorlage für die .htaccess beinhaltet auch HTML, CSS Dateien und JavaScript. Da man hochgeladene Bilder und viele PDFs üblicherweise nie oder nur alle paar Jahre ändert, ist die großzügige Caching-Dauer von einem Jahr passend gewählt.
Sie können Ihre .htaccess-Datei jetzt auf Ihren Server laden und dann erneut die Geschwindigkeit Ihres WordPress Blogs messen. Ist die Ladezeitoptimierung sichtbar?
Bonus: Cache-Control Headers anpassen
Nachdem Sie die Expiration Perioden per mod_expires festgelegt haben, sollten Sie jetzt noch die Cache-Control Header anpassen. Damit legen Sie fest, wer für wen das Caching gedacht ist.
Erst dadurch können wir tatsächlich von der Optimierung des Browser Cachings sprechen. Denn hier geben wir klar an, was beim Browser, also dem Client des Webseitenbesichers gecached werden soll und was auch von allen sonstigen Maschinen und möglichen Zwischenspeichern in den diversen Netzwerken temporär abgelegt werden soll.
Ergänzen Sie Ihre .htaccess Datei deshalb mit diesem Code Snippet:
# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch ".(ico|jpe?g|png|gif|swf|webp|webm|mp4|mpeg)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch ".(css)$">
Header append Cache-Control "public"
</filesMatch>
<filesMatch ".(js)$">
Header append Cache-Control "private"
</filesMatch>
<filesMatch ".(x?html?|php)$">
Header append Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
</IfModule>.htaccess testen und Syntax validieren
Eine grobe Prüfung der Syntax kann man z.B. bei htaccess.madewithlove.be durchführen.
Ich möchte Ihnen noch zwei Quellen nennen, bei denen ich mich umgesehen habe, als ich mich zum ersten Mal mit dem Thema .htaccess beschäftigte. Das ist einmal eine englischsprachige Seite mit einer guten Übersicht, über die verschiedenen Anwendungsmöglichkeiten von <filesmatch> und <files> in der .htaccess 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, Sie konnten mit den Anpassungen der .htaccess die Ladezeit von WordPress verkürzen und bessere Page Speed Scores erzielen. Fragen Sie gerne in den Kommentaren, wenn Sie mehr wissen wollen oder teilen Sie Ihre Meinung!
Trackbacks/Pingbacks