Wie nutzt man das Browser-Caching in WordPress?

Veröffentlicht: 2022-06-25

In diesem Tutorial lernen wir, wie Sie das Browser-Caching in WordPress nutzen, um Ihre Website zu beschleunigen.

Es gibt eine Reihe von Möglichkeiten, WordPress-Websites im Allgemeinen zu beschleunigen, aber bei der Analyse der Website-Geschwindigkeitsoptimierung ist das Browser-Caching das am häufigsten entdeckte Problem.

Sie können eine Vielzahl von Internet-Tools verwenden, darunter Google PageSpeed ​​Insights, GTMetrix und Pingdom, um die Geschwindigkeit Ihrer Website zu verfolgen und zu testen. Sie liefern Ihnen präzise Erkenntnisse und zeigen Ihnen, wo an Ihrer Website gearbeitet werden muss. Möglicherweise haben Sie die Warnung „Leverage Browser Caching“ gesehen, als Sie die Geschwindigkeit der Website bewertet haben.

Sie können auch lesen: Stellen Sie statische Assets mit einer effizienten Cache-Richtlinie bereit

Inhaltsverzeichnis

Was ist Leverage Browser Caching?

Caching ist die Zeitspanne, für die Browser die zwischenspeicherbaren Ressourcen einer Website auf ihren lokalen Systemen aufbewahren.

Bilder, JavaScript, CSS und andere Ressourcen gehören dazu. Die cachefähigen Materialien, die auf Ihrem Computer gespeichert sind, werden jedes Mal wieder hochgeladen, wenn jemand die Website sieht. Dadurch erhöht sich die Ladegeschwindigkeit der Website spürbar. Aus diesem Grund möchten die Leute Browser-Caching in WordPress verwenden.

Wie funktioniert Browser-Caching in WordPress?

Immer wenn ein Benutzer eine bestimmte Domäne betritt, laufen zahlreiche Prozesse im Hintergrund.

Ihre WordPress-Website wird durch alles sichtbar, was dem Browser des Benutzers mitgeteilt wird. Zu diesen Website-Elementen gehören Skripte, Grafiken, Stylesheets, Inhalte und mehr. Sie müssen ggf. vom Server der Website an den Browser des Nutzers übertragen werden. Im Folgenden sind die Schritte in diesem Prozess aufgeführt:

  1. Eine URL wird in den Browser des Besuchers eingegeben.
  2. Der Browser stellt eine Anfrage an den Server, der Ihre Website hostet (die HTTP-Anfrage).
  3. Der Benutzer erhält die Daten, nachdem sie vom Server zusammengestellt wurden. Benutzer beginnen an diesem Punkt eine Verlangsamung zu bemerken. Benutzer können die Größe der Skripte minimieren, die Bildgrößen optimieren und andere Maßnahmen ergreifen, um diese Langsamkeit zu stoppen.
  4. Der Browser kann nun nach der Übertragung der Daten endlich die Website anzeigen. Wenn Benutzer auf andere Seiten zugreifen, wird der Vorgang wiederholt. Eine geringe Leistung kann dadurch verursacht werden, dass der Server eine große Anzahl von Anfragen auf einmal erhält. Die Leute müssen daher ihre Websites optimieren, um ihre Geschwindigkeit beizubehalten.
Nutzen Sie das Browser-Caching in WordPress

Sowohl Webbrowser als auch Softwareprogramme verwenden zwischengespeicherte Inhalte. Es wird vorübergehend auf Ihrer lokalen Festplatte gespeichert. Der Begriff „Web Cache“ oder „HTTP Cache“ bezieht sich auf diese Daten. Der Browser lädt die Daten von Ihrem Computer hoch und lädt den Inhalt der Website jedes Mal herunter, wenn Sie dieselbe Website besuchen.

Sie müssen ein bestimmtes Tool verwenden, um festzustellen, ob Ihre WordPress-Website das Browser-Caching effektiv nutzt.

