So nutzen Sie das Browser-Caching in WordPress (mit Video)

Zuletzt aktualisiert - 8. Juli 2021

Wenn Sie eine WordPress-Website besitzen oder betreiben, möchten Sie die Art und Weise, wie sie aussieht und funktioniert, ständig verbessern. Je mehr Plugins, Seitenersteller und Inhaltselemente Sie verwenden, desto langsamer wird Ihre Website jedoch.

Und eine langsam ladende Website ist eine große Abschreckung für Besucher, unabhängig davon, wie gut Ihre Website aussieht oder wie wichtig sie für ihre Arbeit ist.

Aus diesem Grund müssen Sie für die Verwaltung einer WordPress-Website alle verfügbaren Website-Leistungskennzahlen verwenden . Und eine wichtige Maßnahme, die es wert ist, genutzt zu werden, ist die Nutzung des Browser-Cachings.

In diesem Artikel erfahren Sie, was es bedeutet und wie Sie das Browser-Caching in WordPress nutzen können.

Was ist Browser-Caching?

Immer wenn ein Benutzer auf Ihre Website zugreift, müssen Ressourcen wie Bilder, JavaScript, CSS und andere vom Server auf seinen Computer hochgeladen werden. Dies bedeutet, dass der Benutzer zwischen nachfolgenden Seiten und Websitebesuchen wiederholt dieselben Ressourcen laden muss.

Geben Sie ein: Caching.

Caching gibt den Zeitraum an, für den Browser die auf der Website verfügbaren cachefähigen Ressourcen lokal speichern. Wenn ein Benutzer die Webseite anfordert, werden die Informationen sofort von seinem Computer abgerufen.

Auf diese Weise können Sie das Browser-Caching in WordPress nutzen, um eine schnellere Website-Leistung bereitzustellen.

Sie können Tools wie Google PageSpeed ​​Insights und GTmetrix verwenden , um zu testen, ob Ihre Website bereits Browser-Caching nutzt.

Fügen Sie einfach die URL Ihrer Website in das dafür vorgesehene Feld ein und klicken Sie auf „Analysieren“. Das Tool gibt Ihrer Website eine Punktzahl zwischen 0 und 100 bei PageSpeed ​​und eine alphabetische Note bei GTmetrix.

Das Tool liefert Ihnen auch Vorschläge zur Verbesserung der Leistung Ihrer Website. Ein häufiger Vorschlag ist, sich für die Nutzung des Browser-Caching in WordPress zu entscheiden. Wenn Sie diesen Vorschlag erhalten, gibt es zwei Möglichkeiten, dies zu tun.

Browser-Caching in WordPress manuell nutzen

Sie können das Browser-Caching in WordPress manuell nutzen, indem Sie der .htaccess-Datei ein wenig Code hinzufügen. Tatsächlich müssen Sie drei Codeteile für drei verschiedene Zwecke hinzufügen:

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

Um diesen Code hinzuzufügen, müssen Sie auf Ihre Website-Dateien zugreifen, was Sie tun können, indem Sie sich bei Ihrem Hosting-Konto oder cPanel anmelden. Sie müssen zum Dateimanager und zur Option „Versteckte Dateien aktivieren“ in den Einstellungen der Website navigieren.

Die .htaccess-Datei finden Sie dann im Ordner public_html. Klicken Sie mit der rechten Maustaste auf die Datei und bearbeiten Sie sie, um den unten angegebenen Code hinzuzufügen.

1. Fügen Sie den Browser-Caching-Code hinzu

Kopieren Sie den folgenden Code und fügen Sie ihn am Ende des Inhalts der .htaccess-Datei ein. Nehmen Sie keine weiteren Änderungen in der Datei vor.

 #Ablauf-Cache-Start anpassen - Passen Sie den Zeitraum Ihren Bedürfnissen an
<IfModule mod_expires.c>
FileETag MTime-Größe
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 "Zugriff 600 Sekunden"
ExpiresByType application/xhtml+xml "Zugriff 600 Sekunden"
ExpiresByType text/css "Zugriff 1 Monat"
ExpiresByType Text/Javascript „Zugriff 1 Monat“
ExpiresByType text/x-javascript "Zugriff 1 Monat"
ExpiresByType Anwendung/Javascript „Zugriff 1 Monat“
ExpiresByType application/x-javascript „Zugriff 1 Monat“
ExpiresByType application/x-shockwave-flash „Zugriff 1 Monat“
ExpiresByType application/pdf "Zugriff 1 Monat"
ExpiresByType Bild/x-Symbol „Zugriff 1 Jahr“
ExpiresByType image/jpg "Zugriff 1 Jahr"
ExpiresByType image/jpeg „Zugriff 1 Jahr“
ExpiresByType image/png "Zugriff 1 Jahr"
ExpiresByType image/gif "Zugriff 1 Jahr"
ExpiresDefault "Zugriff 1 Monat"

