Lädt Ihre Website langsam? Pagespeed ist ein wichtiger Aspekt der User Experience. Die Ladezeit der angeforderten Seite im Browser Ihres Benutzers hat großen Einfluss darauf, ob er auf Ihrer Website bleibt, beispielsweise um einen Verkauf abzuschließen.
Die Ladezeit der Seite hängt von vielen Faktoren ab – Browser-Caching ist einer davon. In diesem Tutorial besprechen wir, wie Sie das „Browser-Caching“ in WordPress beheben können. Dies ist ein bekannter Tipp zur Leistungsoptimierung, der von vielen Analysetools für die Seitengeschwindigkeit empfohlen wird.
Zuerst untersuchen wir, was Browser-Caching ist und wie es dabei helfen kann, Ihre Website zu beschleunigen. Dann behandeln wir, wie Sie beurteilen können, ob eine WordPress-Site Browser-Caching benötigt. Schließlich werden wir uns verschiedene Möglichkeiten ansehen, um das Browser-Caching in WordPress zu beheben – mit und ohne Verwendung eines Plugins.
Was ist Browser-Caching?
Ein Cache ist ein temporärer Speicherplatz. Wenn ein Besucher eine Seite auf Ihrer Website anfordert, sammelt Ihr Server die erforderlichen Informationen aus der Datenbank, organisiert sie in einem HTML-Dokument und liefert sie an den Browser. Der Browser analysiert dieses Dokument und lädt alle relevanten Ressourcen herunter, um die Seite anzuzeigen.
Caching ist der Vorgang, bei dem ein Teil der Nutzlast der Seite in einem Cache gespeichert wird, um nachfolgende Seitenladevorgänge zu beschleunigen. Ein Cache kann entweder auf dem Server oder dem Gerät des Besuchers vorhanden sein.
Im Server-Cache können Sie die Ergebnisse von Datenbankabfragen und/oder die statische HTML-Antwort für die angeforderte Seite speichern.
Browser-Caching ist der Vorgang, bei dem ein temporärer Speicher auf dem Gerät des Besuchers verwendet wird, um Ressourcen wie Stylesheets, Skripte und Bilder für einen bestimmten Zeitraum zu speichern.
Bei nachfolgenden Besuchen einer Seite lädt der Browser immer wieder dieselben Ressourcen herunter – jedes Mal, wenn der Benutzer die Seite anfordert. Da diese statischen Ressourcen einen erheblichen Teil der Nutzlast einer WordPress-Site ausmachen, verkürzt Browser-Caching die Seitenladezeiten.
Benötigen Sie Browser-Caching?
Ein Website-Audit zur Ressourcengrößenverteilung Ihrer Nutzlast zeigt im Allgemeinen, wie groß Ihre Ressourcen sind und wie viele Anfragen ein Browser senden muss, um sie herunterzuladen, bevor Ihre Seite angezeigt wird. Wenn Sie feststellen, dass ein erheblicher Teil Ihrer Webseite aus statischen Dateien besteht, sollten Sie das Browser-Caching untersuchen, um die Seitengeschwindigkeit zu verbessern.
Eine einfachere Möglichkeit, festzustellen, ob Sie Browser-Caching benötigen, ist die Verwendung eines Tools zum Testen der Seitengeschwindigkeit wie z GTmetrix. Geben Sie einfach die URL Ihrer Website ein, um einen ausführlichen Test zu starten. Die Testergebnisse zeigen Ihnen, wie Sie Ihre Website beschleunigen können. Wie Sie vielleicht bemerken, wird im Ergebnisbereich häufig empfohlen, das Browser-Caching zu nutzen.
Alternativ können Sie Mit Google denken, ein Tool zum Testen der mobilen Seitengeschwindigkeit, mit dem Sie Ihre Website auf Mobilgeräten bewerten können. Eine wichtige Empfehlung dieses Tools besteht darin, Browser-Caching für Ihre Website zu nutzen.
PageSpeed-Einblicke, ein weiteres Tool von Google zum Testen der Seitengeschwindigkeit Ihrer Website, empfiehlt Ihnen möglicherweise, eine effektive Cache-Richtlinie zu erstellen, um die Seitengeschwindigkeit zu verbessern. Browser-Caching ist ein wichtiger Bestandteil einer effektiven Cache-Richtlinie.
Fix Leverage Browser Caching in WordPress ohne Plugin
Wenn Sie kein Plugin verwenden möchten, können Sie Ihre Webserver-Einstellungen optimieren, um das Browser-Caching zu nutzen. In diesem Fall weist Ihr Webserver den Browser des Besuchers an, bestimmte Ressourcen im Browser-Cache zu speichern. Der Browser speichert diese Dateien für einen bestimmten Zeitraum lokal und verwendet sie bei nachfolgenden Seitenaufrufen.
Der Vorgang zum Einrichten Ihres Webservers, um die Browser Ihrer Besucher anzuweisen, mit dem Caching zu beginnen, variiert von Server zu Server. In diesem Beitrag erfahren Sie, wie Sie das Browser-Caching in den beiden beliebtesten Webservern Apache und Nginx aktivieren.
Sie können das Browser-Caching beheben, indem Sie die folgenden Schritte ausführen:
- Expires-Header hinzufügen – Diese Header teilen dem Browser mit, wann er eine neue Version einer Ressource vom Server anfordern soll.
- Ändern von Cache-Control-Headern – Sie können diese Header verwenden, um Ihre Cache-bezogenen Richtlinien festzulegen.
- Header von Entity-Tags (ETags) setzen – Sie können feststellen, ob sich eine Ressource auf Ihrem Server im Vergleich zur lokalen Datei geändert hat.
Beheben Sie das Browser-Caching in Apache
1. Erstellen oder suchen Sie die .htaccess-Datei
Auf einem Apache-Server können Sie alle notwendigen Parameter im .htaccess-Datei. Mit diesen Dateien können Sie die Apache-Einstellungen manuell konfigurieren. Sie sind reine Textdateien, die Apache-Parameter speichern und Berechtigungen und Konfigurationen für das Verzeichnis festlegen, in dem sie sich befinden.
Wenn Sie eine .htaccess-Datei im Stammverzeichnis Ihrer Website ablegen, gilt diese für alle Seiten Ihrer Website. Sie können auch eine andere .htaccess-Datei in einem Ihrer Unterverzeichnisse ablegen, um Berechtigungen nur für diesen Speicherort festzulegen. Beachten Sie, dass .htaccess-Dateien auf niedrigerer Ebene die Einstellungen von .htaccess-Dateien in übergeordneten Verzeichnissen überschreiben.
Wenn Sie Terminalzugriff auf Ihren Server haben, können Sie sich remote anmelden, um eine .htaccess-Datei am entsprechenden Ort zu erstellen (für Browser-Caching-Regeln auf Site-Ebene sollte dies Ihr Stammordner sein).
Wenn Sie alternativ den Dateimanager in cPanel verwenden, navigieren Sie zum gewünschten Speicherort und erstellen Sie eine .htaccess-Datei.
Wenn Sie bereits über eine .htaccess-Datei verfügen, können Sie dieser einfach die neuen Browser-Caching-Regeln hinzufügen.
2. Hinzufügen von Expires-Headern
Die erste Einstellung in der .htaccess-Datei ist die Aktivierung des Läuft Kopfzeilen ab Besonderheit. Fügen Sie der Datei die folgende Zeile hinzu:
ExpiresActive On
Als Nächstes können Sie die Zeit für verschiedene Arten von Textdateien mit der unten gezeigten Syntax einstellen:
ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month"
Um eine Ablaufzeit für Bilder festzulegen, verwenden Sie die image
tippe statt text
gefolgt von einem Schrägstrich und der Bilderweiterung.
ExpiresByType image/jpeg "access 1 month" ExpiresByType image/svg "access 1 month"
Um die Ablaufzeit für Anwendungen einzustellen, verwenden Sie die application
Dateityp und geben Sie die Dateierweiterung an.
ExpiresByType application/pdf "access 1 month"
Um eine andere Datei abzudecken, für die keine bestimmten Einstellungen gelten, verwenden Sie die ExpiresDefault
Stichwort:
ExpiresDefault "access 1 month"
3. Definieren Sie eine Cache-Richtlinie
Als Nächstes müssen Sie Ihre Cache-Richtlinie mithilfe der Cache-Control-Einstellungen definieren.
Es gibt drei Hauptteile einer Cache-Richtlinie:
- wie eine Ressource zwischengespeichert wird
- der Ort des Cachings
- das Alter der Ressource, bevor sie abläuft
Ein öffentlicher Cache weist den Browser an, dass Ressourcen überall zwischengespeichert werden können, während ein privater Cache die Speicherung nur auf dem Gerät des Clients zulässt.
Beispielsweise sollte die Profilseite eines angemeldeten Benutzers nur auf dem Gerät des Clients zwischengespeichert werden.
Andererseits kann die Homepage eines Blogs auch auf einem CDN zwischengespeichert werden. Sie können eine öffentliche Cache-Richtlinie festlegen, indem Sie die folgende Regel hinzufügen:
<IfModule mod_headers.c> Header set Cache-Control "public" </IfModule>
Sie können auch unterschiedliche Richtlinien für verschiedene Dateitypen angeben, indem Sie dem Header-Modul die folgenden Filter hinzufügen:
<ifModule mod_headers.c> <filesMatch ".(ico|jpeg|jpg|png)$"> Header set Cache-Control "public" </filesMatch> <filesMatch ".(php)$"> Header set Cache-Control "private" </filesMatch> </ifModule>
Der obige Code gibt an, dass der Browser Bilddateien überall speichern kann, aber PHP-Dateien müssen auf dem Gerät des Clients gespeichert werden.
Sie können jedem auch eine Ablaufeinstellung hinzufügen filesMatch
Regel. Sie müssen die Ablaufzeit in Sekunden definieren. Wenn Sie ihn beispielsweise auf Null setzen, muss der Browser die Datei jedes Mal anfordern, wenn die Seite geladen wird:
Header set Expires 0
4. Deaktivieren Sie Entity-Tags in Apache
Schließlich müssen Sie deaktivieren Entity-Tags indem Sie den folgenden Code verwenden:
FileETag None
Das Deaktivieren von ETags zwingt den Browser, sich auf Ihre Cache-Richtlinie zu verlassen und zu vermeiden, dass Dateien jedes Mal erneut überprüft werden, wenn eine Seite geladen wird.
Speichern Sie die .htaccess-Datei und starten Sie Apache neu, damit die Änderungen wirksam werden.
Beheben Sie das Browser-Caching in Nginx
In Nginx finden Sie die Konfigurationsdatei nginx.conf im Verzeichnis /etc/nginx/sites-enabled/default.
Mit dem folgenden Code können Sie bestimmten Dateitypen einen Expires-Header hinzufügen:
location ~* .(ico|jpeg|jpg|png)$ { expires 30d; }
Sie können demselben Codeblock auch einen Cache-Control-Header hinzufügen:
location ~* .(ico|jpeg|jpg|png)$ { expires 30d; add_header Cache-Control "public"; }
Speichern Sie die Konfigurationsdatei und starten Sie Nginx neu, damit die Änderungen wirksam werden.
Beheben Sie Browser-Caching mit einem Plugin
Wenn Sie ein WordPress-Caching-Plugin verwenden, unterstützt es möglicherweise bereits Browser-Caching.
Lassen Sie uns nun untersuchen, wie Sie das Browser-Caching mit einigen beliebten Caching-Plugins beheben können.
1. LiteSpeed-Cache
LiteSpeed-Cache ist ein Caching-Plugin, mit dem Sie das Browser-Caching beheben können, indem Sie einfach die Funktion aktivieren. Installieren und aktivieren Sie das Plugin und gehen Sie zu den Cache-Einstellungen. Navigieren Sie zum Browser Registerkarte und aktivieren Sie die Browser-Cache Möglichkeit.
Außerdem können Sie die Ablaufzeit einstellen. Beachten Sie jedoch, dass diese Einstellung für alle zwischengespeicherten Dateien auf Ihrer Website gilt.
2. WP Schnellster Cache
WP Schnellster Cache ist ein weiteres Caching-Plugin für WordPress mit einfachen Anpassungsoptionen. In der kostenlosen Version können Sie das Browser-Caching aktivieren. Gehen Sie zur Einstellungsseite und aktivieren Sie das Kontrollkästchen für Browser-Caching, wie oben gezeigt.
3. W3 Gesamtcache
W3 Gesamtcache ist auch ein beliebtes WordPress-Caching-Plugin. Es ermöglicht Ihnen, eine gute Auswahl an Caching-Optionen anzupassen. Sobald Sie es installiert haben, gehen Sie zum Browser-Cache Abschnitt auf der Einstellungsseite.
Mit diesem Plugin können Sie Berechtigungen für eine Reihe von Dateikategorien wie Bilder, Skripte und Stylesheets festlegen. Für jede Kategorie können Sie Expires-Header, Expires-Lebensdauer und ETags festlegen.
Einpacken
In diesem Tutorial haben wir die Bedeutung der Seitengeschwindigkeit untersucht und warum Sie das Browser-Caching in WordPress möglicherweise beheben möchten.
Wir haben Tools zur Bewertung der Seitengeschwindigkeit behandelt, die Ihnen sagen, ob Ihre WordPress-Site Browser-Caching benötigt. Als Nächstes haben wir besprochen, wie Sie Ihren Webserver so konfigurieren können, dass Browser-Caching ohne Verwendung eines Plugins aktiviert wird. Schließlich haben wir uns drei beliebte Plugins angesehen, mit denen Sie das Browser-Caching in WordPress beheben können.
Haben Sie Fragen, wie Sie das Browser-Caching in WordPress beheben können? Wenn ja, fragen Sie bitte in den Kommentaren unten nach.