Unterschied zwischen Browser-Caching und Server-Caching

Um Last und Latenz auf Webservern zu reduzieren, erfordert serverseitiges Web-Caching (für serverseitiges Caching empfehlen wir immer LiteSpeed ​​Cache für WordPress) häufig die Verwendung eines Web-Proxys, der Web-Antworten von den Webservern speichert, vor denen er steht. Clientseitiges Web-Caching kann auch browserbasiertes Caching umfassen, das eine zwischengespeicherte Kopie von zuvor aufgerufenen Webinhalten speichert.

Bei diesem Verfahren wird der Webserver verwendet, um zwischengespeicherte Webseiten für Ihre Website zu erstellen. Die oben genannten Aktionen sind ein Beispiel für das Caching von Webseiten, das hauptsächlich serverseitig ist.

Sie können das Server-Caching-System auf verschiedene Arten verbessern. Die beste Wahl wäre, die Header von Apache zu aktualisieren. Der nächste Schritt wäre die Verwendung von WordPress-Plugins, und dann würde das CDN hinzugefügt.

Methode 1: Browser-Caching in WordPress manuell nutzen

Hinweis: Diese Methode funktioniert nur mit LiteSpeed ​​Enterprise oder Apache.

Indem Sie Code in die .htaccess-Datei einfügen, können Sie das Browser-Caching in WordPress manuell nutzen. Für drei unterschiedliche Ziele müssen Sie tatsächlich drei Codebits hinzufügen:

  1. Expires-Header hinzufügen
  2. Fügen Sie Cache-Control-Header hinzu
  3. Deaktivieren Sie ETags

Sie müssen Zugriff auf Ihre Website-Dateien haben, um diesen Code hinzuzufügen, was Sie erreichen können, indem Sie sich bei Ihrem Hosting-Konto oder CyberPanel anmelden.

Gehen Sie zu Ihrem CyberPanel- Dashboard

Klicken Sie im Menü auf der linken Seite auf WordPress -> WordPress auflisten

Sie gelangen in die Liste der WordPress-Websites . Klicken Sie von hier aus auf den Titel Ihrer WordPress-Site

Dies ist Ihr CyberPanel WordPress Manager . Klicken Sie auf Dateimanager.

In public_html finden Sie . htaccess -Datei. Beachten Sie, dass htaccess-Regeln nur von LiteSpeed ​​Enterprise unterstützt werden. Es wird von OpenLite Speed ​​nicht unterstützt. Klicken Sie mit der rechten Maustaste darauf und klicken Sie auf CodeMirror

Fügen Sie den folgenden Code am Ende der . htaccess -Datei durch Kopieren und Einfügen. Ändern Sie die Datei nicht auf andere Weise.

 #Customize expires cache start - adjust the period according to your needs <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 text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end

Der oben genannte Code weist den Browser an, eine zwischengespeicherte Kopie der statischen Ressourcen bereitzustellen, anstatt eine neue herunterzuladen.

Die Aktualisierungs-/Ablaufzeiten sind auch in den Einstellungen enthalten:

HTML dauert 600 Sekunden.
JavaScript und CSS für einen Monat
Für Bilder ein Jahr

Besucher müssen bestimmte Ressourcen dank ihres Ablaufdatums nicht allzu häufig herunterladen. Bei Bedarf können Sie die Ablaufzeiten schnell ändern.

Um Browser-Caching-Richtlinien festzulegen, wie eine Ressource zwischengespeichert wird, wo sie zwischengespeichert wird und das maximale Alter vor dem Ablaufen, müssen wir Cache Control-Header einschließen. Wir müssen die Ablaufzeiten nicht wiederholen, da wir sie bereits früher erwähnt haben.

den folgenden Code und fügen Sie ihn dann ein:

 # BEGIN Cache-Control Headers <IfModule mod_expires.c> <IfModule mod_headers.c> <filesMatch "\.(ico|jpe?g|png|gif|swf)$"> 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>

