Der schnellste Weg zur Optimierung der Ressourcenauslastung
Manuelle Ressourcenhinweise erfordern die Bearbeitung des Liquid-Codes Ihres Themes und das Verständnis, welche Ressourcen kritisch sind. Wenn Sie die Codeänderungen lieber überspringen möchten, Thunder Page Speed Optimizer verwaltet automatisch die Priorität beim Laden von Ressourcen:
- Verschiebt unkritische Skripte, sodass kritische Ressourcen (Bilder, CSS, Schriftarten) zuerst geladen werden
- Verwaltet automatisch die Ausführungsreihenfolge von Skripten von Drittanbietern
- Keine Bearbeitung des Theme-Codes erforderlich – installieren und loslegen
Testen Sie die Geschwindigkeit Ihres Shops , um Ihre aktuelle Ressourcenladeleistung anzuzeigen, und lesen Sie dann weiter für den manuellen Ansatz.
Was sind Ressourcenhinweise und warum sind sie für Shopify wichtig?
Wenn ein Browser Ihren Shopify-Shop lädt, liest er den HTML-Code von oben nach unten und erkennt dabei Ressourcen (Bilder, CSS, Schriftarten, Skripte). Einige wichtige Ressourcen – wie Ihr Heldenbild oder Ihre primäre Schriftart – sind tief in CSS-Dateien vergraben oder werden über JavaScript geladen. Der Browser findet sie erst, wenn er bereits eine Menge Code analysiert hat.
Mithilfe von Ressourcenhinweisen können Sie dem Browser Folgendes mitteilen: „Hey, beginnen Sie jetzt mit der Arbeit an diesen Ressourcen – warten Sie nicht, bis Sie sie auf natürliche Weise entdecken.“ Das sind sie <link> Elemente in der platziert <head> Ihres HTML.
Es gibt vier Typen mit jeweils unterschiedlichen Anwendungsfällen:
| Hinweis | Was es tut | Wann zu verwenden |
|---|---|---|
| Vorspannung | Lädt eine bestimmte Datei sofort herunter | Heldenbilder, wichtige Schriftarten, wichtiges CSS |
| Voranschluss | Öffnet eine Verbindung zu einer Domäne (DNS + TCP + TLS) | Domains von Drittanbietern, die Sie auf jeden Fall verwenden werden |
| DNS-Prefetch | Löst nur den DNS einer Domäne auf | Domains von Drittanbietern, die Sie möglicherweise verwenden |
| Vorabruf | Lädt eine Datei für eine zukünftige Navigation herunter | Ressourcen, die auf der nächsten wahrscheinlichen Seite benötigt werden |
Jeder Hinweis hat ein anderes Kosten-Nutzen-Profil. Mit Bedacht eingesetzt beschleunigen sie LCP, reduzieren Sie die Verbindungslatenz und verbessern Sie die wahrgenommene Leistung. Bei unachtsamer Verwendung verschwenden sie Bandbreite und können sogar Ihre wichtigsten Ressourcen verlangsamen.
Preload: Kritische Ressourcen auf Shopify priorisieren
Vorspannung ist der wirkungsvollste Ressourcenhinweis – und der am häufigsten missbrauchte. Es teilt dem Browser mit: „Laden Sie diese Datei jetzt herunter, sie ist wichtig für die aktuelle Seite.“ Der Browser behandelt es als obligatorisch und ruft die Ressource mit hoher Priorität ab.
Vorabladen Ihres Heldenbildes (größter LCP-Gewinn)
Das Heldenbild ist normalerweise das größte Contentful Paint-Element auf Ihrer Homepage und Ihren Landingpages. Ohne Vorladung erkennt der Browser es erst, nachdem er das CSS Ihres Themes heruntergeladen und analysiert hat – was LCP um 1–2 Sekunden verzögern kann. So laden Sie es in Shopify vor:
{% comment %} Add to theme.liquid inside <head> {% endcomment %}
{'
'}
{'{% if template == "index" %}'}{'
'}
{' {% comment %} Preload hero image on homepage {% endcomment %}'}{'
'}
{' '}{'
'}
{'{% endif %}'}{'
'}
{'
'}
{'{% if template contains "product" %}'}{'
'}
{' {% comment %} Preload main product image {% endcomment %}'}{'
'}
{' {% if product.featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}}Diese Technik verbessert LCP normalerweise um 500 ms bis 1,5 s, da der Browser parallel zu CSS und JavaScript mit dem Herunterladen des Heldenbilds beginnt, anstatt zu warten. Das Performance-Team von Shopify empfiehlt diesen Ansatz speziell.
Schriftarten vorab laden
If your theme uses custom web fonts, preloading the most critical font file prevents the browser from blocking text rendering while it discovers the font through CSS. See our full Anleitung zur Schriftartenoptimierung für Details. Die grundlegende Implementierung:
{% comment %} Preload primary body font {% endcomment %}
{''}} Wichtig: Die Crossorigin
Das Attribut ist für das Vorladen von Schriftarten erforderlich, auch wenn sich die Schriftart in derselben Domäne befindet. Ohne sie lädt der Browser die Schriftart zweimal herunter.
Verwendung der Liquid Preload-Filter von Shopify
Das Liquid-Templating von Shopify bietet integrierte Preload-Unterstützung durch image_tag
Der und stylesheet_tag Filter:
{% comment %} Preload via Liquid image_tag filter {% endcomment %}
{"{{ section.settings.hero_image | image_url: width: 1200 | image_tag: preload: true, fetchpriority: 'high' }}"}{'
'}
{'
'}
{'{% comment %} Preload critical stylesheet {% endcomment %}'}{'
'}
{"{{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}"}}
Diese Flüssigkeitsfilter erzeugen automatisch das Richtige -Tags zusammen mit der tatsächlichen Ressourcenreferenz, was sauberer ist, als die Preload-Hinweise manuell zu schreiben.
Preconnect: Reduzieren Sie die Verbindungszeit mit Drittanbietern
Every time your browser needs a resource from a new domain, it performs three steps: DNS resolution (50-200ms), TCP handshake (50-150ms), and TLS negotiation (100-200ms). That's 200-550ms of connection setup bevor ein einzelnes Byte heruntergeladen wird.
Voranschluss weist den Browser an, diese Schritte frühzeitig abzuschließen, sodass die Verbindung bereits hergestellt ist, wenn die Ressource tatsächlich benötigt wird.
Gemeinsame Preconnect-Ziele für Shopify Stores
{% comment %} Add to theme.liquid <head> — before stylesheet and script tags {% endcomment %}
{'
'}
{'{% comment %} Shopify CDN — your images, fonts, and assets {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Fonts (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} Google Analytics/GTM {% endcomment %}'}{'
'}
{''}{'
'}
{'
'}
{'{% comment %} YouTube embeds (if used) {% endcomment %}'}{'
'}
{''}{'
'}
{''}} Verwendungszweck Crossorigin
Das Attribut: Fügen Sie die hinzu Crossorigin
Das Attribut attribute when the resources from that domain will be fetched with CORS (fonts, images loaded via <img> mit Crossorigin, Fetch-API-Aufrufen). Wenn Sie sich nicht sicher sind, schließen Sie es ein – im schlimmsten Fall handelt es sich um eine zusätzliche Verbindung.
Preconnect-Grenzwerte
Jede Vorverbindung verwendet einen Browser-Verbindungssteckplatz und eine kleine Menge CPU/Speicher. Browser verfügen normalerweise über 6 Verbindungen pro Domain und eine begrenzte Gesamtzahl. Beschränken Sie Vorverbindungen auf 3–5 Domänen – nur diejenigen, die Ihre Seite definitiv verwenden wird.
Für Domains, die Sie möglicherweise verwenden (z. B. ein Chat-Widget, das nur für einige Besucher geladen wird), verwenden Sie die einfachere Variante
Stattdessen DNS-Prefetch .
DNS-Prefetch: Leichte Verbindungsvorbereitung
DNS-Prefetch ist der einfachste Ressourcenhinweis – es löst nur die IP-Adresse der Domäne auf (Einsparung von 50–200 ms), ohne eine vollständige Verbindung herzustellen. Verwenden Sie es für Drittanbieter-Domains Ihrer Seite könnte benötigt:
{% comment %} DNS-prefetch for optional third-party services {% endcomment %}
{''}{'
'}
{''}{'
'}
{''}{'
'}
{''}} Best Practice: Verwendung Voranschluss für Ihre 3–5 wichtigsten Domänen. Benutzen DNS-Prefetch als Fallback für alle anderen Drittanbieter-Domains. Ein gängiges Muster besteht darin, beides einzubeziehen:
{% comment %} Belt and suspenders: preconnect with dns-prefetch fallback {% endcomment %}
{''}{'
'}
{''}}
Ältere Browser, die nicht unterstützt werden Voranschluss will still benefit from the DNS-Prefetch. Moderne Browser nutzen den Preconnect und ignorieren den redundanten DNS-Prefetch. Dies ist besonders relevant für Shopify-Shops mit Besuchern auf älteren Mobilgeräten.
Prefetch: Ressourcen für die nächste Seite vorab laden
Vorabruf teilt dem Browser mit: „Der Benutzer wird wahrscheinlich diese Seite besuchen oder als nächstes diese Ressource benötigen – laden Sie sie während der Leerlaufzeit im Hintergrund herunter.“ Dies ist nützlich für mehrseitige Reisen wie das Durchsuchen von Sammlungen → Produktseiten.
{% comment %} On collection pages: prefetch the first few product pages {% endcomment %}
{'{% for product in collection.products limit: 3 %}'}{'
'}
{' '}{'
'}
{'{% endfor %}'}{'
'}
{'
'}
{'{% comment %} Prefetch critical CSS for product pages {% endcomment %}'}{'
'}
{""}}Verwenden Sie Prefetch sorgfältig: Vorab abgerufene Ressourcen werden mit ungenutzter Bandbreite heruntergeladen, sodass kritische Inhalte nicht blockiert werden. Aber auf Mobilgeräten mit begrenzten Datentarifen verschwendet unnötiges Prefetching Bandbreite. Rufen Sie nur Ressourcen mit hoher Navigationswahrscheinlichkeit vorab ab.
Gute Kandidaten für den Prefetch auf Shopify: die Produktseite, wenn ein Benutzer mit der Maus über einen Kollektionsartikel fährt, das Checkout-Stylesheet auf der Warenkorbseite und Produktbilder, die in einem Kollektionsraster sichtbar sind.
5 häufige Fehler bei Ressourcenhinweisen auf Shopify
Ressourcenhinweise können bei falscher Implementierung nach hinten losgehen. Dies sind die Fehler, die wir am häufigsten bei der Prüfung von Shopify-Shops sehen (führen Sie a Geschwindigkeitstest und überprüfen Sie Ihre Seite <head> , um diese zu erkennen):
❌ Fehler 1: Alles vorladen
Hinzufügen Vorspannung auf 10+ Ressourcen macht den Zweck zunichte. Wenn alles „kritisch“ ist, wird nichts priorisiert. Die begrenzten Verbindungen des Browsers werden gleichmäßig auf alle Vorladevorgänge aufgeteilt, wodurch die wirklich wichtigen Verbindungen verlangsamt werden.
Fix: Laden Sie nur 2–4 Ressourcen vor: Hero-Bild, primäre Schriftart und kritisches Above-the-Fold-CSS.
❌ Fehler 2: Crossorigin fehlt beim Vorladen von Schriftarten
Schriftarten erfordern die Crossorigin
Das Attribut attribute on preload links, even when served from the same domain. Without it, the browser downloads the font twice — once from the preload (without CORS) and once from the CSS (with CORS).
Fix: Immer hinzufügen Crossorigin
Das Attribut zum Vorladen von Schriftarten: <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />
❌ Fehler 3: Nicht genutzte Ressourcen vorab laden
Chrome DevTools Console zeigt „Die Ressource wurde vorgeladen, aber nicht innerhalb weniger Sekunden verwendet“, wenn Sie etwas vorab laden, was die Seite eigentlich nicht benötigt. Dadurch werden Bandbreite und Verbindungsslots verschwendet.
Fix: Laden Sie nur Ressourcen vor, die die aktuelle Seite tatsächlich nutzt. Verwenden Sie die bedingte Liquid-Logik: {% if template == "index" %} für reine Homepage-Preloads.
❌ Fehler 4: Vorabverbindung zu ungenutzten Domänen herstellen
Eine ungenutzte Vorverbindung hält eine Verbindung etwa 10 Sekunden lang offen, bevor es zu einer Zeitüberschreitung kommt. Dies verschwendet Browser-Ressourcen und kann tatsächlich Verbindungen zu benötigten Domänen verzögern.
Fix: Überwachen Sie, welche Drittanbieter-Domains Ihre Seite tatsächlich lädt (Chrome DevTools → Netzwerk → Nach Domain sortieren). Stellen Sie nur eine Vorabverbindung zu Domänen mit Ressourcen im kritischen Pfad her.
❌ Fehler 5: Falsche Bild-URL im Hero-Preload
Das responsive Bildsystem von Shopify bietet unterschiedliche Größen basierend auf der Breite des Ansichtsfensters. Wenn Ihre Preload-URL nicht mit der URL übereinstimmt, die das CSS/HTML tatsächlich anfordert, wird der Preload verschwendet und der Browser lädt das Bild zweimal herunter.
Fix: Passen Sie die Preload-URL genau an die Anforderung des Browsers an. Verwenden Sie Shopify Bild-URL Filter mit demselben Breitenparameter, den Ihr Theme für das Heldenbild verwendet.
Wo Ressourcenhinweise in Shopify-Themes platziert werden können
Die Platzierungsreihenfolge ist wichtig. Ressourcenhinweise im <head> von dir theme.liquid sollte für maximale Wirksamkeit dieser Reihenfolge folgen:
<head>
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {% if template == "index" %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' {{ "theme.css" | asset_url | stylesheet_tag }}'}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' '}{'
'}
{' ...'}{'
'}
{''}}
Preconnects sollten so früh wie möglich erfolgen <head> , da der Browser die Verbindung sofort startet. Es sollten Preloads folgen, dann Stylesheets und dann DNS-Prefetch-Hinweise. Lesen Sie unsere Leitfaden zu renderblockierenden Ressourcen für ein vollständiges Bild zur Strukturierung Ihres Themas <head> für optimale Ladereihenfolge.
Manuelle Ressourcenhinweise vs. Thunder: Vergleich
| Faktor | Hinweise zu manuellen Ressourcen | Thunder |
|---|---|---|
| Einrichtung | Theme.liquid bearbeiten, Ressourcenprioritäten verstehen | Ein-Klick-Installation |
| LCP-Verbesserung | 500 ms – 1,5 s (Hero-Image-Vorladung) | Ähnliche Gewinne durch automatische Optimierung |
| Deckt die Skriptverzögerung ab | Nein – Hinweise verzögern Skripte nicht | Ja – vollständige Skriptverwaltung |
| Risiko einer Überoptimierung | Hoch, wenn zu viele Hinweise hinzugefügt werden | Niedrig – automatische Priorisierung |
| Wartung | Aktualisieren Sie, wenn sich das Design oder die Apps ändern | Automatisch |
Für maximale Geschwindigkeit kombinieren Sie beides: manuelles Vorladen des Heldenbildes + Thunder für umfassende Skriptoptimierung. Siehe Preis für Plandetails.
So messen Sie die Wirkung von Ressourcenhinweisen
Messen Sie nach dem Hinzufügen von Ressourcenhinweisen die Verbesserung mit diesen Tools:
- Thunders kostenloser Geschwindigkeitstest – Schneller Vorher-/Nachher-Vergleich der Gesamtleistung Ihres Shops.
- Chrome DevTools-Registerkarte „Netzwerk“. – Schauen Sie sich das Wasserfalldiagramm an. Vorinstallierte Ressourcen sollten früher heruntergeladen werden (weiter links in der Tabelle). Vorab verbundene Domänen sollten kürzere Verbindungsbalken aufweisen.
- Lighthouse – Überprüfen Sie, ob die Prüfung „Größtes Contentful Paint-Bild vorab laden“ erfolgreich ist, nachdem Sie das Vorladen des Heldenbilds hinzugefügt haben. Stellen Sie außerdem sicher, dass keine Warnungen zu „unbenutzten Vorladungen“ angezeigt werden.
- WebPageTest – Die Wasserfallansicht zeigt genau, wann der Download jeder Ressource beginnt. Vergleichen Sie Wasserfälle vor und nach dem Hinzufügen von Hinweisen, um die zeitliche Verschiebung zu erkennen.
Eine umfassende Anleitung zur Interpretation dieser Ergebnisse finden Sie in unserem Leitfaden zu Geschwindigkeitstestergebnissen und unser vollständige Anleitung zur Geschwindigkeitsoptimierung.
Häufig gestellte Fragen zu Shopify-Ressourcenhinweisen
Was sind Ressourcenhinweise in Shopify?
Ressourcenhinweise sind HTML-Linkelemente, die den Browser anweisen, Ressourcen vorzubereiten, bevor sie benötigt werden. Die vier Typen sind: preload (diese Ressource sofort herunterladen – sie wird für die aktuelle Seite benötigt), preconnect (eine Verbindung zu dieser Domain herstellen – wir werden sie bald brauchen), dns-prefetch (den DNS dieser Domain auflösen – eine leichtere Version von preconnect) und prefetch (diese Ressource für eine zukünftige Seitennavigation herunterladen). Auf Shopify werden Ressourcenhinweise im <head> Ihrer theme.liquid-Datei abgelegt oder über Liquid-Filter wie image_tag mit Preload angewendet.
Sollte ich mein Heldenbild auf Shopify vorladen?
Ja – das Vorabladen Ihres Heldenbildes ist eine der effektivsten Möglichkeiten, Largest Contentful Paint (LCP) zu verbessern. Das Heldenbild ist typischerweise das LCP-Element auf Homepages und Landingpages. Ohne Vorladung erkennt der Browser das Bild erst, nachdem er HTML und CSS heruntergeladen und analysiert hat. Beim Vorladen beginnt der Browser sofort mit dem Herunterladen des Heldenbilds, wodurch die LCP-Zeit häufig um 500 ms bis 1,5 s verkürzt wird. Verwenden Sie <link rel='preload' as='image'> in Ihrem theme.liquid-Head für das Heldenbild.
Was ist der Unterschied zwischen Preload und Preconnect?
Preload tells the browser to download a specific file immediately — you know the exact URL of the resource. Preconnect tells the browser to establish a connection (DNS + TCP + TLS) to a domain — you know you'll need resources from that domain but don't know the exact URLs yet. Use preload for known critical resources like hero images and key fonts. Use preconnect for third-party domains like Google Fonts, YouTube, or analytics services.
Können zu viele Ressourcenhinweise die Leistung von Shopify beeinträchtigen?
Ja. Jeder Preload und Preconnect konkurriert um die begrenzten Verbindungsslots und die begrenzte Bandbreite des Browsers. Wenn Sie mehr als 10 Ressourcen vorab laden, teilen Sie dem Browser im Wesentlichen mit, dass alles kritisch ist – was bedeutet, dass nichts priorisiert wird. Best Practice: Laden Sie nur zwei bis vier wirklich wichtige Ressourcen vorab (Hero-Bild, primäre Schriftart, kritisches CSS), verbinden Sie sich vorab mit zwei bis drei wichtigen Drittanbieterdomänen und verwenden Sie Prefetch sparsam für wahrscheinliche Navigationen auf der nächsten Seite. Übermäßige Andeutungen sind schlimmer als gar keine Hinweise.
Verarbeitet Thunder Page Speed Optimizer Ressourcenhinweise?
Thunder optimiert automatisch die Ladepriorität von Ressourcen, einschließlich der Verwaltung, wie und wann Ressourcen von Drittanbietern verbunden und heruntergeladen werden. Anstatt manuelle Preconnect- oder Preload-Tags hinzuzufügen, sorgt die Skriptverzögerung und Ressourcenpriorisierung von Thunder dafür, dass kritische Ressourcen zuerst geladen werden, während unkritische Skripts von Drittanbietern warten. Dadurch werden ähnliche Ergebnisse erzielt wie mit manuellen Ressourcenhinweisen, ohne dass Änderungen am Theme-Code erforderlich sind.
Wie lade ich Schriftarten auf Shopify vor?
Add a preload link in your theme.liquid <head> für Ihre wichtigste Schriftartdatei (normalerweise die Fließtextschriftart im WOFF2-Format). Die Syntax lautet: <link rel='preload' href='your-font.woff2' as='font' type='font/woff2' crossorigin>. The crossorigin attribute is required for fonts even if they're on the same domain. Only preload 1-2 font files — preloading all font weights wastes bandwidth on files the current page may not need.
Sorgen Sie mit Ressourcenhinweisen dafür, dass jede Millisekunde zählt
Ressourcenhinweise sind eine der Shopify-Geschwindigkeitsoptimierungen mit dem geringsten Aufwand und der größten Wirkung, die Sie implementieren können. Das Vorladen eines einzelnen Heldenbildes kann den LCP um mehr als eine Sekunde verbessern. Strategische Vorverbindungen ersparen Hunderte von Millisekunden Verbindungsaufbauzeit. Der Schlüssel liegt in der Zurückhaltung: Laden Sie nur das vor, was wirklich wichtig ist, und überlassen Sie den Rest dem Browser.
Beginnen Sie mit den beiden Änderungen mit der größten Auswirkung: Laden Sie Ihr Hero-Image vorab und verbinden Sie sich vorab mit Ihren am häufigsten verwendeten Drittanbieter-Domains. Dann verwenden Thunder Page Speed Optimizer für umfassende Ressourcenpriorisierung und Drittanbieter-Skriptverwaltung in Ihrem gesamten Shopify-Shop.
Testen Sie jetzt die Geschwindigkeit Ihres Shops , um zu sehen, wo die Ressourcenauslastung Sie verlangsamt, und verwenden Sie die Techniken in diesem Leitfaden, um das Problem zu beheben.
Expert Speed Optimization for Your Store
Our team handles everything — theme optimization, app cleanup, Core Web Vitals guarantee. Most stores optimized in 2 weeks.
✅ Core Web Vitals Guarantee · ⚡ 2-Week Delivery · 🎁 6 Months Free Thunder
Starting from €1,500 · Learn more