So stellen Sie statische Assets mit einer effizienten Cache-Richtlinie bereit

Websites wie GTMetrix und Google PageSpeed ​​Insights bieten Vorschläge zur Verbesserung der Leistung Ihrer Website. Wenn Sie dies lesen, sind Sie sich zumindest bewusst, dass jede Website Möglichkeiten zur Leistungsverbesserung hat, entweder durch manuelle Optimierungen oder durch die Verwendung von Plugins wie 10Web Booster.

In beiden Tools sehen Sie möglicherweise einen Vorschlag,statische Assets mit einer effizienten Cache-Richtlinie bereitzustellen .Dieser Vorschlag besteht darin, Dateien lokal zu speichern, damit wiederholte Besuche auf der Website schneller ablaufen. Die Schritte zur Verbesserung dieser Empfehlung verbessern nicht den anfänglichen Website-Besuch (dafür gibt es andere Verbesserungen). Dennoch profitieren alle nachfolgenden Besuche von der Nutzung des Browser-Cache.

Es sei darauf hingewiesen, dass der Vorschlag, statische Assets mit einer effizienten Cache-Richtlinie bereitzustellen, auch als Browser-Caching oder Browser-Caching in WordPress bezeichnet wird.

In diesem Artikel wird erläutert, wie Sie statische Assets mit einer effizienten Cache-Richtlinie bereitstellen und wie eine effiziente Cache-Richtlinie die Leistung Ihrer Website verbessern kann.

Bei Verwendung von GTMetrix sieht der Vorschlag auf der Ergebnisseite wie im Beispiel unten aus. Es wird potenzielle Einsparungen durch die Implementierung von Browser-Caching hervorheben.

In Google PageSpeed ​​Insights sieht der Vorschlag ähnlich aus und liefert ähnliche Informationen.

Die Vorschläge sind ähnlich, da GTMetrix und PageSpeed ​​Insights das Lighthouse- Tool für ihr Webseitenanalyse-Framework verwenden . Lighthouse ist ein Open-Source-Tool zur Verbesserung der Website-Leistung und kann in vielen verschiedenen Formaten ausgeführt werden.

Nehmen wir uns einen Moment Zeit für eine kurze Auffrischung, um uns daran zu erinnern, wie die Leistung einer Website anhand einer Sammlung von Metriken gemessen wird, von denen die wichtigsten die Core Web Vitals sind.

Hier ist eine Zusammenfassung:

• Largest Contentful Paint ( LCP ) – Das Maß dafür, wie lange es dauert, bis das größte Objekt im Darstellungsbereich der Seite geladen wird.
• First Input Delay ( FID ) – Dies misst die Reaktionsfähigkeit der Website. Es misst die Zeit zwischen dem Klicken oder Interagieren mit der Website durch den Benutzer und der Reaktion der Website.
• Cumulative Layout Shift ( CLS ) – Dies misst, wie stark sich das Layout einer Seite unerwartet verschiebt.

Eine Möglichkeit, sowohl LCP als auch FID positiv zu beeinflussen, besteht darin, statische Assets mit einer effizienten Cache-Richtlinie bereitzustellen, was bedeutet, dass der Browser weiß, dass er eine Ressource für eine bestimmte Zeit lokal speichern kann.

Eine effiziente Cache-Richtlinie bedeutet schnellere Ladezeiten, denn egal wie schnell Ihre Internetgeschwindigkeit ist, das Laden aus einem lokalen Cache ist schneller und spart Zeit.

Es gibt ein paar Komponenten, also lassen Sie uns sie genauer besprechen.

So stellen Sie statische Assets mit einer effizienten Cache-Richtlinie bereit

Um zu verstehen, wie statische Assets mit einer effizienten Cache-Richtlinie bereitgestellt werden, müssen wir zunächst die verschiedenen Aspekte wie statische Assets, Caching und eine Caching-Richtlinie verstehen. Lassen Sie uns sie hier aufschlüsseln.

Was sind statische Assets?

Statische Assets sind Dateien. Wenn wir in diesem Artikel auf statische Assets verweisen, beziehen wir uns auf einzelne Dateien, von denen nicht erwartet wird, dass sie sich entweder bald oder häufig ändern.

Dateien wie Bilder, Javascript, CSS-Dateien und Schriftarten sind Dateien, die als statische Assets betrachtet werden könnten. In Bezug auf WordPress sind diese CSS-, Javascript-, Bild- und Schriftdateien normalerweise Teil eines Designs, eines Plugins oder von Benutzerinhalten.