</WennModul>
#Läuft Cache-Ende ab

Der obige Code weist den Browser an, eine zwischengespeicherte Version der Seite bereitzustellen, anstatt eine neue Version herunterzuladen.

Die Einstellungen umfassen auch die folgenden Aktualisierungs-/Ablaufzeiten:

• 600 Sekunden für HTML
• Ein Monat CSS und JavaScript
• Ein Jahr für Bilder

Diese Ablauffristen stellen sicher, dass Besucher bestimmte Ressourcen nicht zu oft herunterladen müssen. Sie können die Ablaufzeiten jedoch bei Bedarf einfach bearbeiten.

2. Cache-Control-Header hinzufügen (Apache)

Wir müssen Cache Control-Header hinzufügen, um Browser-Caching-Richtlinien festzulegen, wie eine Ressource zwischengespeichert wird, wo sie zwischengespeichert wird und das maximale Alter vor dem Ablaufen. Wir haben jedoch oben bereits Ablaufzeiten angegeben, sodass wir sie hier nicht wiederholen müssen.

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

 # BEGIN Cache-Control-Header

<IfModule mod_expires.c>
<IfModul mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header-Anhang Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header-Anhang Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header anhängen Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header-Anhang Cache-Control "private, must-revalidate"
</filesMatch>
</WennModul>
</WennModul>

3. Deaktivieren Sie ETags

Wir werden E-Tags deaktivieren, um Browser zu zwingen, sich auf die Cache-Steuerung zu verlassen und Header ablaufen zu lassen, anstatt Dateien zu validieren. Hier ist der Code:

 <IfModul mod_headers.c>
Header unset ETag
</WennModul>
FileETag Keine

Browser-Caching für NGINX-Server

Sie können die .htaccess-Datei nicht finden, wenn Ihre Website NGINX verwendet. Gehen Sie in diesem Fall zu /etc/nginx/sites-enabled/default und fügen Sie den folgenden Code ein:

 Server {
höre 80;
Servername lokaler Host;
Lage / {
root /usr/share/nginx/html;
index index.html index.htm;
}
Standort ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
läuft 365d ab;
}
Standort ~* \.(pdf)$ {
läuft am 30. Tag ab;
}
}
Cache-Control-Header hinzufügen (NGINX)
Standort ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
läuft 90d ab;
add_header Cache-Control "public, no-transform";
}

Speichern Sie nach dem Bearbeiten von NGINX die Datei, um das Browser-Caching auf dem NGINX-Server zu nutzen.

Nutzen Sie das Browser-Caching in WordPress mithilfe von Plugins

Das Bearbeiten der .htaccess-Datei kann in der Tat ziemlich riskant sein, da ein einziger Fehler Ihre gesamte Website beschädigen kann. Wer also kein unnötiges Risiko eingehen möchte, kann auf Plugins wie W3 Total Cache und WP Fastest Cache zurückgreifen .

So können Sie das Browser-Caching mit dem W3 Total Cache-Plugin nutzen, einem der besten für diesen Job.

Gehen Sie nach der Installation des Plugins zu seiner Einstellungsseite. Stellen Sie hier sicher, dass der Browser-Cache aktiviert ist. Gehen Sie als Nächstes zu den Browser-Cache-Einstellungen in der Seitenleiste. Stellen Sie außerdem sicher, dass die Optionen „Expires Header“, „Cache Control Header“ und „E-Tag festlegen“ aktiviert sind.

Speichern Sie die Einstellungen, wenn Sie Änderungen vorgenommen haben.

Damit haben Sie das Browser-Caching erfolgreich auf Ihrer WordPress-Website genutzt. Sie können sicherstellen, dass es aktiviert ist, indem Sie das Insights- oder GTmetrix-Tool erneut verwenden.

Wenn Sie eine Videoversion bevorzugen, sehen Sie sich das folgende Video an:

Weiterlesen:

• Die besten kostenlosen WordPress-Datenbankoptimierungs-Plugins im Jahr 2021
• Wie aktiviere ich die GZIP-Komprimierung auf der WordPress-Site?