Wenn ein Besucher deine Website zum ersten Mal öffnet, lädt sein Browser jede Datei herunter, die für die Anzeige der Seite nötig ist: HTML, Stylesheets, Skripte, Bilder und Schriften. Bei einem erneuten Besuch muss der Browser nicht alle diese Dateien noch einmal herunterladen, wenn sie lokal gespeichert sind. Browser-Caching macht das möglich, und es ist eine der einfachsten Möglichkeiten, eine Website für wiederkehrende Besucher schneller wirken zu lassen.
Browser-Caching speichert Kopien von Website-Dateien auf dem Gerät des Besuchers, damit spätere Seitenaufrufe das Herunterladen unveränderter Ressourcen überspringen können. Der Server sagt dem Browser, wie lange er jede Datei behalten soll und wann er nach aktualisierten Versionen suchen soll. Wenn du verstehst, wie Browser-Caching funktioniert, erkennst du, warum sich wiederholte Besuche oft spürbar schneller anfühlen als der erste.
Wie funktioniert Browser-Caching?
Jede Datei, die dein Server sendet, enthält Cache-Anweisungen in den HTTP-Antwort-Headern. Diese Header sagen dem Browser, ob er die Datei speichern soll, wie lange er sie behalten soll und wann er eine frische Kopie anfordern soll.
Beim ersten Besuch lädt der Browser alle benötigten Dateien von deinem Server herunter und speichert zwischenspeicherbare Dateien lokal. Bei wiederholten Besuchen lädt der Browser gültige zwischengespeicherte Dateien aus dem lokalen Speicher, statt sie erneut herunterzuladen.
Welche Dateien profitieren am meisten von Browser-Caching?
Nicht jede Datei sollte gleich zwischengespeichert werden. Statische Ressourcen, die sich selten ändern, sind ideale Kandidaten. Dynamische Inhalte, die sich häufig aktualisieren, brauchen kürzere Cache-Zeiten oder gar kein Caching.
Lange Cache-Dauer
- Stylesheets und JavaScript-Dateien, die sich nur ändern, wenn du das Seitendesign aktualisierst
- Logo-Bilder, Icons und Favicons
- Schriftdateien
- Hintergrundbilder und dekorative Grafiken
Kurze Cache-Dauer oder kein Cache
- HTML-Seiten mit häufig aktualisierten Inhalten
- Seiten mit personalisierten oder dynamischen Inhalten
- API-Antworten und Endpunkte zur Formularverarbeitung
Das Grundprinzip ist einfach: Speichere offensiv zwischen, was sich selten ändert, und vorsichtig, was sich oft ändert. Der Artikel was Caching ist und warum es wichtig ist behandelt das breitere Thema Caching, einschliesslich Server-Caching und CDN-Caching.
Warum ist Browser-Caching für die Geschwindigkeit wichtig?
Browser-Caching verringert direkt die Datenmenge, die ein Besucher herunterladen muss, und die Zahl der Serveranfragen bei wiederholten Besuchen. Beides führt zu schnelleren Seitenaufrufen.
Schnellere gefühlte Ladezeit
Ein Stylesheet aus dem lokalen Speicher zu laden dauert Millisekunden. Dieselbe Datei über eine Netzwerkverbindung herunterzuladen dauert je nach Verbindungsgeschwindigkeit Hunderte Millisekunden oder mehr. Bei wiederholten Besuchern erscheinen zwischengespeicherte Ressourcen fast sofort, und die Seite fühlt sich deutlich schneller an, noch bevor neue Inhalte geladen sind.
Geringere Serverlast
Jede Datei, die aus dem Browser-Cache kommt, ist eine Anfrage weniger, die dein Server bearbeiten muss. Bei Seiten mit wiederkehrenden Besuchern verbessert das die Antwortzeiten für alle Besucher.
Bessere mobile Leistung
Mobile Verbindungen sind meist langsamer als Desktop-Verbindungen. Browser-Caching bringt mobil einen noch grösseren Geschwindigkeitsvorteil, weil es Netzwerkanfragen vermeidet, die bei schwächeren Verbindungen langsam wären. Der Artikel warum die mobile Seitengeschwindigkeit wichtig ist erklärt, warum diese Ebene für mobile Besucher besonders wichtig ist.
So geht WEMASY mit Browser-Caching um
WEMASY setzt für alle Dateitypen automatisch passende Cache-Header. Statische Ressourcen wie Stylesheets, Skripte und Bilder bekommen lange Cache-Zeiten. HTML-Seiten bekommen kürzere Zeiten, damit Inhaltsänderungen nach dem Veröffentlichen schnell erscheinen. Wenn du im Editor Änderungen machst, aktualisiert das WEMASY-System die Cache-Versionen, sodass wiederkehrende Besucher frische Inhalte bekommen, ohne dass du den Cache manuell leeren musst.
Sieh dir an, was enthalten ist, beim WEMASY Website-Builder oder wirf einen Blick auf die Tarife auf der Preisseite.
Häufig gestellte Fragen
Was ist Browser-Caching?
Browser-Caching speichert Kopien von Website-Dateien auf dem Gerät eines Besuchers, damit wiederholte Besuche schneller laden. Der Server sendet mit jeder Datei Cache-Anweisungen, die dem Browser sagen, wie lange er sie behalten soll, bevor er nach Aktualisierungen sucht. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Wie unterscheidet sich Browser-Caching von Server-Caching?
Browser-Caching speichert Dateien auf dem Gerät des Besuchers, damit seine wiederholten Besuche schneller laden. Server-Caching speichert vorgefertigte Seiten auf dem Hosting-Server, damit der Prozess zur Seitenerzeugung nicht bei jeder Anfrage läuft. Beides verkürzt die Ladezeit, setzt aber an verschiedenen Stellen der Auslieferungskette an.
Warum ist meine Website beim zweiten Besuch schnell, beim ersten aber langsam?
Beim ersten Besuch müssen alle Seitenressourcen vom Server heruntergeladen werden. Beim zweiten Besuch werden viele davon aus dem Browser-Cache geladen, was viel schneller ist. Das ist normal und zeigt, dass Browser-Caching funktioniert. Den ersten Besuch optimierst du über Bildkomprimierung, die Antwortzeit des Servers und weniger Ressourcen, die das Rendern blockieren.
Können Besucher wegen Browser-Caching alte Inhalte sehen?
Ja, wenn die Cache-Zeiten zu lang sind und der Server die Cache-Versionen nach Inhaltsänderungen nicht aktualisiert. Gut verwaltete Plattformen übernehmen das automatisch, indem sie Cache-Kennungen aktualisieren, wenn du Änderungen veröffentlichst. Besucher bekommen dann bei ihrem nächsten Besuch frische Dateien, ohne ihren Browser-Cache manuell leeren zu müssen.
Sollte ich meinen Browser-Cache leeren, um meine Website zu testen?
Den Browser-Cache zu leeren ist nützlich, wenn du testest, ob aktuelle Änderungen richtig erscheinen. Es simuliert das Erlebnis eines Erstbesuchers. Für das normale Surfen auf deiner eigenen Seite ist das Leeren nicht nötig. Nutze ein privates oder Inkognito-Fenster, um zu testen, ohne deine normalen zwischengespeicherten Dateien zu beeinflussen.
Muss ich Browser-Caching selbst konfigurieren?
Auf einer verwalteten Website-Plattform werden Cache-Header automatisch je nach Dateityp konfiguriert. Bei selbst verwaltetem Hosting erfordert die Cache-Konfiguration Servereinstellungen oder Caching-Erweiterungen. WEMASY übernimmt die gesamte Browser-Caching-Konfiguration, ohne dass du technisch etwas einrichten musst.