Dateien und Seiten, die dynamisch generiert werden, gelten nicht als statische Assets. Ein Beispiel dafür in WordPress wären die statischen Seiten, die von Caching-Plugins generiert werden. Darauf wird im nächsten Abschnitt näher eingegangen.

Was ist Caching?

Caching ist der Prozess, Antworten in einem Cache zu speichern, damit die Antwort beim nächsten Mal, wenn dieselbe Frage gestellt wird, schneller zurückgegeben werden kann.

In Verbindung stehende Artikel

Wie lösche ich den WordPress-Cache sicher und effizient?

Finden Sie das beste WordPress-Caching-Plugin mit unseren Top-5-Picks

Wenn Sie bereits mit WordPress-Caching-Plugins gearbeitet haben, sind Sie möglicherweise mit dem Ganzseiten-Caching vertraut. Seiten-Caching unterscheidet sich vom statischen Asset-Caching.

Seiten-Caching vs. statisches Asset-Caching

Dieser Artikel befasst sich speziell mit dem Zwischenspeichern statischer Assets (Dateien). Dies sollte nicht mit Full-Page-Caching verwechselt werden, das generierte Seiten für die spätere Verwendung speichert.

Sowohl das Seiten-Caching als auch das Datei-Caching tragen dazu bei, die Leistung einer Website zu verbessern. Bei der Erörterung des statischen Asset-Cachings beziehen wir uns auf bestimmte Assets wie Javascript, CSS und Bilddateien.

Seiten-Caching speichert die Ergebnisse einer dynamisch generierten WordPress-Seite und stellt diese Version für einen bestimmten Zeitraum bereit. Seiten-Caches werden normalerweise auf einem Server oder Edge-Netzwerk wie einem CDN gespeichert, und statische Assets werden lokal auf dem Computer des Benutzers gespeichert.

Caching in Bezug darauf, wie wir statische Assets mit einer effizienten Cache-Richtlinie bereitstellen, bedeutet, dem Browser mitzuteilen, wie lange er eine Ressource lokal im Browser speichern kann, bevor er sie erneut herunterladen muss.

Was macht ein statisches Asset cachebar?

Laut GTMetrix ist ein Asset cachebar, wenn es die folgenden Anforderungen erfüllt:

• Es ist eine Schriftart, CSS, Javascript oder Mediendatei.
• Es gibt einen HTTP-Statuscode 200, 203 oder 206 zurück
• Es gibt keine explizite No-Cache-Richtlinie

Was ist eine Caching-Richtlinie?

Wir haben uns angesehen, was ein statisches Asset ist und was es bedeutet, ein Asset zwischenzuspeichern.

Die Begriffe Freshness und Stale können hier verwendet werden, um den Status einer zwischengespeicherten Datei zu beschreiben. Wenn eine Datei aus dem Cache gezogen werden kann, könnte sie als fresh bezeichnet werden. Wenn es abläuft, wird es als stale bezeichnet.

Eine Richtlinie beantwortet Fragen, wie z. B. wie lange eine Datei als frisch betrachtet wird und wie überprüft werden kann, ob eine Datei frisch ist. Die Richtlinie besagt, dass wir nur nach einer bestimmten Zeit beim Server nachfragen müssen oder uns mitteilen müssen, dass wir bei jeder Anfrage beim Server nachfragen müssen, aber die Datei nur erneut herunterladen, wenn sie sich geändert hat.

Noch ein paar Begriffe, die gut zu verstehen sind, bevor wir weitermachen.

Wie werden UX und SEO von einer Cache-Richtlinie beeinflusst?

User Experience (UX) und Suchmaschinenoptimierung (SEO) sind eng miteinander verbunden. Laut Google zeigen Studien, dass Benutzern die Reaktionsfähigkeit der Website wichtig ist, sodass Google Seiten mit mehr Reaktionsfähigkeit höher einstuft.

Wenn statische Assets effektiv zwischengespeichert werden, wird die Seite aufgrund der kürzeren Zeit, die zum Laden dieser Assets benötigt wird, schneller gerendert. Die Zeitersparnis führt zu Verbesserungen bei zentralen Web-Vitals wie LCP und FID und letztendlich zu einem höheren Suchmaschinenranking.

Hier können Sie mehr darüber lesen, wie sich Core Web Vitals auf das Seitenranking auswirkt.

