Beschleunigen Sie Shopify-Produktseiten in 60 Sekunden
Bevor Sie sich mit manuellen Optimierungen befassen, Testen Sie die Seitengeschwindigkeit Ihres Produkts , um Ihren aktuellen Punktestand anzuzeigen. Geben Sie eine Produktseiten-URL (nicht nur Ihre Homepage) ein, um ein genaues Bild zu erhalten. Wenn Ihr mobiler Score unter 60 liegt, Thunder Page Speed Optimizer kann sofort helfen:
- Verschiebt Bewertungs-App-Skripte (Judge.me, Loox, Stamped), sodass Ihre Produktbilder zuerst gerendert werden
- Verzögert Upsell- und Cross-Selling-Widget-JavaScript bis nach dem Laden der Seite
- Optimiert die Ladereihenfolge für Analysen und Chat-Skripte auf Produktseiten
- Funktioniert mit allen Shopify 2.0-Themes – keine Codeänderungen erforderlich
Für Händler, die verstehen möchten, was ihre Produktseiten verlangsamt und auch manuell optimieren möchten, lesen Sie weiter.
Warum Shopify-Produktseiten langsamer sind als andere Seiten
Ihre Homepage könnte auf Mobilgeräten einen Wert von 75 erreichen, während Ihre Produktseiten einen Wert von 45 erreichen. Dieser Abstand ist nicht zufällig. Produktseiten beanspruchen deutlich mehr Ressourcen als jeder andere Seitentyp in Ihrem Shop:
| Ressource | Typische Größe | Warum es geladen ist |
|---|---|---|
| Produktbilder (5-10) | 500KB-2MB | Galerie, Zoom, Variantenbilder |
| App-Skripte überprüfen | 150-500KB | Sternebewertungen, Rezensionskarussell |
| Upselling/Cross-Selling-Apps | 100-400KB | „Das könnte Ihnen auch gefallen“-Widgets |
| Variantenselektor JS | 20-80KB | Farbmuster, Größenauswahl |
| Produkt-JSON-Daten | 10-150KB | Variantenpreise, Lagerbestand, Metafelder |
| Analytics-Skripte | 150-600KB | Verbessertes E-Commerce-Tracking |
| Chat-Widget | 300-800KB | Support-Blase auf jeder Seite |
Eine typische Produktseite mit Rezensionen, Upsell-Empfehlungen, Analysen und einem Chat-Widget wird geladen 1,5–4 MB JavaScript allein – oben auf den Produktbildern. Vergleichen Sie das mit einer Homepage mit einem Heldenbild und einigen vorgestellten Produkten, die 500 KB bis 1 MB JavaScript lädt.
Die Ironie: Auf den Produktseiten findet die Konvertierung statt. Eine langsame Produktseite kostet Sie direkt Umsatz. Unser Geschwindigkeits- und Conversion-Daten zeigt, dass jede zusätzliche Sekunde Ladezeit der Produktseite die Konversionsraten um 7–12 % senkt.
Produktbilder auf Geschwindigkeit optimieren
Produktbilder sind in der Regel die größte Einzelressource auf Produktseiten – und am häufigsten LCP-Element. Die richtige Bildoptimierung ist die wirkungsvollste manuelle Änderung, die Sie vornehmen können.
Abmessungen und Format hochladen
- Maximale Upload-Größe: 2000 x 2000 Pixel. Das CDN von Shopify generiert automatisch kleinere Versionen über
Quelle. Das Hochladen von 4000-Pixel-Originalen verschwendet Verarbeitungszeit und Speicherplatz. - Verwenden Sie JPEG für Produktfotos – 80-85 % Qualität sorgt für die beste Balance. PNG nur für Produkte mit Transparenz (Glas, Overlays).
- Shopify konvertiert automatisch zu WebP für Browser, die es unterstützen, aber die Qualität der Quelldatei ist für den Fallback immer noch wichtig.
- Vor dem Hochladen komprimieren. Tools wie TinyPNG oder Squoosh können die Bildgröße ohne sichtbaren Qualitätsverlust um 40–60 % reduzieren. Unser Leitfaden zur Bildoptimierung deckt den gesamten Workflow ab.
Anzahl der Produktbilder
Jedes Produktbild verleiht der Seite Gewicht – auch bei Lazy Loading. Shopify-Themes laden in der Regel die ersten 1–2 Bilder per Eager und den Rest per Lazy-Load, aber der Browser erkennt beim ersten Laden der Seite trotzdem alle Bild-URLs und beginnt mit der Analyse.
| Bilder pro Produkt | Auswirkungen auf die Seitengewichtung | Empfehlung |
|---|---|---|
| 1-3 Bilder | 100-400KB | Ideal für einfache Produkte |
| 4-6 Bilder | 300-800KB | Optimaler Platz für die meisten Produkte |
| 7-10 Bilder | 500KB-1.5MB | Mode/Möbel – sorgen Sie dafür, dass Lazy Loading funktioniert |
| 10+ Bilder | 1MB+ | Ziehen Sie stattdessen Video für Detailaufnahmen in Betracht |
Laden Sie das Hauptproduktbild vor
Das erste Produktbild ist fast immer das LCP-Element auf Produktseiten. Durch das Vorladen wird der Browser angewiesen, es abzurufen, bevor es im HTML entdeckt wird, wodurch LCP um 300–800 ms verkürzt wird:
{% comment %} Add to theme.liquid <head> {% endcomment %}
{'{% if template contains "product" %}'}{'
'}
{' {% assign featured_image = product.featured_image %}'}{'
'}
{' {% if featured_image %}'}{'
'}
{' '}{'
'}
{' {% endif %}'}{'
'}
{'{% endif %}'}} Weitere Vorladetechniken finden Sie in unserem Leitfaden mit Ressourcenhinweisen für Shopify.
Produktseiten-App-Skripte: Der versteckte Geschwindigkeitskiller
Viele Shopify-Apps zielen speziell auf Produktseiten ab. Bewertungs-Widgets, Upsell-Empfehlungen, Größentabellen, Vertrauensabzeichen – sie alle integrieren JavaScript, das auf jeder Produktseite ausgeführt wird. So wirken sich die gängigsten Produktseiten-Apps auf die Geschwindigkeit aus:
Apps überprüfen
Bewertungs-Apps sind für den Social Proof unerlässlich, gehören aber zu den schwersten Skripten auf Produktseiten. Sie laden Sterne-Bewertungs-Widgets, Bewertungskarussells, Fotorezensionen und Frage-und-Antwort-Abschnitte – alle erfordern umfangreiches JavaScript:
- Judge.me: 150-300 KB JS – relativ leichtgewichtig unter den Test-Apps
- Loox (Fotobewertungen): 200–500 KB JS – schwerer aufgrund der Bildergalerie-Funktionalität
- Stamped.io: 150-400 KB JS – variiert je nachdem, welche Widgets aktiviert sind
- Yotpo: 300–600 KB JS – aufgrund der umfassenden Funktionen eines der schwersten
Bewertungen sind entscheidend für die Konvertierung, daher ist das Entfernen der App nicht die Lösung. Verschieben Sie stattdessen das Überprüfungsskript, sodass das Produktbild, der Titel, der Preis und die Schaltfläche „In den Warenkorb“ zuerst gerendert werden. Thunder erledigt dies automatisch.
Upselling- und Cross-Selling-Apps
"Frequently bought together" and "You may also like" widgets add 100-400KB of JavaScript plus additional product image requests. These widgets are valuable below the fold but shouldn't block the main product content from rendering.
Trust Badge und Social Proof Apps
Trust-Badge-Apps (kostenlose Versandabzeichen, sichere Zahlungssymbole) scheinen leichtgewichtig zu sein, aber viele laden 50–150 KB JavaScript für einfache statische Bilder. Erwägen Sie, App-basierte Vertrauensausweise durch statisches HTML/CSS direkt in Ihrem Theme zu ersetzen – kein JavaScript, gleiche visuelle Wirkung. Unser Leitfaden zum Thema Apps, die Ihren Shop verlangsamen listet die schlimmsten Straftäter und schnellere Alternativen auf.
So prüfen Sie Produktseitenskripte
- Öffnen Sie eine Produktseite in Chrome → DevTools → Registerkarte „Netzwerk“.
- Filtern Sie nach „JS“, um alle JavaScript-Dateien anzuzeigen
- Nach Größe sortieren (größte zuerst)
- Suchen Sie nach Domänen von Drittanbietern – jede stellt eine App oder ein externes Skript dar
- Beachten Sie, welche Skripte das Rendern blockieren (überprüfen Sie die Spalte „Initiator“).
This audit often reveals surprises — scripts from apps you forgot you installed, or Skripte von Drittanbietern Laden auf Produktseiten, wo sie keinen Zweck erfüllen.
Geschwindigkeit der Variantenauswahl auf Shopify-Produktseiten
Produkte mit vielen Varianten (Größe, Farbe, Material) stellen Leistungsherausforderungen dar. Das Shopify-Produkt-JSON-Objekt – eingebettet in jede Produktseite – enthält Daten für jede Variante, einschließlich Preis, Lagerbestandsstatus und Bilder.
Auswirkung nach Variantenanzahl:
- Unter 20 Varianten: Vernachlässigbare Auswirkung (~5–20 KB JSON)
- 20-50 Varianten: Mäßige Auswirkung (~20–60 KB JSON)
- 50-100 Varianten: Spürbare Auswirkungen (~60–150 KB JSON, kann INP beeinträchtigen)
- 100+ Varianten: Signifikant – Erwägen Sie die Aufteilung in mehrere Produkte
Über das Datengewicht hinaus können Variantenselektoren mit vielen Optionen zu Problemen führen INP-Probleme wenn das JavaScript, das den Variantenwechsel übernimmt, nicht optimiert ist. Jede Variantenänderung löst eine DOM-Aktualisierung für Preis, Verfügbarkeit und möglicherweise Bilder aus – je mehr Varianten, desto umfangreicher jede Interaktion.
Optimierungstipp: Wenn Sie variantenspezifische Bilder haben, stellen Sie sicher, dass nur das Bild der aktuellen Variante per Eager geladen wird. Überlassen Sie Lazy Loading den Rest. Einige Themes rufen alle Variantenbilder vorab ab, was die Seitengröße massiv erhöht.
Shopify-Produktseitenstruktur für maximale Geschwindigkeit
Die Reihenfolge und Struktur Ihrer Produktseitenabschnitte sind sowohl für die wahrgenommene als auch für die gemessene Geschwindigkeit von Bedeutung. Hier ist der optimale Aufbau für schnelle Produktseiten:
Above the Fold (Sofort laden)
- Produktbildergalerie – Erstes Bild vorinstalliert, Rest verzögert geladen
- Produkttitel und Preis – Einfaches HTML, kein JavaScript erforderlich
- Variantenauswahl – Minimales JS für das Dropdown/Farbfeld
- Schaltfläche „Zum Warenkorb hinzufügen“. – Muss sofort funktionsfähig sein
- Kurze Beschreibung – Erste 2-3 Sätze der Produktbeschreibung
Below the Fold (Lazy Load)
- Vollständige Produktbeschreibung – Kann zusammenklappbare Laschen verwenden
- Bewertungs-Widget – Das Skript zurückstellen und nach dem Scrollen anzeigen
- Verwandte Produkte / „Das könnte Ihnen auch gefallen“ – Beim Scrollen laden
- Zuletzt angesehene Produkte – Beim Scrollen laden
- Vertrauensabzeichen und Garantien – Statisches HTML, kein JS erforderlich
The key principle: everything the customer needs to make a purchase decision (image, price, Add to Cart) should load first. Everything else can wait. This is what separates a product page that scores 40 on mobile from one that scores 70.
Einen umfassenden Ansatz zur filialweiten Optimierung finden Sie in unserem vollständige Anleitung zur Geschwindigkeitsoptimierung.
Mobile Product Page Speed: Das Conversion-Schlachtfeld
Over 70% of Shopify traffic comes from mobile devices, and product pages are where the speed gap between mobile and desktop is largest. A product page scoring 90 on desktop might score 45 on mobile because:
- Mobile CPUs sind langsamer – Das Parsen von JavaScript dauert auf durchschnittlichen Mobilgeräten 3–5x länger als auf Desktops
- Mobilfunknetze sind weniger zuverlässig – Selbst bei 4G führen Latenzspitzen zu Verzögerungen beim Laden von Ressourcen
- Produktbildgalerien sind auf Mobilgeräten umfangreicher – Wischbare Galerien laden häufig benachbarte Bilder vor, um ein reibungsloses Wischen zu ermöglichen
- Mobile Ansichtsfenster lösen unterschiedliche Layouts aus – Einige Themes laden zusätzliches CSS und JS für mobilspezifische Produktseitenlayouts
Überprüfen Sie Ihre Mobile vs. Desktop-Geschwindigkeitswerte – wenn der Abstand mehr als 30 Punkte beträgt, gibt es wahrscheinlich eine JavaScript-lastige App, die auf Mobilgeräten besonders problematisch ist. Verwenden Sie die CPU-Drosselung (4-fache Verlangsamung) von Chrome DevTools, um das mobile Erlebnis auf dem Desktop zu simulieren.
Thunder zielt speziell auf die mobile Leistung ab – die Skriptverzögerung hat den größten Einfluss auf die mobilen Ergebnisse, da hier das JavaScript-Parsing den Flaschenhals darstellt. Siehe Preispläne.
Produktseitengeschwindigkeit und SEO: Was Google misst
Google verwendet Core Web Vitals als Rankingfaktor und Ihre Produktseiten werden individuell gemessen. Eine langsame Produktseite kann in den Suchergebnissen schlechter abschneiden, selbst wenn Ihre Homepage schnell ist. Die wichtigsten Kennzahlen für Produktseiten:
- LCP (Größte Contentful Paint): Normalerweise das Hauptproduktbild. Ziel unter 2,5 Sekunden. Das Vorladen des Bildes ist die Lösung Nr. 1.
- INP (Interaktion mit nächster Farbe): Variantenauswahl, Klicks zum Hinzufügen zum Warenkorb und Galerieinteraktionen. Ziel unter 200 ms. In der Regel sind umfangreiche App-Skripte der Übeltäter.
- CLS (Cumulative Layout Shift): Bildergalerien ohne explizite Abmessungen, Bewertungs-Widgets laden spät und schieben den Inhalt nach unten, Preisänderungen bei der Variantenauswahl. Ziel unter 0,1.
Korrigieren Sie diese Kennzahlen mit unseren speziellen Leitfäden: LCP-Optimierung, INP-Korrekturen, und CLS-Korrekturen.
Produktseitengeschwindigkeit: Manuelle Korrektur vs. Thunder
| Optimierung | Manueller Ansatz | Mit Donner |
|---|---|---|
| Überprüfung des Skriptaufschubs | Theme-Code bearbeiten, es besteht die Gefahr, dass die Bewertungsanzeige beschädigt wird | Automatisch – Rezensionen werden direkt nach dem Rendern der Seite weiterhin geladen |
| Upsell-Widget-Optimierung | App-Entwickler kontaktieren, eingeschränkte Optionen | Automatische Zurückstellung unkritischer Widgets |
| Analytics-Skriptverwaltung | Benutzerdefinierte Ladestrategie pro Skript | Alle Analysen werden ohne Datenverlust verschoben |
| Bildvorladen | Vorladehinweis in theme.liquid hinzufügen | Automatische Ressourcenpriorisierung |
| Typischer mobiler Score-Lift | 10-20 Punkte (Arbeitsstunden) | 20-35 Punkte (60 Sekunden Aufbau) |
Beste Ergebnisse: Kombinieren Sie die manuelle Bildoptimierung mit Thunders automatische Skriptoptimierung. Siehe aktuelle Pläne.
Checkliste für die Geschwindigkeit von Produktseiten
Work through this checklist from top to bottom — items are ordered by impact:
- Installieren Sie den Thunder Page Speed Optimizer – Verschiebt alle unkritischen Skripte auf Produktseiten. Größte Wirkung, geringster Aufwand. Jetzt installieren
- Komprimieren Sie alle Produktbilder – Verwenden Sie TinyPNG oder Squoosh, zielen Sie auf weniger als 200 KB pro Bild bei maximal 2000 x 2000 Pixel.
- Beschränken Sie die Bilder auf 4–6 pro Produkt – Mehr Bilder = mehr Gewicht. Verwenden Sie bei Bedarf Videos für zusätzliche Blickwinkel.
- Laden Sie das Hauptproduktbild vor — Add the preload hint from the code snippet above.
- Produktseiten-Apps prüfen — Count JavaScript files from third-party domains. Remove apps you're not using.
- Ersetzen Sie App-basierte Vertrauensausweise durch statisches HTML – Für statische Bilder ist kein JavaScript erforderlich.
- Variantenanzahl reduzieren – Teilen Sie Produkte mit mehr als 100 Varianten in separate Angebote auf.
- Stellen Sie sicher, dass Lazy Loading funktioniert – Überprüfen Sie, ob die Bilder unterhalb des Falzes vorhanden sind
wird geladen="faul". - Test auf dem Handy – Laufen unser Geschwindigkeitstest mit einer Produktseiten-URL, nicht nur der Homepage.
Häufig gestellte Fragen zur Shopify-Produktseitengeschwindigkeit
Was ist ein guter Geschwindigkeitswert für eine Shopify-Produktseite?
A realistic target for Shopify product pages is 60-80 on mobile and 85-95 on desktop in PageSpeed Insights. Stock themes with no apps score 80-95 on mobile, but real stores with review apps, upsell widgets, and analytics rarely stay above 70. If your product pages score below 40 on mobile, there's a significant optimization opportunity — typically from app scripts and unoptimized product images.
Warum sind meine Shopify-Produktseiten langsamer als meine Homepage?
Produktseiten beanspruchen mehr Ressourcen als die meisten anderen Seiten: hochauflösende Produktbilder (oft 5–10 pro Produkt), Variantenauswahl-JavaScript, Bewertungs-Widgets, Upsell-/Cross-Selling-App-Skripte und strukturiertes Daten-Markup. Viele Apps fügen Skripte auch gezielt auf Produktseiten ein, die nicht auf der Startseite ausgeführt werden. Eine Homepage mit einem einzigen Heldenbild und minimalen Abschnitten muss weitaus weniger geladen werden als eine Produktseite mit einer Galerie, Rezensionen und empfohlenen Produkten.
Wie viele Produktbilder sollte ich für die beste Geschwindigkeit verwenden?
Verwenden Sie 4-6 Produktbilder für die beste Balance zwischen Konvertierung und Geschwindigkeit. Jedes weitere Bild fügt je nach Auflösung 50–200 KB hinzu. Bei mehr als 6 Bildern überwiegen bei den meisten Produkten die Geschwindigkeitskosten den Konvertierungsvorteil. Wenn Sie mehr Bilder benötigen (Möbel, Mode), nutzen Sie Lazy Loading aggressiv, sodass nur die ersten 1–2 Bilder sofort geladen werden. Das native Lazy Loading von Shopify erledigt dies in den meisten modernen Themes.
Verlangsamen Produktbewertungen die Shopify-Produktseiten?
Ja – Bewertungs-Apps gehören zu den Hauptautoren von Skripten auf Produktseiten. Judge.me fügt 150–300 KB JavaScript hinzu, Loox (mit Fotorezensionen) fügt 200–500 KB hinzu und Stamped fügt 150–400 KB hinzu. Die Skripte werden auf jeder Produktseite geladen, unabhängig davon, ob das Produkt Bewertungen hat oder nicht. Thunder verschiebt Bewertungs-App-Skripte, sodass sie nach dem Rendern der Seite geladen werden, wodurch der SEO-Wert der Bewertungen ohne Geschwindigkeitseinbußen erhalten bleibt.
Beeinflusst die Anzahl der Produktvarianten die Seitengeschwindigkeit?
Somewhat. Each variant adds data to the product JSON object embedded in the page. A product with 100+ variants (e.g., size × color × material combinations) can add 50-150KB of inline JSON. The bigger impact comes from variant-specific images — if each variant has its own image set, the browser may preload more images than necessary. Keep variants under 50 when possible and use a consistent image set across similar variants.
Wie beschleunigt Thunder konkret Shopify-Produktseiten?
Thunder verschiebt sämtliches unkritisches JavaScript auf Produktseiten – einschließlich Bewertungs-Widgets, Upsell-Apps, Analyseskripts und Chat-Widgets –, sodass sie geladen werden, nachdem die Seite interaktiv wird. Dies bedeutet, dass die Produktbildgalerie, der Titel, der Preis und die Schaltfläche „In den Warenkorb“ schneller dargestellt werden. Die meisten Produktseiten verzeichnen eine Verbesserung des mobilen PageSpeed-Scores um 20–35 Punkte. Thunder ist vollständig kompatibel mit allen Shopify 2.0-Themes und beeinträchtigt die Funktionalität der Produktseiten nicht.
Machen Sie Ihre Shopify-Produktseiten schnell
Product pages are your most important pages and typically your slowest. The speed gap comes from product image galleries, review widgets, upsell apps, and analytics scripts — all fighting for bandwidth on the page where conversion happens.
Die effektivste Optimierung der Produktseitengeschwindigkeit kombiniert: Komprimieren und Einschränken von Produktbildern, Vorladen des Hauptproduktbilds, Überprüfen und Entfernen unnötiger Apps und Verwenden Thunder Page Speed Optimizer , um alle nicht kritischen Skripte zurückzustellen, sodass Ihr Produktinhalt zuerst gerendert wird.
Testen Sie jetzt eine Produktseite – nicht Ihre Homepage – um den tatsächlichen Page-Speed-Score Ihres Produkts anzuzeigen. Arbeiten Sie dann die obige Checkliste ab, um die Lücke zu schließen.
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