E-Tags werden deaktiviert, sodass Browser Expires-Header und Cache-Steuerung verwenden müssen, anstatt Dateien zu überprüfen. Hier ist der Schlüssel:

 Turn Etags off <IfModule mod_headers.c> Header unset ETag </IfModule> FileETag None

Wenn Sie fertig sind, klicken Sie auf Speichern .

Methode 2: Browser-Caching in WordPress mithilfe von Plugins nutzen

Ein einziger Fehler kann Ihre Website vollständig ruinieren, daher kann das Bearbeiten der .htaccess-Datei ziemlich gefährlich sein. Daher können Sie Plugins wie W3 Total Cache verwenden, wenn Sie kein unnötiges Risiko eingehen möchten.

W3 Total Cache-Plugin

So verwenden Sie W3 Total Cache, eines der besten Plugins für diesen Zweck, um das Browser-Caching zu nutzen.

Geben Sie Ihr WordPress-Dashboard ein

Klicken Sie im Menü auf der linken Seite auf Plugins -> Neu hinzufügen

Suchen Sie nach W3 Total Cache . Installieren und aktivieren Sie nun dieses Plugin

Die Registerkarte „ Leistung “ wird im Menü auf der linken Seite angezeigt. Klicken Sie im Menü auf der linken Seite auf Leistung -> Allgemeine Einstellungen

Scrollen Sie nach unten zum Browser-Cache und vergewissern Sie sich, dass er aktiviert ist, und speichern Sie die Änderungen

Klicken Sie nun im Menü auf der linken Seite auf Leistung -> Browser-Cache

Stelle sicher das

  1. Verfall-Header festlegen
  2. Cache-Steuerung festlegen
  3. Entity-Tag festlegen

sind aktiviert. Speichern Sie alle Änderungen.

LiteSpeed-Cache-Plugin

CyberPanel gibt jedem Benutzer LiteSpeed ​​Cache standardmäßig mit jeder WordPress-Site-Bereitstellung. Wenn Sie CyberPanel nicht verwenden, können Sie es hier herunterladen.

Durch einfaches Aktivieren der Funktion können Sie mit dem Caching-Plugin LiteSpeed ​​Cache das Browser-Caching nutzen.

Gehen Sie in Ihr WordPress-Dashboard

Klicken Sie im Menü auf der linken Seite auf LiteSpeed ​​Cache -> Cache

Klicken Sie in der oberen Leiste auf die Registerkarte Browser

Stellen Sie sicher, dass der Browser-Cache aktiviert ist, und klicken Sie auf Änderungen speichern

Fazit

Denken Sie daran, dass Sie manchmal nach der Installation eines Plugins die Änderungen, die Sie vornehmen, nicht sofort bemerken werden. Schuld an dieser Verzögerung ist die CSS/Stylesheet-Datei. Sie können die von Ihnen vorgenommenen Änderungen aufgrund des Browser-Cache, den Sie bereits auf Ihrem Computer gespeichert haben, nicht anzeigen. Es wird empfohlen, die Inkognito-Funktion Ihres Browsers zu verwenden, um die Website anzuzeigen, um sie nach mehreren Änderungen korrekt anzuzeigen. Sie verbrauchen keine Cache-Ressourcen, wenn Sie diese Funktion verwenden, und Sie sollten die Änderungen deutlich erkennen können.

Der von Ihnen gewählte Ansatz zur Nutzung des Browser-Cachings ist letztendlich irrelevant. Es zählt nur das Beobachten in Aktion. Die Methode, mit der Sie dorthin gelangt sind, ist irrelevant, solange Leverage Browser Caching in WordPress wie vorgesehen funktioniert. Es gibt keinen richtigen oder falschen Ansatz; das Ergebnis wird das gleiche sein, unabhängig von Ihrer Wahl. Die Nutzung des Browser-Caching verbessert die Ladezeiten, unabhängig davon, ob Sie Änderungen an der .htaccess-Datei vornehmen oder ein Plugin verwenden.