Shopify Cache von Drittanbieter-Assets: Was Sie beheben können

Was die Cache-Richtlinienwarnung bedeutet

PageSpeed markiert statische Assets mit kurzer Cache-Lebensdauer, da wiederkehrende Besucher sie möglicherweise zu früh erneut herunterladen müssen. Auf einer rein benutzerdefinierten Site kann ein Entwickler häufig Server-Header anpassen. Bei Shopify sind die Storefront-Assets auf das CDN von Shopify, Ihr Theme, App-Anbieter, Tracking-Plattformen, Schriftartenanbieter, Videoeinbettungen und Werbenetzwerke aufgeteilt. Sie kontrollieren einen Teil dieses Stapels, aber nicht den gesamten.

Deshalb sind Händler frustriert über die Warnung. Sie sehen eine JavaScript-Datei eines Drittanbieters von einer Bewertungs-App, einem Chat-Widget, einem Pixel oder einem Attributions-Tool und suchen nach einer Shopify-Einstellung, die nicht existiert. Wenn die Datei von der Domain des Anbieters bereitgestellt wird, legt der Anbieter die Cache-Lebensdauer fest. Ihre Aufgabe ist es zu entscheiden, ob dieser Anbieter geladen werden soll, wo er geladen werden soll und ob ein leichteres Muster ihn ersetzen kann.

Cache-Richtlinie gehört daneben Effiziente Cache-Richtlinie von Shopify, Auswirkungen auf Skripte von Drittanbietern, App-Geschwindigkeitsoptimierungund die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Welche Assets Sie auf Shopify kontrollieren können

Themenressourcen

Dateien, die in Ihr Shopify-Theme hochgeladen werden, wie CSS, JavaScript, Bilder und Schriftarten, sind der sicherste Ort zum Optimieren. Sie können tote Dateien entfernen, Bilder komprimieren, Skripte aufteilen und das Laden alter Assets vermeiden. Das CDN von Shopify übernimmt die Lieferung, aber Sie haben weiterhin die Kontrolle darüber, was angefordert wird.

Zugelassene statische Herstellerdateien

Einige Bibliotheken können selbst gehostet werden, wenn die Lizenz und die Anbieterdokumentation dies zulassen. Beispiele hierfür sind eine lokale Slider-Bibliothek, ein kleines Helfer-Skript oder eine Schriftartdatei, für die Sie eine Lizenz zum Hosten besitzen. Dies unterscheidet sich vom Kopieren eines Live-App-Skripts, das Anbieter-Updates erwartet.

App-Einbettungen und Pixel

Normalerweise können Sie ihre Cache-Header nicht ändern. Sie können ungenutzte App-Einbettungen deaktivieren, doppelte Pixel entfernen, Widgets auf relevante Vorlagen beschränken und unkritische Benutzeroberflächen verzögern, bis der erste Bildschirm nutzbar ist.

Handbuch Schritt für Schritt: Behandeln Sie Cache-Warnungen von Drittanbietern

1. Sortieren Sie die Vermögenswerte nach Eigentum

Öffnen Sie DevTools Network oder PageSpeed und gruppieren Sie markierte URLs in Shopify CDN, Ihrem Theme, App-Anbietern, Pixeln, Schriftarten, Videoeinbettungen und Marketing-Tools. Reparieren Sie zunächst Ihr eigenes Vermögen. Für Vermögenswerte im Besitz des Anbieters ist eine andere Entscheidung erforderlich.

Shopify-controlled:
cdn.shopify.com/s/files/.../theme.css
cdn.shopify.com/s/files/.../custom.js

Vendor-controlled:
reviews-app.example/widget.js
analytics.example/pixel.js
chat.example/launcher.js

2. Entfernen Sie Assets aus Vorlagen, die diese nicht benötigen

Ein Produktbewertungs-Widget gehört möglicherweise zu Produktseiten, jedoch nicht zu Blogbeiträgen. Ein Store-Locator-Skript gehört möglicherweise zu einer Seite, nicht zur gesamten Storefront. Theme-App-Erweiterungen und App-Einbettungen sollten so eng begrenzt sein, wie es die App zulässt.

{% if template.name == 'product' %}
  <script src="https://vendor.example/reviews.js" defer></script>
{% endif %}

3. Verwenden Sie Fassaden für schwere Einbettungen

Videos, Karten, Chats und soziale Einbettungen laden oft viele Dateien mit Cache-Richtlinien, die Sie nicht kontrollieren können. Ersetzen Sie die vollständige Einbettung durch eine statische Vorschau oder eine einfache Schaltfläche und laden Sie dann den Code des Drittanbieters erst nach der Interaktion.

<button class="chat-facade" data-load-chat>
  Chatten Sie mit uns
</button>

<script>
  document.querySelector('[data-load-chat]')?.addEventListener('click', () => {
    const script = document.createElement('script');
    script.src = 'https://chat.example/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  });
</script>

4. Hosten Sie nur das selbst, was sicher ist

Hosten Sie Schriftarten, kleine Bibliotheken und genehmigte statische Assets selbst, wenn Sie dazu berechtigt sind. Kopieren Sie keine App-Skripte, Zahlungsskripte, Tracking-Pixel oder ständig aktualisierten Anbietercode in Ihr Theme. Dies kann die Verarbeitung von Einwilligungen, die Analyse, den Support und zukünftige Sicherheitskorrekturen beeinträchtigen.

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans.woff2" | asset_url }}') format('woff2');
  font-display: swap;
  font-weight: 400;
}

5. Bitten Sie Anbieter um besseres Caching

Wenn eine kritische App statische Dateien mit sehr kurzen Cache-Lebensdauern liefert, kontaktieren Sie den Support mit der genauen URL von PageSpeed und fragen Sie, ob sie die Cache-Header verbessern oder eine leichtere Einbettung bereitstellen können. Gute Anbieter verstehen die Anfrage. Wenn sie nicht helfen können und das Widget keinen Umsatz generiert, entfernen oder ersetzen Sie es.

6. Wiederholte Aufrufe und mobile Leistung erneut testen

Die Cache-Richtlinie ist für wiederkehrende Besucher am wichtigsten, aber dieselben Ressourcen von Drittanbietern können auch die Netzwerknutzlast beim ersten Laden, die Arbeit im Haupt-Thread und INP beeinträchtigen. Testen Sie erneut mit dem kostenloser Shopify-Geschwindigkeitstest, dann vergleichen mobile Geschwindigkeitsmetriken und Shopify-Geschwindigkeitsbewertung vs. PageSpeed Insights.

Manueller Fix vs. Thunder Fix

Was Sie nicht tun sollten

Streben Sie nicht nach einem perfekten Cache-Policy-Score, indem Sie Umsatztools kaputtmachen. Bewertungen, Abonnements, Analysen, Betrugsprüfungen und Chat können von Bedeutung sein. Die richtige Frage ist, ob jedes Drittanbieter-Asset seinen Platz in genau dieser Vorlage verdient. Entfernen Sie, was nicht der Fall ist, dämmen Sie ein, was nicht der Fall ist, und halten Sie die von Shopify kontrollierte Seite so schlank wie möglich.

Für einen umfassenderen Reinigungsplan verwenden Sie App-Skriptkorrekturen, GTM-Geschwindigkeitskorrekturen, und Shopify-Ressourcenhinweise. Wenn Sie zuerst die automatisierte Baseline wünschen, überprüfen Sie diese Thunder-Preise und dann den Anbieterstapel mit besseren Daten bereinigen.

FAQ