So beheben Sie das Problem der Bereitstellung statischer Assets mit einer effizienten Cache-Richtlinie

Manuell beheben

Das Bereitstellen statischer Assets mit einer effizienten Cache-Richtlinie ist keine WordPress-spezifische Einstellung. Sie können sie manuell festlegen, indem Sie die Konfigurationsdatei Ihres Webservers ändern oder ein Plugin wie 10Web Booster-Hosting verwenden, um sicherzustellen, dass Ihre Website mit optimierten Caching-Einstellungen konfiguriert ist.

In diesem Abschnitt wird das direkte Bearbeiten der Konfigurationsdateien eines Webservers behandelt, um die Cache-Steuerung zu aktivieren und HTTP-Header auf Ihren Servern ablaufen zu lassen, sodass beim Bereitstellen statischer Assets HTTP-Header in der Antwort angewendet werden.

Wenn eine Ressource angefordert wird, antwortet der Webserver mit der Ressource und einigen zusätzlichen Informationen in sogenannten HTTP-Headern. Stellen Sie sich HTTP-Header als Metadaten über die Verbindung vor. Beim Caching steuern die HTTP-HeaderCache-ControlundExpires, wie wir ein Asset zwischenspeichern.

Der Cache-Control- Header enthält Anweisungen dazu, ob und/oder wie das statische Asset zwischengespeichert werden soll. Es gibt viele Anweisungen für die Cache-Steuerung, also wollen wir einige der beliebtesten verstehen.

Hier sind einige Beispiele dafür, wie ein Cache-Control-Header aussehen könnte.

Beispiel: Cachen Sie ein Asset für sieben Tage
Cache-Control: max-age=604800

Beispiel: Kann bis zu sieben Tage in einem gemeinsam genutzten Cache gespeichert werden
Cache-Control: public, max-age=604800

Beispiel: Kann gespeichert werden, muss aber bei jeder Anfrage neu validiert werden
Cache-Control: no-cache

Beispiel: Kann nicht zwischengespeichert werden
Cache-Control: no-store

Der Cache-Control-Header ist neuer und bietet mehr Optionen, aber falls Cache-Control nicht unterstützt wird, führt der Expires- HTTP-Header die gleiche Header-Aufgabe aus und gibt an, wie lange ein Asset gültig ist, bevor es erneut validiert werden muss. (Beachten Sie, dass die max-age-Anweisung im Cache-Control-Header Vorrang vor Expires hat.)
Expires: Wed Feb 13 21:01:38 CST 2023

Direktes Ändern einer Serverkonfiguration

Lassen Sie uns zunächst den „harten Weg“ betrachten, damit wir verstehen, was passiert, wenn wir andere Tools und Dienste verwenden, die es uns leichter machen.

Apache

Auf dem Apache HTTP-Server könnte das folgende Snippet zu einer Site-Definition oder einer .htaccess-Datei hinzugefügt werden.

Zur Erläuterung dieses Snippets heißt es, dass für jedes Asset, bei dem die Erweiterung mit .ico oder .pdf usw. übereinstimmt, der Cache-Control-Header für das Asset festgelegt wird.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Bei Apache bieten Ihnen viele Hosting-Anbieter die Möglichkeit, Anweisungen zu einer .htaccess-Datei hinzuzufügen. Beachten Sie, dass dies zwar eine einfache Möglichkeit ist, die Konfiguration des Servers zu erweitern, die Verwendung von .htaccess-Dateien jedoch bekanntermaßen zu negativen Leistungseinbußen auf Serverebene führt.

Nginx

In Nginx kann dieses Snippet zu einem Serverblock hinzugefügt werden.

Zur Erläuterung dieses Snippets heißt es, dass für jedes Asset, bei dem die Erweiterung mit .ico oder .pdf usw. übereinstimmt, sowohl die Expires- als auch die Cache-Control-Header festgelegt sind.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Sowohl für Apache als auch für Nginx zeigen wir, wie Header geändert/hinzugefügt werden. Wir zeigen die speziellen Header, die wir für das Caching verwenden, aber die Methode kann für jede andere Form des Caching verwendet werden.

Mit einem WordPress-Plugin beheben

Wenn sich das Obige nach viel anfühlt, liegt es daran, dass es so ist. Die Änderung von Serverkonfigurationen und die Aktualisierung manueller Änderungen ist zeitaufwändig und fehleranfällig.

