Je schneller eine Webseite geladen ist, desto besser. Für eine höhere Geschwindigkeit ist das Browser-Caching ein sinnvolles und geeignetes Mittel. Dabei speichert der Browser statische oder nur selten modifizierte Ressourcen wie Grafiken und CSS-Dateien für einen konfigurierten Zeitraum im lokalen Speicher zwischen. Bei einem erneuten Besuch reduziert sich die Anzahl der notwendigen Serveranfragen drastisch und die Seite lädt wesentlich schneller. Die hohe Geschwindigkeit erhöht den Komfort für die Besucher, Suchmaschinen belohnen die Performance-Steigerung mit einem besseren Ranking.
Welche Dateitypen können zwischengespeichert werden?
Damit das Browser-Caching richtig funktioniert, muss der Browser wissen, wie lange die verschiedenen Dateitypen zwischengespeichert werden sollen. Zu diesen Ressourcen zählen neben den Bildformaten wie .gif, .jpg und .png auch JavaScript- und CSS-Dateien sowie weitere binäre Objektdaten wie PDFs und Mediendateien. Für die verschiedenen Dateitypen legen Sie individuelle Ablaufdaten fest.
Lebenszeit & Validierung
Für die Aktivierung müssen bestimmte Header-Typen an den Browser gesendet werden, der Erste regelt das Ablaufdatum, der andere bezieht sich auf die Validierung:
- Expires- und Cache-Control-Header legt die Gültigkeitsdauer fest.
- Last-Modified- und E-Tag-Header dienen der Ressourcen-Validierung.
Empfehlung zur Caching-Dauer
Die Lebensdauer sämtlicher Caching-Ressourcen sollte laut Google mindestens eine Woche betragen. Für Widgets oder Werbeanzeigen von Drittanbietern sollten Sie die Cache-Lebensdauer für mindestens einen Tag eintragen. Es gilt die Empfehlung:
Für Expires mindestens eine Woche festlegen, gegebenenfalls bis zu einem Jahr. Verwenden Sie Expires statt Cache-Control: max-age, da es besser unterstützt wird. Ein längerer Zeitraum als ein Jahr verstößt gegen die RTC-Richtlinien und ist nicht erlaubt.
Die Bedeutung von Last-Modified und E-Tag
Wie soll der Browser die Verfügbarkeit einer neuen Version prüfen? Beim Last-Modified-Header wird dazu das Datum zum Vergleich herangezogen. Beim E-Tag-Header kann ein beliebiger anderer Wert zur eindeutigen Identifizierung der Ressourcen genutzt werden. Häufig werden Dateiversionen oder Inhalts-Hashes verglichen. Die Verwendung ermöglicht dem Browser das effiziente Aktualisieren sämtlicher zwischengespeicherter Ressourcen.
Browser-Caching in der .htaccess-Datei aktivieren
Ist Ihre Website auf einem Apache-Server installiert und das Modul mod_expires aktiviert, aktivieren Sie das Browser-Caching mit folgendem Codeblock in der .htaccess-Datei:
Tipp: Speichern Sie die .htaccess-Datei zur Sicherheit lokal ab. Falls etwas schief geht, haben Sie ein Backup zur Hand. Der Grund: Bei Fehlern in der Datei kann die Website nicht mehr erreichbar sein.
Öffnen Sie die .htaccess-Datei und fügen Sie den folgenden Codeblock unter dem bereits vorhandenen Code hinzu. Prüfen Sie gegebenenfalls, ob bereits ein Codeblock mit mod_expires.c vorhanden ist.
<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/html "access plus 500 seconds" ExpiresByType image/gif "access plus 14 days" ExpiresByType image/ico "access plus 14 days" ExpiresByType image/jpeg "access plus 14 days" ExpiresByType image/jpg "access plus 14 days" ExpiresByType image/png "access plus 14 days" ExpiresByType text/css "access plus 14 days" ExpiresByType text/javascript "access plus 14 days" ExpiresByType application/x-javascript "access plus 14 days" ExpiresByType application/javascript "access plus 14 days" </IfModule>
Prüfen der Aktivierung mit Google Insights
Ob die Aktivierung erfolgreich ist, lässt sich leicht mithilfe von Google PageSpeed Insights prüfen. Die Punktebewertung sollte direkt ansteigen. Hier sehen Sie auch auf einen Blick, für welche Cache-fähigen Ressourcen noch ein Ablaufdatum angegeben werden sollte.
Google PageSpeed Insights hilft bei der Optimierung der Website
Google PageSpeed Insights liefert Ihnen zusätzlich weitere Tipps zur Optimierung Ihrer Website. Vergleichen Sie die Informationen zur Desktop- und Mobilversion. Das Programm prüft auch Eigenschaften wie die Schriftgröße, die ebenso zu einer besseren Nutzererfahrung beitragen.
Aktivieren Sie jetzt das Browser-Caching und testen Sie die Website anschließend auf Fehler. Die höhere Seitenladegeschwindigkeit macht die Bedienung für die Besucher komfortabler und führt langfristig zu einer besseren Bewertung durch die großen Suchmaschinen.
Sie haben Fragen oder Anregungen zum Thema Website schneller laden mit Browser-Caching? Schicken Sie uns einen Kommentar. Wir sind gespannt auf Ihr Feedback.
Bildnachweis: Fotolia, Lizenz: Host Europe
- Kostenlose Übersetzungsprogramme – die besten Online-Tools in der Übersicht - 1. März 2023
- Microsoft Word kostenlos nutzen – die Online-Version mit allen Basisfunktionen - 7. Dezember 2022
- Digitale Transformation im Mittelstand – Status Quo - 6. Dezember 2022
Google Page Speed war mir neu. Und ich muss sagen ich habe noch einiges an potential gefunden.
Mal schauen ob Google mich jetzt in Zukunft besser rankt. Ich denke auch das Speed wichtig für die eigene Seite ist. Aber bisher war es mir einfach zu unwichtig…
Vielen Dank für die Infos.
Danke für den Tipp, für einen Hoster sehr ungewöhnlich. Browser Caching war mir schon bekannt. Neu für mich ist das Cachen von HTML: ExpiresByType text/html „access plus 500 seconds“ werde dies mal versuchen.
Auch ein herzliches Danke!
Schöne Übersicht, vielen Dank!
Noch eine Idee, wie der korrekte MIME-Type für eine PHP-Datei lautet?
Hallo,
eine Übersicht zu den MIME-Types gibt es hier:
https://wiki.selfhtml.org/wiki/Referenz:MIME-Typen
Mit besten Grüßen
Wolf-Dieter Fiege
Schöne Anleitung, nur funktioniert es bei uns auf dem V-Server nicht…
Wir haben verschiedene Versionen in der htacces probiert aber
Google PageSpeed Insights sagt immer, das kein Caching aktiviert ist.
Da der Support von HE der Meinung ist, dass es lediglich darum geht,
dass eine Seite läuft aber nicht wie hat vielleicht hier jemand noch eine Idee
Hallo,
Wo kann ich die Einstellungen (Browser-Caching) für das Shop-System (epages), das von Hosteurope eingeboten ist, einstellen?
Hallo,
aktuell ist mir leider keine Möglichkeit bekannt. Wenn Sie Ihren Online-Shop bei Host Europe gehostet haben, können Sie sich aber gerne an unseren Support wenden. Wir leiten Ihre Anfrage dann gerne direkt an epages weiter.
Mit besten Grüßen
Wolf-Dieter Fiege
Ich finde den Artikel und die Anleitung richtig gut. Laien verstehen hier die Materie auch endlich mal besser. Zumindest geht es mir so. Ich habe leider recht wenig Verständnis für das Programmieren, da fehlen mir anscheinend ein paar Synapsen. Das höchste der Gefühle sind ein paar Anpassungen im HTML-Code. Ich habe bei meinem Blog auch mal den Page Speed Test laufen lassen. Und neben der Verkleinerung der Bilder ist auch das Browser Caching vorgeschlagen wurden. Ich habe mich dann mal belesen wollen und stieß auch auf diese umfangreiche Seite ( https://www.seoagentur.de/seo-handbuch/seo-faktoren-fuer-website-und-online-shop.html ). Dort habe ich einiges an Wissen gefunden, und hier dann nochmal mehr. Ich werde jetzt versuche, dass mal umzusetzen.
PS: Danke für die Erinnerung mit dem Back-Up. Da hätte ich jetzt so nicht dran gedacht. Manchmal kommt der Eifer doch der Sorgsamkeit zuvor.
Super Anleitung! 🙂
Dennoch wollte ich etwas dazu ergänzen, meine Immobilienseite hat SWP Agentur in Nürnberg ( http://www.swp24.com ) umgesetzt und die Ladezeit ist durch die SSL-Verschlüsselung und auch von HTTP/1.1 zur HTTP/2.0 mit ALPN upgraded, seitdem her ist meine Seite viel schneller geworden.
♥ Einen schönen 2. Advent. ♥
LG.
Müller Immobilien
Leider klappt das nicht bei unserem vServer, sollte man hier an dieser Stelle auch erwähnen.
Hallo,
die Hosting-Plattform spielt dabei nicht die entscheidende Rolle. Viel eher, welche Web-Applikation genutzt wird, wie die Contenst z.B. Bilder ausgeliefert werden, ob Cookies eingebunden sind etc. Das bestimmt, welche Contents überhaupt gecacht werden können.
Mit besten Grüßen
Wolf-Dieter
Das hat wunderbar geklappt, danke für die verständliche Anleitung.
Gibt es auch die Möglichkeit *.woff-Dateien zu cachen? Müsste eine Google-Font sein.
Hallo zusammen,
ich habe genau den Code in die .htaccess eingetragen und siehe da, die Ergebnisse von Google PageSpeed sind schon viel besser. Allerdings werden mir immer noch Optimierungspotenziale angezeigt in Bezug auf Analytics:
Nutzen Sie Browser-Caching für die folgenden cachefähigen Ressourcen:
https://www.googletagmanager.com/gtag/js?id=UA-104874630-2 (15 Minuten)
https://www.google-analytics.com/analytics.js (2 Stunden)
Es geht um die Seite https://www.kostenlosekreditkarte.com wo ich aktuell Versuche den Pagespeed zu verbessern. Wer kann helfen? Vielen Dank!
WoW…noch nie habe ich so schnell ein gutes Stück weit meine Website in der Ladezeit optimieren können. Recht vielen lieben Dank für diesen Blog 🙂
Häää?
Sorry aber damit alleine zieht man bei PageSpeed keinen Hering vom Tisch.
Immer wieder erstaunlich, wie andere Kommentatoren auf solche Ergebnisse kommen.
Die Speed / Perfomance Optimierung ist wichtig, allerdings nur ein Baustein der erfolgreichen Onpage-Optimierung. Da Google aber jüngst auf den Mobilen Index setzt, wird dieses vermutlich noch stärker in dem organischen Ranking berücksichtigt werden. Ganz abgesehen von der verbesserten Usability, die durch die schnelleren Ladezeiten erreicht wird. Eine Steigerung der Nutzerfreundlichkeit wird durch längere Verweildauern – im Schnitt – honoriert, da ja die Absprungrate reduziert wird. Dies sind widerum weitere „Side Effects“, die sich zwangsläufig aus der Speed Optimierung ergeben.
Hallo,
absolut richtig. Vielen Dank für die Bestätigung.
Viele Grüße
Wolf-Dieter Fiege
Servus,
mit meinem Blog rund um Natur und gesunde Ernährung bin ich seit einigen Wochen im Internet zu finden. Ein Kollege hat mir gesagt, die Seite wäre recht langsam zu laden. Ich vermute es liegt an Bildern und alten Einstellungen bzw. fehlenden. Gibt es eine Übersicht um einfache Schritte durchzugehen für die Optimierung? Geht um die Seite https://www.naturbote.com und läuft auf WordPress bei All-Inkls.
Hallo Marci,
eine lange Seitenladezeit kann viele Ursachen habe. Es kann an der Hostingplattform liegen – in dem Punkt kannst Du Dich gerne an unseren Support wenden, er berät Dich gerne: Telefon 0800 467 8387. Tipps zur Pagespeed-Optimierung speziell von WordPress findest Du in den folgenden Artikeln: https://www.hosteurope.de/blog/pagespeed-optimierung-fuer-wordpress-neue-tools/
oder https://www.hosteurope.de/blog/pagespeed-optimierung-fuer-wordpress/
Mit besten Grüßen
Wolf-Dieter
Hallo Marci,
ich hab auch ewig nach einer schlichten und kostenfreien! Möglichkeit gesucht, die mir anzeigt was gemacht werden muss. Hab jetzt unter https://www.rankeffect.de/kostenlose-seo-analyse/ einen kostenlosen SEO-Check gefunden, der ganz gut ist. Hat aber auch deutlich mehr Details, als nur das Thema Ladezeit im SEO Check. Bei den Ladezeiten wird aber auch das gesamte Dilemma sichtbar.
Du suchst eine kostenfreie Möglichkeit? Dann schau doch mal bei uns vorbei. Wir analysieren jeden Tag mehrere Webseiten und das ganz für umme.
Einfach hier über das Formular melden: https://www.omt.de/seo-check/
Vielen Dank für die verständlich Anleitung.
2 Sachen sind bei mir noch verbesserungswürdig:
https://www.google.com/…recaptcha_callback&hl=de&_=1536237588704 (5 Minuten)
https://ssl.google-analytics.com/ga.js (2 Stunden)
Wie kann ich auch bei diesen beiden das Browser-Caching aktivieren?
Vielen Dank für die verständlich Anleitung.
Autoankauffranken.de
Also ich benutze für meine Website: https://www.seofreelancer.ch das Plugin von WP Rocket und muss sagen das ich begeistert bin. Die Ladezeiten haben sich um ein vielfaches verbessert. Lieber zahle ich für ein anständiges Plugin mit vielen Funktionen, anstatt 2-3 kostenlose Plugins zu nutzen, die dann selbe können, aber nur die Website mit noch mehr zusätzlichen Code voll müllen.
Vielen Dank für den wichtigen Beitrag! Habe vieles davon bereits umgesetzt und die Ladezeiten zusammen mit Caching-Plugins auf unter 500 ms gebracht!
Ich habe vor Monaten low time und pagespeed Optimierungen an meiner Webseite vorgenommen und wurde Wochen später in der Suchmaschine belohnt und bin prompt 4 Plätze aufgestiegen. Ich kann bestätigen, dass es essenziell für die Suchmaschine ist, dass die Webseite schnelle Ladezeiten aufweist ( bin aktuell bei knapp 4ms ).
Überzeugt euch selber auf meine Webseite: https://www.ilovesolution.de/
Vielen Dank, ich konnte noch einiges rausholen👍👍👍
Danke für den Tipp mit „access plus 500 seconds“. Das kannte ich nicht und probiere es heute mal aus. Vielen Dank!
Danke für den aufschlussreichen und interessanten Artikel! Das Thema Browser Coaching war mir neu, klingt aber sehr interessant, vor allem für Unternehmen, die die User Experience verbessern möchten. Eine optimierte Webseite führt zu höheren Verweildauer und einer verbesserten User-Zufriedenheit. Das wiederum hat, wie im Text auch erwähnt, einen positiven Effekt für das Unternehmen: ein besseres Ranking der Webseite auf Google.
Vielen Dank für den tollen Beitrag! Habe vieles davon bereits umsetzen können 🙂
absolut richtig. Vielen Dank für die Bestätigung.
Guten Tag,
sehr gut geschrieben und vor allem super informativ! Man lernt nie aus. Besten Dank dafür!
Lieben Gruß aus Berlin
Robert
Vielen Dank, ich konnte noch einiges verbessern. Ein sehr guter Beitrag 🙂
Vielen Dank für diese informative Zusammenfassung des Themas!
Danke, war sehr hilfreich bei meiner neuen Website!
Schöne Grüße Lukas
Das sollte man so umsetzen. Nicht vergessen, *.woff-Dateien zu cachen!
Der Artikel ist jetzt schon mehr als 5 Jahre alt. In Zeiten des Internet also uralt. Und immer noch hoch aktuell!
Google Lighthouse hat bei mir die Cache Strategie bei mehreren Webseiten bemängelt. Ich habe die bei mehreren TYPO3 Projekten jetzt umgesetzt. Der Artikel war dabei eine große Hilfe, weil er Diagnose und Therapie zusammen beschreibt.
Ich weiß schon, warum ich meine Webseiten seit 11 Jahren bei HostEurope hoste!
Danke für die Arbeit!
Schnellere Ladezeiten werden immer wichtiger für Google. Gerade dann wenn man in einem starken Wettbewerb mit den Konkurrenten steht. Die Optimierung dann genau der Faktor den Google als Bonus einem zurrechnet und dann besser rankten lässt als die Mitbewerber.
Wirklich interessanter Beitrag. Und in einigen Punkten noch immer aktuell. Lighthouse wäre heute m. E. die erste Wahl für entsprechende Speed Checks. Und bei einem nginx-Server, was immer häufiger der Fall ist bzw. sein sollte, wäre es z. B. nginx.conf für die Direktiven, da die htaccess dort nicht mehr funktioniert. Vielen Dank für den Beitrag!
Danke für den Artikel. Ich habe die Erfahrung gemacht dass bei den Top Rankings die Ladezeit einen Unterschied mittlerweile macht.
Vielen Dank für den sehr informellen Artikel. Da User Experience immer wichtiger wird, ist eine schnelle Website mit exzellenter Ladezeit Pflicht heutzutage.
Danke für die Tipps!
Jemand eine Idee wieso Google Page Speed tendenziell immer schlechter wertet als z.B: Pingdom?
LG aus Wien
Thomas
Wenn nicht die verdammten unterschiedlichen Bildschirme wären, würde ich meine alte html Seite aus dem Keller holen, die war selbst zu Modem-Zeiten schnell geladen. 😉
Es wird nie langweilig, aber ein paar Basics bleiben.
Interessante Tipps! Das Browser Caching werde ich auf jeden Fall für meine Website anwenden, bin gespannt! Heutzutage, möchte ja jeder die Ladezeiten seiner Website besonders schnell machen bzw. optimieren. LG Andreas
Danke für diesen aufschlussreichen Artikel. Ich habe einiges neu gelernt und hoffe ich kann es jetzt auch anwenden.
Hervorragend geschrieben. Der Artikel hat mir wirklich wertvolle neue Erkenntnisse gebracht! 🙂
Viele Grüße.
Mit WordPress nutze ich WP Rocket, um Browser Caching zu verwenden. Es macht echt ein großer Unterschied bei Pagespeed.
Eine gute Website-Optimierung der Website und NitroPack 🙂 macht seine arbeit sehr gut