Lukas G.Hinweis: Der folgende Artikel hilft Ihnen dabei: So bedienen Sie Assets mit einer effizienten Cache-Pol…
Haben Sie sich jemals gefragt, warum sich Ihre WordPress-Site trotz aller Bemühungen träge anfühlt? Das Geheimnis könnte darin liegen, wie Sie Ihr Vermögen verwalten.
Wenn Browser Dateien wie Bilder, CSS und JavaScript nicht effizient speichern und abrufen, kann dies zu unnötigen Verzögerungen und einer mangelhaften Benutzererfahrung führen. Deshalb benötigen wir effizientes Caching, um Ihre Website zu beschleunigen und ein nahtloses Benutzererlebnis zu bieten.
Klar, Caching kann sich wie ein technisches Labyrinth anfühlen, aber was wäre, wenn wir Ihnen sagen würden, dass es einen einfachen Weg dorthin gibt?
In diesem Leitfaden führen wir Sie durch die wesentlichen Schritte, um Assets mit einer effizienten Cache-Richtlinie in WordPress bereitzustellen.
Also, fangen wir an.
Statische Assets und Caching verstehen
Statische Assets und Caching sind zwei zentrale Aspekte der Webentwicklung zur Verbesserung der Website-Leistung, Ladezeiten und Benutzererfahrung. Tatsächlich kann das Leeren des Caches Ihrer Website eine sofortige Leistungssteigerung bescheren. Sehen Sie sich unseren Leitfaden an, um zu erfahren, „wie Sie Ihren WordPress-Cache effektiv leeren“.
Durch die ordnungsgemäße Verwaltung statischer Assets und die Implementierung effektiver Caching-Strategien können Websites Inhalte effizienter bereitstellen und so zur allgemeinen Benutzerzufriedenheit und zum SEO-Ranking beitragen.
Lassen Sie uns beide genauer verstehen.
Was sind statische Vermögenswerte?
Statische Assets sind Dateien wie Bilder, CSS-Stylesheets und JavaScript-Skripte, die im Laufe der Zeit unverändert bleiben. Diese Dateien sind für die visuellen und funktionalen Aspekte einer Website von entscheidender Bedeutung und werden genau so an die Browser der Benutzer übermittelt, wie sie auf dem Server gespeichert sind.
Was ist Caching?
Beim Caching handelt es sich um eine Technik, mit der Kopien von Dateien oder Daten an einem temporären Speicherort gespeichert werden, damit zukünftige Anfragen nach diesen Daten schneller bearbeitet werden können.
Obwohl verschiedene Arten von Caching-Techniken verwendet werden können, um den Blog relevant zu halten, werde ich zwei Arten von Caching beschreiben, nämlich Seiten-Caching und statisches Caching.
Seiten-Caching vs. statisches Asset-Caching
Beim Seiten-Caching wird eine vollständig gerenderte Version einer Webseite gespeichert, während beim statischen Asset-Caching einzelne Dateien wie Bilder und Stylesheets gespeichert werden.
Seiten-Caching ist für dynamische Websites mit Inhalten, die sich nicht häufig ändern, von Vorteil, während statisches Asset-Caching für alle Websites von entscheidender Bedeutung ist, um Ladezeiten und Serverbandbreitennutzung zu reduzieren.
In der folgenden Tabelle finden Sie einen detaillierten Vergleich zwischen Seiten-Caching und statischem Asset-Caching:
| Seiten-Caching | Statisches Asset-Caching |
| Stellt dynamische Inhalte bereit, die sich nicht häufig ändern. | Reduziert Ladezeiten und Bandbreite für statische Website-Inhalte. |
| Wird aufgrund von Inhaltsänderungen oder Ablaufeinstellungen seltener aktualisiert. | Wird aktualisiert, wenn sich die Datei ändert oder entsprechend den Cache-Headern. |
| Es speichert ganze Webseiten. | Es speichert Bilder, Stylesheets, Skripte, Schriftarten und andere statische Dateien. |
| Es wird durch Header wie Cache-Control und Expires gesteuert. | Es wird durch Header und Dateiversionierung gesteuert. |
Was macht ein statisches Asset zwischenspeicherbar?
Statische Assets gelten als zwischenspeicherbar, wenn sie sich nicht häufig ändern und von einem Browser oder einem CDN zur Wiederverwendung über mehrere Seitenladevorgänge hinweg gespeichert werden können. Bilder, CSS-Dateien, JavaScript-Dateien und Schriftarten sind gängige Beispiele für statische Assets.
Damit ein Asset zwischengespeichert werden kann, sollte es über die entsprechenden HTTP-Cache-Header wie „Cache-Control“ und „Expires“ verfügen, die dem Browser angeben, wie lange das Asset gespeichert werden soll.
Was ist eine Caching-Richtlinie?
Eine Caching-Richtlinie ist ein durch HTTP-Header definierter Regelsatz, der vorschreibt, wie und wie lange Browser und Zwischencaches eine bestimmte Ressource speichern sollen. Eine klar definierte Caching-Richtlinie trägt dazu bei, Ladezeiten, Serverlast und Bandbreitennutzung zu reduzieren.
Wie werden UX und SEO durch eine Cache-Richtlinie beeinflusst?
Eine robuste Caching-Richtlinie wirkt sich direkt sowohl auf die Benutzererfahrung (UX) als auch auf die Suchmaschinenoptimierung (SEO) aus. Schnellere Ladezeiten durch effektives Caching führen zu einem reibungsloseren und reaktionsschnelleren Benutzererlebnis. Dies ist von entscheidender Bedeutung, da Benutzer eine Website wahrscheinlich verlassen, wenn das Laden zu lange dauert.
In Bezug auf SEO ist die Geschwindigkeit der Website ein bekannter Rankingfaktor für Google. Schnellere Websites werden in Suchmaschinenrankings bevorzugt, was zu einer höheren Sichtbarkeit und möglicherweise zu mehr Verkehr führt.
So überprüfen Sie, ob Browser-Caching auf Ihrer Website aktiviert ist
Die Nutzung von Browser-Caching auf Ihrer WordPress-Site kann die Leistung Ihrer Site verbessern und das Problem mit statischen Assets lösen. Um zu überprüfen, ob Browser-Caching auf Ihrer Website aktiviert ist, können Sie Browser-Entwicklertools oder Online-Tools wie verwenden Googles PageSpeed Insights.
Das zu tun:
- Klicken Sie in Ihrem Browser mit der rechten Maustaste auf > „Inspizieren“.
- Gehen Sie zur Registerkarte „Netzwerk“ und prüfen Sie, ob die Header „Cache-Control“ und „Expires“ richtig eingestellt sind.
PageSpeed Insights von Google bietet eine benutzerfreundlichere Oberfläche, analysiert die Leistung Ihrer Website und weist explizit darauf hin, welche Assets Caching-Optimierungen benötigen.
Identifizieren des Problems „Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen“.
Das Problem „Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen“ wird in Website-Performance-Tools hervorgehoben, wenn statische Ressourcen nicht effektiv zwischengespeichert werden, was zu längeren Benutzerladezeiten führt.
Um das Problem zu identifizieren, müssen wir zwei wichtige Dinge verstehen:
- Erstens: die Ursache des Problems
- Zweitens: Wie PageSpeed Insights das Problem interpretiert.
Ursachen des Problems
Hier sind die wenigen Hauptursachen des Problems.
Fehlende Cache-Richtlinie
Dies tritt auf, wenn statische Assets auf einer Website, wie Bilder, JavaScript- oder CSS-Dateien, nicht mit den richtigen Cache-Kontrollheadern bereitgestellt werden. Ohne diese Header können Browser diese Ressourcen nicht zwischenspeichern, was zu unnötigen Downloads und längeren Ladezeiten für wiederkehrende Besucher führt.
Kurze Cache-Dauer
Selbst wenn Caching aktiviert ist, kann eine sehr kurze Cache-Dauer zu ähnlichen Leistungsproblemen führen wie überhaupt kein Caching. Im Idealfall sollten statische Assets, die sich nicht häufig ändern, eine lange Cache-Dauer haben, um die Leistungsvorteile zu maximieren.
Inkonsistente Cache-Richtlinien
Inkonsistenzen in den Cache-Richtlinien für verschiedene Arten von Assets oder verschiedene Seiten einer Website können zu einem suboptimalen Caching-Verhalten führen, bei dem einige Assets effizient zwischengespeichert werden, andere jedoch nicht.
Browser-Caching wird nicht verwendet
Wenn das Browser-Caching nicht genutzt wird, speichern die Browser der Benutzer keine Kopien statischer Assets für einen schnelleren Abruf bei späteren Besuchen, was die Leistung der Website erheblich verlangsamen kann.
Allgemeine Fehlkonfiguration
Dazu können verschiedene Probleme gehören, etwa falsche Cache-Control-Header, falsch konfigurierte Servereinstellungen oder Probleme mit der .htaccess-Datei der Website (im Fall von Apache-Servern).
Wie interpretiert PageSpeed Insights dieses Problem?
Hier ist wie PageSpeed-Einblicke interpretiert dieses Problem:
- Zunächst werden die Header statischer Assets analysiert, die von Ihrer Website bereitgestellt werden.
- Anschließend prüft es die Cache-Kontrolle und die Expire-Header, um zu bestimmen, wie lange jedes Asset von Browsern zwischengespeichert wird.
- Wenn das Tool erkennt, dass diese Ressourcen eine kurze Cache-TTL (Time To Live) haben oder überhaupt nicht zwischengespeichert werden, markiert es das Problem und gibt Empfehlungen für Verbesserungen.
Wenn Sie also die Ursache herausfinden, können Sie das Problem strategisch beheben.
Lösungen für die Bereitstellung von Assets mit effizienten Cache-Richtlinien
Um Ihnen dabei zu helfen, Assets mit einer effizienten Cache-Richtlinie bereitzustellen, behandeln wir zwei Ansätze, mit denen Sie die Leistung von Webanwendungen verbessern können.
- Manueller Ansatz
- Plugin-Ansatz
Manuelle Methode
Sehen wir uns zunächst an, wie Sie dieses Problem manuell beheben können.
Schritt 1: Identifizieren Sie die statischen Assets
Zunächst müssen Sie ermitteln, welche statischen Assets ohne oder mit einer ineffizienten Cache-Richtlinie bereitgestellt werden. Sie können dies tun, indem Sie die folgenden Schritte ausführen:
- Gehen Sie zu Google Pagespeed Insights.
- Geben Sie Ihre URL ein.
- Im Abschnitt „Diagnose“ können Sie die Ressourcen unter „Statische Assets mit effizienter Cache-Richtlinie bereitstellen“ sehen.
- Erweitern Sie sie, um die statischen Assets zu identifizieren. In meinem Fall habe ich nach der Durchführung des Tests 35 Ressourcen gefunden.
Schritt 2: HTTP-Header konfigurieren
Als Nächstes müssen Sie Ihren Server so konfigurieren, dass er bestimmte HTTP-Header enthält, um dem Browser mitzuteilen, wie lange er die statischen Assets zwischenspeichern soll. Die wichtigsten Header, auf die man sich konzentrieren sollte, sind Cache-Control und optional Expires.
Sie müssen HTTP-Header für verschiedene Server unterschiedlich konfigurieren.
Wenn auf Ihrem Server Apache ausgeführt wird, fügen Sie die folgenden Zeilen zu Ihrer .htaccess-Datei hinzu:
Schritt 3: Testen Sie die Konfigurationen
Nachdem Sie die Serverkonfiguration aktualisiert haben, sollten Sie den Cache Ihres Servers leeren (falls zutreffend) und die Konfiguration testen, indem Sie:
- Besuchen Sie Ihre Website in einem Browser.
- Öffnen Sie die Entwicklertools des Browsers (Rechtsklick → Untersuchen).
- Gehen Sie zur Registerkarte Netzwerk.
- Die Seite erneut laden.
- Klicken Sie auf der Registerkarte „Netzwerk“ auf ein statisches Asset und suchen Sie im Abschnitt „Header“ nach dem Header „Cache-Control“.
Schritt 4: Führen Sie die Leistungstests erneut durch
Verwenden Sie erneut Tools wie Google PageSpeed Insights, Lighthouse oder WebPageTest, um sicherzustellen, dass das Problem behoben ist, und um zu prüfen, ob sich der Leistungswert verbessert.
- Nachdem ich die Einstellungen angepasst hatte, wurde die Anzahl der Ressourcen von 35 auf 29 reduziert.
Plugin-Methode
Sie können das Problem „Statische Assets mit effizienter Cache-Richtlinie bereitstellen“ einfach beheben, indem Sie das Caching-Plugin verwenden. Schauen Sie sich unsere Liste der besten WordPress-Caching-Plugins an.
Hier ist wie…
Breeze-Plugin
Zu Demonstrationszwecken würde ich verwenden Brise Plugin. Das Breeze-Plugin wurde von DreamHost entwickelt und alle DreamHost-Benutzer erhalten dieses Plugin standardmäßig.
- Installieren und aktivieren Sie zunächst das Plugin.
- Gehen Sie zu Einstellungen > Browser-Caching aktivieren
Dies sollte das Problem beheben. Erfahren Sie hier mehr über die Konfiguration des Breeze-Plugins Führung.
W3 Total Cache Plugin
Wie oben erläutert, ermöglichen Ihnen die meisten Caching-Plugins die Bereitstellung statischer Assets. Hier erfahren Sie, wie Sie statische Assets mit dem W3 Total Cache-Plugin bereitstellen.
- Laden Sie das herunter und aktivieren Sie es W3 Total Cache Plugin.
- Gehen Sie zu Einstellungen > Browser-Caching
- Markieren Sie für jedes Element CSS & JS, HTML & XML den Ablauf-Header und legen Sie die Lebensdauer des Ablauf-Headers auf 31536000 Sekunden fest.
Weitere Informationen finden Sie auch in unserem Leitfaden „So verwenden Sie das WordPress W3 Total Cache Plugin für schnellere Websites“.
Tipps für eine optimale Caching-Strategie
Obwohl wir bereits untersucht haben, wie Sie das Problem „Statische Assets mit effizienter Cache-Richtlinie bereitstellen“ einfach beheben können, benötigen Sie eine optimale Caching-Richtlinie, um dieses Problem von vornherein zu verhindern.
Hier gebe ich einige Tipps zur Optimierung Ihrer Caching-Strategie:
Nutzen Sie einen effektiven Hosting-Anbieter
Die Wahl des Hosting-Anbieters spielt eine wichtige Rolle bei der Festlegung der optimalen Caching-Strategie. Wenn Sie über einen robusten Hosting-Anbieter verfügen, müssen Sie möglicherweise keinen zusätzlichen Aufwand für die Einrichtung von Caching-Strategien betreiben. Ihr Hosting-Anbieter kümmert sich um die meisten Caching-Aspekte.
Sie müssen sich für einen Hosting-Anbieter entscheiden, der SSDs verwendet, über Rechenzentren in der Nähe Ihrer primären Zielgruppe verfügt und integrierte Caching-Mechanismen auf Serverebene bietet. Darüber hinaus sollte es Ihnen ermöglichen, Ressourcen bei Verkehrsspitzen problemlos zu aktualisieren, und es sollte Unterstützung für HTTP/2 oder HTTP/3 bieten.
Einsatz von Content Delivery Networks (CDNs)
Durch die Verwendung von CDNs kann auch das Problem „Statische Assets bereitstellen“ behoben werden. Sie müssen sicherstellen, dass Sie das CDN mit einem breiten Netzwerk von Servern weltweit wählen, um Inhalte vom nächstgelegenen Standort zum Benutzer bereitzustellen.
Darüber hinaus müssen Sie sicherstellen, dass Ihr CDN so konfiguriert ist, dass es die Cache-Header Ihres Ursprungsservers berücksichtigt, oder entsprechende Cache-Richtlinien auf CDN-Ebene festlegen.
Wenn Sie Cloudflare CDN verwenden, können Sie mit den Seitenregeln experimentieren, um dieses Problem zu beheben.
- Gehen Sie zum Cloudflare-Dashboard
- Wählen Sie Caching > Konfiguration
- Stellen Sie die Browser-Cache-TTL auf 1 Jahr ein.
Wenn Sie ein DreamHost-Benutzer sind, können Sie das Cloudflare Enterprise-Add-on mit einem Klick aktivieren und die Caching-Option aktivieren, um das Problem „Statisches Asset bereitstellen“ zu beheben.
Durch die Ein-Klick-Integration von Cloudflare auf DreamHost haben Sie die Möglichkeit, die Leistung und Sicherheit Ihrer Website mühelos zu verbessern. Durch die Aktivierung von Cloudflare können Sie das Problem „Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen“ lösen und sicherstellen, dass die statischen Inhalte Ihrer Website Ihren Benutzern schnell und effizient bereitgestellt werden.
Code von Drittanbietern verzögern
Wie wir alle wissen, sind Codes von Drittanbietern die eigentliche Ursache für die langsamen Ladezeiten und damit für das Problem mit statischen Assets.
Daher müssen wir den Code von Drittanbietern verzögern. Wir können das tun, indem wir:
- Verwenden Sie asynchrone oder zurückgestellte Attribute oder nicht unbedingt erforderliche Skripte, um zu verhindern, dass sie den Hauptthread blockieren. Sie können dies einfach tun, indem Sie dem Skript-Tag asynchrone und zurückstellende Attribute hinzufügen.
- Sie können ein asynchrones Attribut hinzufügen, indem Sie die folgende Zeile in Ihrer HTML-Datei unter dem Skript-Tag platzieren.
- Sie können das Defer-Attribut hinzufügen, indem Sie die folgende Zeile in Ihrer HTML-Datei unter dem Skript-Tag platzieren.
- Durch die richtige Verwendung der Async- und Defer-Attribute können Sie die Ladeleistung Ihrer Website optimieren und Ihren Benutzern ein schnelleres und reibungsloseres Erlebnis bieten.
Lokales Hosten von Schriftarten und Analysen
Die Verwendung externer Schriftarten kann die Website verlangsamen und es kann zu Problemen mit statischen Assets kommen. Um dies zu verhindern, laden Sie Schriftarten direkt von Ihrem Server herunter und stellen sie bereit, anstatt sich auf externe Schriftartenanbieter zu verlassen. Um dies zu tun,
- Laden Sie zunächst die Schriftartdateien von Google Fonts herunter.
- Laden Sie die Schriftarten auf Ihren Server hoch. Sie können dafür FTP verwenden. Ziehen Sie die Schriftartdatei per Drag & Drop auf Ihre Remote-Site.
- Erstellen Sie eine CSS-Datei, die @font-face-Regeln definiert, um anzugeben, wie die Schriftarten angezeigt werden sollen.
F
ont-family: 'YourFontName'; src: url('/Pfad-zu-Ihrem-Schriftartenverzeichnis/Ihre-Schriftartdatei.woff2') format('woff2'), url('/Pfad-zu-Ihrem-Schriftartenverzeichnis/Ihre-Schriftart- file.woff') format('woff'), url('/path-to-your-font-directory/your-font-file.ttf') format('truetype'), url('/path-to- Ihr-Font-Verzeichnis/Ihre-Font-Datei.otf') format('opentype'); Schriftstärke: normal; Schriftstil: normal; }
- Ersetzen Sie „YourFontName“ durch einen Namen für Ihre Schriftart und ersetzen Sie /path-to-your-font-directory/your-font-file durch den tatsächlichen Pfad und Dateinamen Ihrer Schriftartdateien.
- Konfigurieren Sie nun Ihren Webserver für die Bereitstellung von Schriftartdateien.
- Wenn Sie Apache verwenden, fügen Sie diese Zeilen zu Ihrer .htaccess-Datei hinzu.
AddType-Schriftart/woff2 .woff2 AddType-Schriftart/woff .woff AddType-Schriftart/ttf .ttf AddType-Schriftart/otf .otf
- Wenn Sie Nginx verwenden, fügen Sie diese Dateien zu Ihrem Serverblock hinzu.
Standort ~* \.(ttf|otf|woff|woff2)$ add_header Access-Control-Allow-Origin *;
- Fügen Sie die oben erstellte CSS-Datei in Ihre HTML-Dokumente ein. Sie können dies tun, indem Sie im Abschnitt Ihres HTML-Codes einen Link zur CSS-Datei hinzufügen:
Deaktivieren von Cloudflare-Funktionen
Einige der Cloudflare-Funktionen können den Druck auf die Website erhöhen und die Ladezeiten verlängern. Sie müssen sie deaktivieren, um das Problem mit statischen Assets zu vermeiden. Konfigurieren Sie außerdem Cloudflare-Seitenregeln, um das Caching für verschiedene Arten von Inhalten zu optimieren.
- Gehen Sie in Ihrem Cloudflare-Dashboard zur Registerkarte „Geschwindigkeit“.
- Hier können Sie Rocket Loader nach Bedarf ein- und ausschalten.
Verwendung von DreamHost zur Caching-Optimierung
Wussten Sie, dass Sie sich bereits für die Caching-Optimierung anmelden, wenn Sie Ihre Website auf DreamHost hosten?
Möchten Sie wissen, wie?
Auf einer von DreamHost gehosteten WordPress-Site wird Varnish über die DreamHost-Plattformschnittstelle aktiviert, wo Benutzer es einfach für ihren Server einschalten können. Sobald Varnish aktiviert ist, fungiert es als Reverse-Proxy und fängt eingehende HTTP-Anfragen ab.
Bei statischen Assets wie Bildern, CSS- und JavaScript-Dateien überprüft Varnish seinen Cache, bevor er die WordPress-Anwendung auf dem Server erreicht. Wenn das Asset zwischengespeichert ist und basierend auf der konfigurierten Time To Live (TTL) nicht abgelaufen ist, wird es dem Benutzer direkt bereitgestellt, sodass WordPress die Seite nicht generieren muss.
Dies reduziert die Belastung des Servers erheblich und beschleunigt die Reaktionszeit, da der Webserver diese Dateien nicht von Grund auf bereitstellen muss, was zu einem schnelleren Erlebnis für den Endbenutzer führt. Wenn sich der Inhalt nicht im Cache befindet oder abgelaufen ist, ruft Varnish den neuen Inhalt vom Server ab, speichert ihn im Cache und stellt ihn bereit – um sicherzustellen, dass nachfolgende Anfragen aus dem Cache bedient werden.
Um den Lack zu aktivieren, gehen Sie folgendermaßen vor:
- Gehen Sie zu Ihren Servereinstellungen > Dienste verwalten
- Klicken Sie auf „Varnish aktivieren“.
Wenn Sie den Lack auf Ihrer WordPress-Site manuell konfigurieren möchten, lesen Sie außerdem unsere ausführliche Anleitung zu „WordPress zu Lack“.
Zusammenfassung
Die Bereitstellung statischer Assets mit einer effizienten Cache-Richtlinie ist entscheidend für die Verbesserung der Leistung und Benutzererfahrung Ihrer WordPress-Website. In diesem Leitfaden haben wir die Bedeutung des Caching erläutert, umsetzbare Schritte zum Konfigurieren von Cache-Richtlinien bereitgestellt und Best Practices hervorgehoben, um sicherzustellen, dass Ihre statischen Assets auf Geschwindigkeit optimiert sind.
Wenn Sie weitere Informationen benötigen, können Sie sich gerne an uns wenden.
Q) Ist Browser-Caching sicher?
A) Ja, Browser-Caching ist im Allgemeinen sicher, da es statische Assets auf dem Gerät des Benutzers speichert. Es ist jedoch von entscheidender Bedeutung, ordnungsgemäße Cache-Validierungs- und Ablaufrichtlinien zu implementieren, um sicherzustellen, dass Benutzer keine veralteten oder potenziell unsicheren Inhalte erhalten.
Q) Was sind die Unterschiede und Vorteile von Browser-Caching gegenüber Server-Caching?
A) Browser-Caching speichert statische Assets auf dem Gerät des Benutzers, wodurch die Ladezeiten bei wiederholten Besuchen verkürzt werden, während Server-Caching Webseiten oder andere Inhalte auf dem Server speichert und so die Bereitstellung von Inhalten an alle Benutzer beschleunigt. Beide Methoden steigern die Leistung, wirken jedoch in unterschiedlichen Phasen der Inhaltsbereitstellung.
Q) Was sind zusätzliche Strategien zur Leistungsverbesserung?
A) Neben dem Caching umfassen weitere Strategien die Bildoptimierung, die Minimierung von CSS- und JavaScript-Dateien, das verzögerte Laden von Ressourcen und die Verwendung eines Content Delivery Network (CDN), um die Latenz zu reduzieren und die Ladezeiten zu verbessern.