Der kostenlose Plan von 10Web Booster kann Apache so konfigurieren, dass Header für statische Assets hinzugefügt werden, und es fügt auch Header für zwischengespeicherte Webseiten hinzu. Wenn Sie 10Web-Hosting noch nicht verwenden und Ihr Host Apache verwendet, ist dies eine großartige Möglichkeit, um mit der Implementierung einer effizienten Cache-Richtlinie zu beginnen.

Wenn Sie mehr Optionen oder mehr Kontrolle über HTTP-Header benötigen, können Sie 10Web Booster Pro verwenden. 10Web Booster Pro nutzt sein Cloudflare. Wenn Sie Cloudflare verwenden, fügt es die Cache-Control-Header zu Ihren statischen Assets und zwischengespeicherten Seiten hinzu. Dadurch werden alle Serverkonfigurationen oder Einschränkungen umgangen, da Ihren Besuchern die Dateien direkt von Cloudflare bereitgestellt werden.

Was das 10Web Booster-Plugin hier zur besten Wahl macht, ist, dass es all dies automatisch erledigt. Sie müssen keine Serverkonfigurationen oder .htaccess-Dateien verwalten.

Wenn Sie alternativ 10Web Hosting verwenden, implementiert es automatisch das Caching und Sie müssen sich keine Gedanken über das Hinzufügen von Headern für statische Assets machen.

Kann das Problem immer noch nicht beheben? Probieren Sie diese zwei Tipps aus

Wenn Sie die obigen Schritte implementiert haben und immer noch sehen, dass statische Assets des Dienstes mit einer effizienten Cache-Richtlinie immer noch in Ihren Berichten angezeigt werden, können Sie hier noch ein paar Dinge ausprobieren.

Überprüfen, ob Dateien zwischengespeichert sind

Wenn GTMetrix und PageSpeed ​​immer noch melden, dass Sie statische Assets mit einer Cache-Richtlinie bereitstellen sollten, sollten Sie überprüfen, ob Ihre Implementierung tatsächlich die erwarteten Änderungen vorgenommen hat.

In den meisten Browsern gibt es eine einfache Möglichkeit zu überprüfen, ob Dateien aus einem Cache stammen oder nicht.

Wählen Sie in Chrome unter „Ansicht“ und „Entwickler“ die Option „Entwicklertools“ aus:

Auf der Registerkarte Netzwerk können Sie Dateien identifizieren, die aus (Festplatten-Cache) oder (Speicher-Cache) stammen. Der Unterschied zwischen Festplatten- und Speicher-Cache besteht darin, dass der Speicher verschwindet, wenn der Browser geschlossen wird, und die Festplatte bestehen bleibt, wenn der Browser geschlossen wird.

Erhöhen Sie die Cache-Zeit

Laut Statistiken von Lighthouse ist eine effiziente Cache-Richtlinie eine, die ein hohes Verhältnis von Cache-Hits zu Misses aufweist, was bedeutet, dass die Mehrheit der statischen Assets ein maximales Alter oder ein festgelegtes Ablaufdatum hat. Für Standorte, die in Produktion sind oder sich nicht oft ändern, wird ein maximales Alter von drei Monaten bis sogar einem Jahr empfohlen.

Sie empfehlen, mit einer Richtlinie von etwa drei Monaten (etwa 7890000 Sekunden) zu beginnen. Wenn Sie dies bereits festgelegt haben, kann es sich lohnen, das Höchstalter auf ein Jahr oder mehr zu erhöhen, wenn Ihre Website live ist.

Abschluss

Die Möglichkeit, statische Assets mit einer effizienten Cache-Richtlinie bereitzustellen, bringt Geschwindigkeitsverbesserungen für die Leistung Ihrer Website.

In diesem Artikel wurde behandelt, was statische Assets und HTTP-Header sind, und es wurde untersucht, wie die Caching-Header aktiviert und überprüft werden, ob sie vorhanden sind.

Wir haben uns mit den Grundlagen der manuellen Aktivierung der Header befasst, indem wir die Serverkonfigurationen geändert haben, und wie wir es einfacher machen können, indem wir ein WordPress-Plugin wie 10Web Booster verwenden und die Integration von 10Web mit Cloudflare nutzen, um Zugriff zum Festlegen der HTTP-Header für die Cache-Steuerung zu erhalten.

10Web Booster ist so viel mehr als nur ein Caching-Plugin. Sie können mehr über die vielen Caching- und Geschwindigkeitsoptimierungsfunktionen in diesem 10Web Booster-Artikel lesen .

FAQ