WordPress-Browser-Caching

Beschleunigen Sie Ihre WordPress-Website drastisch, indem Sie Browser-Caching nutzen, das auch als Expires-Caching bezeichnet wird.

Viele Geschwindigkeitsoptimierungs- und Testanbieter bezeichnen dies als „ Browser-Cache “, „ Leverage Browser Caching “, „ Expires Headers “, „ Cache Headers “, „ Cache-Control “ und „ Web Cache “. Wie von Google PageSpeed ​​Insights angegeben, befolgen GTMetrix und MaxCDN diese Anleitung, um es korrekt einzurichten.

Was ist Browser-Caching?

Browser-Caching ist die Methode, bei der Ihr Webserver den Browser anweist, eine Seite oder bestimmte Ressourcen für einen bestimmten Zeitraum zu speichern, damit sie nicht jedes Mal vom Server heruntergeladen werden müssen, wenn Seiten geladen werden. Dies kann eine ganze Seite und/oder Ressourcen wie JavaScript, CSS, Bilder (jpeg, png, gif usw.) und vieles mehr zwischenspeichern.

Ihre WordPress-Website wird beim ersten Mal für jeden Benutzer normal geladen, aber danach wird sie merklich schneller sein, wenn sie durch Seiten blättern und Aktionen ausführen. Die Ressourcen werden im Browser gespeichert und dadurch lokal geladen, anstatt erneut herunterzuladen.

Die Bedeutung von Browser-Caching

Letztendlich besteht der Zweck und die Bedeutung des Browser-Cachings darin , Ihre WordPress-Website für Ihre Benutzer zu beschleunigen, damit sie ein angenehmeres Erlebnis haben. Dies könnte zu erhöhtem Traffic, besseren Suchrankings und sogar verbesserten Konversionsraten für das führen, was Sie erreichen möchten.

Als zusätzlicher Bonuseffekt wird Ihr Webserver entlastet, indem nicht bei jeder Seitenladung für denselben Besucher Ressourcen heruntergeladen werden, und es spart auch Bandbreite auf Ihrem Webserver.

Der Web-Cache bietet dem Server und dem Benutzer gegenseitige Geschwindigkeit

Browser-Cache implementieren

Das Einrichten von Leverage Browser Caching auf Ihrer WordPress-Website ist eigentlich sehr schnell und einfach, aber das Setup kann je nach Setup und Webserver, den Sie verwenden, unterschiedlich sein. Standardmäßig ist WordPress am häufigsten auf einem Apache-Webserver ausgeführt, aber es gibt auch andere beliebte Webserver wie Nginx, IIS usw.

Die Verwendung eines WordPress Leverage Browser Caching Plugins vereinfacht die Implementierung.

Um es noch einfacher zu machen, gibt es mehrere WordPress-Plugins, die Browser-Caching nutzen. Wir haben das WordPress Leverage Browser Caching Ninjas Plugin verwendet, getestet und empfehlen es. Es ist ein Plugin zum Installieren und Aktivieren, das den Rest für Sie erledigt, ganz einfach.

Apache-Browser-Cache

Apache verwendet eine .htaccess -Datei für das Browser-Caching. Es sollte eine .htaccess -Datei im Stammverzeichnis Ihrer WordPress-Installation geben, und wenn keine vorhanden ist, können Sie eine erstellen und die folgenden Codezeilen ganz oben einfügen:

## EXPIRES CACHING ##
<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 text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx nutzt Browser-Caching

Wenn Sie einen Nginx-Server (En-gine-ex) betreiben, unterscheidet sich die Einrichtung von Apache oben. Sie sollten den folgenden Code zu Ihrer vhost-Konfigurationsdatei hinzufügen, die sich normalerweise unter /etc/nginx/sites-enabled/default befindet. Fügen Sie Ihrem Serverblock Folgendes hinzu:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

Lighttpd

Das Modul mod_expire wird von Lighttpd verwendet, um die Header zu steuern, die das Caching von Inhalten durch den Browser ermöglichen. Dies kann entsprechend in die Konfiguration des Kerns von Lighttpd einfließen.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Microsoft IIS nutzt Browser-Caching

Das Einrichten des Browser-Caching für IIS (Internet Information Services) ist sehr einfach.

Wählen Sie es in der Oberfläche der Administration Tools aus und rufen Sie seine Eigenschaften auf. Nachdem Sie die Registerkarte HTTP Headers ausgewählt haben, sollten Sie zwei interessante Bereiche sehen; Enable Content Expiration und Custom HTTP headers . Der erste sollte selbsterklärend sein und der zweite kann verwendet werden, um Cache-Control-Header anzuwenden.

Technik des Browser-Cachings

Die Nutzung des Browser-Caching wird durch den Webserver erreicht, indem HTTP-Header an den Browser gesendet werden, bevor der HTML-Code gesendet wird. Sie teilen dem Browser bestimmte Dinge über den HTML-Inhalt mit, der folgen wird, wie z. B. Inhaltstyp, aktuelles Datum, Serverdetails, Cache-Steuerung und -Ablauf usw.

Die Header Cache-Control , Expires und Etag geben dem Browser Cache-Anweisungen. Diese Header werden automatisch von den oben genannten Methoden erstellt, um das Browser-Caching in Apache, Nginx und IIS entsprechend zu nutzen, sodass Sie nicht auf die Details eingehen müssen, es sei denn, Sie sind interessiert.

Cache-Control-Header

Cache-Control gibt dem Browser bestimmte Anweisungen, wie z. B. wie lange der Inhalt als „frisch“ betrachtet wird, öffentlicher/privater Status des Cachings, Validierung und mehr.

Cache-Kontrolle: max-age=3600, öffentlich

(https://gist.github.com/tribulant/6309926734d3c127064c)

Läuft Kopfzeile ab

Der Expires Header stellt nur ein HTTP-Datum bereit, bis wann die Ressource zwischengespeichert werden soll und kann.

Läuft ab: Samstag, 28. November 2015 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Etag-Header

Etag wurde in HTTP 1.1 als Validierungsmethode mit einem Token eingeführt, das vom Server gesendet und vom Browser verwendet wird, um zu überprüfen, ob sich die Darstellung des Inhalts geändert hat. Bis Etag haben Browser meistens den Last-Modified Header verwendet, aber Etag ist jetzt relevanter. Die meisten Webserver generieren ohnehin sowohl Last-Modified als Etag -Header.

Etag: „pub1259380237;gz“

(https://gist.github.com/tribulant/2b542d76410bc047be00)

Die Quintessenz des Browser-Cachings

Browser-Caching ist sowohl für Sie (Ihren Webserver) als auch für Ihre Benutzer von Vorteil, da es beiden Parteien Geschwindigkeit und Leistung bietet.

Seien Sie beim Browser-Caching stark und aggressiv, Ihr Webserver ist schlau genug, um zu wissen, wann sich Ressourcen geändert haben, um aktualisierte Header zu generieren, damit Benutzer bei Bedarf neue Inhalte abrufen können. Keine Panik, dass Ihre Benutzer auf alten Inhalten hängen bleiben, das ist nicht der Fall.

Das Caching von Webbrowsern wird für WordPress-Websites dringend empfohlen, und letztendlich wird das empfohlene WordPress Leverage Browser Caching Ninjas-Plugin den Zweck erfüllen. Einfach installieren, aktivieren und fertig!