Beschleunigen Sie Ihre Shopify-Homepage in 60 Sekunden
Führen Sie einen kostenlosen Geschwindigkeitstest auf Ihrer Homepage durch , um genau zu sehen, was es verlangsamt. Die Diagnose zeigt, welche Ressourcen das Rendern blockieren und welche Bilder optimiert werden müssen. Für eine sofortige Lösung: Thunder Page Speed Optimizer behebt automatisch die schwerwiegendsten Probleme mit der Homepage-Geschwindigkeit:
- Defers render-blocking JavaScript from apps and theme (often 500KB-2MB on homepages)
- Optimiert das Laden von CSS, sodass „above-the-fold“-Inhalte sofort gerendert werden
- Lazy lädt Offscreen-Bilder in vorgestellten Sammlungen und unten liegenden Abschnitten
- Lädt wichtige Ressourcen wie Ihr Heldenbild vor
Installation mit einem Klick, keine Codeänderungen, funktioniert mit jedem Shopify-Theme. Die folgenden manuellen Optimierungen bescheren Ihnen zusätzlich zu den automatischen Verbesserungen von Thunder zusätzliche Gewinne.
Warum Ihre Shopify-Homepage die langsamste Seite ist
Produktseiten laden 5–10 Abschnitte. Sammlungsseiten laden ein Raster und einige Filter. Aber Homepages? Sie sind ein Schaufenster von alles – Heldenbanner, vorgestellte Kollektionen, Bestseller, Neuankömmlinge, Testimonials, Markengeschichten, Instagram-Feeds, Newsletter-Popups und mehr. Jeder Abschnitt fügt hinzu:
- DOM-Knoten – mehr HTML-Elemente, die der Browser analysieren und rendern kann. Eine Homepage mit 20 Abschnitten kann 3.000–5.000 DOM-Knoten haben.
- Bilder – jede vorgestellte Sammlung lädt 4–16 Produktbilder, Heldenabschnitte laden 1–5 Folien, Testimonials fügen Avatare hinzu. Eine typische Homepage lädt insgesamt 40–80 Bilder.
- JavaScript – Diashow-Bibliotheken, Countdown-Timer, Animationsskripte, Karussell-JS. Homepage-spezifisches JS kann 200–500 KB zusätzlich zu Theme- und App-Skripten hinzufügen.
- App-Widgets – Live-Chat, Bewertungsabzeichen, Cookie-Zustimmung, Ankündigungsleisten, Pop-ups. Jeder lädt sein eigenes JS/CSS-Bundle.
Das Ergebnis: Homepages erzielen durchweg 10–20 Punkte weniger Punkte als Produktseiten auf Google PageSpeed Insights. Lassen Sie uns das Abschnitt für Abschnitt beheben.
Hero-Bereich: Der Geschwindigkeitskiller Nr. 1 auf der Shopify-Homepage
Ihr Heldenbereich ist fast immer der Größtes Contentful Paint (LCP)-Element – die wichtigste Kennzahl für die wahrgenommene Ladegeschwindigkeit. Die Heldenoptimierung hat den größten Einfluss aller einzelnen Änderungen.
Einzelbild vs. Diashow
Eine Helden-Diashow sieht beeindruckend aus, beeinträchtigt aber die Leistung. Hier sind die tatsächlichen Kosten:
| Faktor | Einzelnes Heldenbild | 3-Dia-Diashow |
|---|---|---|
| Bilder geladen | 1 (200-400 KB) | 3 (600 KB-1,2 MB) |
| JavaScript erforderlich | 0KB | 30-100KB |
| CLS-Risiko | Keine | Hoch (verschiedene Bildgrößen) |
| LCP-Auswirkung | Schnell (vorladbar) | Langsam (konkurrierende Downloads) |
| Konvertierungsdaten | Höhere CTR (fokussierte Botschaft) | Niedrigere CTR (Bannerblindheit) |
Checkliste zur Hero-Bildoptimierung
- Verwenden Sie ein einzelnes statisches Heldenbild – eine klare Botschaft, ein CTA, keine Animationen
- Laden Sie das Heldenbild vor – hinzufügen
im<head>mitfetchpriority="hoch" Stattdessen - Größe entsprechend anpassen – Desktop-Held mit 1920 x 700–900 Pixel, Mobilgerät mit 750 x 900 Pixel. Laden Sie kein 3000-Pixel-Bild.
- Verwenden Sie responsive Bilder – verschiedene Größen für Mobilgeräte und Desktops bereitstellen
QuelleundGrößenAttribute - Vermeiden Sie Text-auf-Bild-Überlagerungen wo möglich – verwenden Sie HTML-Text über dem Bild, damit der Text gerendert wird, bevor das Bild geladen wird
- Laden Sie den Helden niemals faul – das ist das LCP-Element. Es sollte sofort mit geladen werden
Loading="eager"
Ausgewählte Sammlungsbereiche: Weniger ist mehr
Empfohlene Sammlungen sind der zweitgrößte Geschwindigkeitsverlust auf der Homepage. Jeder Sammlungsbereich lädt 4–16 Produktbilder und die meisten Homepages verfügen über 2–4 Sammlungsbereiche. Das ist potenziell 64 Produktbilder auf einer einzigen Seite.
Optimierungsstrategien
- Zeige 4-8 Produkte pro Kollektion statt 12-16. Mehr Produkte = mehr Bilder = langsamere Seite.
- Eine Kollektion oberhalb der Falte, der Rest darunter – Lazy Load aller unten liegenden Sammlungsabschnitte
- Verwenden Sie kleinere Produktbilder – Miniaturansichten von Homepage-Produkten benötigen keine Auflösung von 1000 Pixel. Eine Breite von 400–600 Pixel ist ausreichend.
- Beschränkung auf 2 vorgestellte Sammlungsabschnitte – Die meisten Besucher klicken sich sowieso durch die Sammlungsseiten. Die Homepage muss sie nur leiten.
- Vermeiden Sie Sammelkarussells – Sie laden alle Bilder im Voraus, um ein reibungsloses Scrollen zu ermöglichen. Ein Raster mit dem Link „Alle anzeigen“ ist schneller und gleichermaßen effektiv.
Die eigentlichen Kollektionsseiten (die viele weitere Produkte laden) finden Sie auf unserer Leitfaden zur Geschwindigkeit der Sammlungsseite.
Videohintergründe und Einbettungen auf Ihrer Homepage
Ein Video-Hero oder ein Markenstory-Video kann 2–5 MB zu Ihrer Homepage hinzufügen, wenn es direkt geladen wird. YouTube- und Vimeo-Einbettungen sind leichter, laden aber dennoch 500 KB bis 1 MB an Iframe-Ressourcen. Die Lösung ist die Fassadenmuster:
- Zeigt ein statisches Miniaturbild anstelle des eigentlichen Videoplayers an
- Wenn der Besucher auf das Miniaturbild klickt, ersetzen Sie es durch das eingebettete echte Video
- Dies spart 500 KB-5 MB beim ersten Laden der Seite für Besucher, die das Video nie abspielen (die meisten von ihnen).
Vollständige Implementierungsdetails, einschließlich YouTube Lite- und Vimeo-Fassadencode, finden Sie in unserem Leitfaden zur Shopify-Videooptimierung.
Wenn Sie in Ihrem Heldenbereich ein Hintergrundvideo verwenden: Ersetzen Sie es auf Mobilgeräten durch ein statisches Bild. Mobile Verbindungen sind langsamer, Bildschirme kleiner und die meisten mobilen Benutzer haben Datenbeschränkungen. Die visuelle Wirkung eines Hintergrundvideos auf einem 375-Pixel-Bildschirm ist im Vergleich zu den Leistungskosten minimal.
Homepage-App-Widgets: Die versteckte Geschwindigkeitssteuer
Jede Shopify-App, die Sie installieren, kann JavaScript und CSS in Ihre Homepage einfügen. Sogar Apps, die leichtgewichtig erscheinen, summieren sich. Hier sind die tatsächlichen Kosten für gängige Homepage-Widgets:
| Widget-Typ | JS/CSS hinzugefügt | Geschwindigkeitseinfluss | Empfehlung |
|---|---|---|---|
| Live-Chat (Tidio, Gorgias) | 200-500KB | Hoch | Interaktion verzögern oder laden |
| Bewertungsabzeichen (Judge.me, Loox) | 100-300KB | Mittel | Nur auf Produktseiten laden |
| Cookie-Einwilligung (DSGVO) | 50-200KB | Mittel | Verwenden Sie ein leichtes Banner |
| Instagram-Feed | 500KB-1MB | Hoch | Durch statische Bilder ersetzen |
| Countdown-Timer | 50-100KB | Niedrig-Mittel | Verwenden Sie nur CSS oder verschieben Sie JS |
| Newsletter-Popup | 100-300KB | Mittel | Laden nach dem Rendern der Seite |
Ein Shop mit 5-6 dieser Widgets wird geladen 1-3 MB zusätzliches JavaScript nur für Homepage-Widgets. Dazu kommen Theme-JS, Shopifys eigenes JS und Analyseskripte. Erfahren Sie mehr über die Identifizierung problematischer Apps in unserem Apps, die Ihren Shop verlangsamen Anleitung.
Thunder verschiebt unkritische App-Skripte automatisch – die Seite wird zuerst gerendert, dann werden die Widgets im Hintergrund geladen. Dies ist die Änderung mit den größten Auswirkungen für die meisten Homepages.
Überprüfen Sie die Abschnitte Ihrer Shopify-Homepage
Öffnen Sie Ihren Shopify-Adminbereich → Online-Shop → Anpassen → Startseite. Zählen Sie Ihre Abschnitte. Wenn Sie mehr als 12 haben, beeinträchtigen Sie wahrscheinlich die Leistung ohne proportionalen Conversion-Vorteil. Hier ist ein Rahmen für die Entscheidung, was bleibt:
✅ Behalten (hoher Conversion-Wert)
- Heldenbanner mit primärem CTA
- 1–2 vorgestellte Sammelgitter (jeweils 4–8 Produkte)
- Social Proof / Testimonials (textbasiert, keine eingebetteten Widgets)
- Wertversprechen (Versand, Retouren, Garantien)
- Footer CTA / Newsletter-Anmeldung
❌ Erwägen Sie die Entfernung (geringer Wert, hohe Kosten)
- Instagram-Feed (hohe Bandbreite, geringe Konvertierung)
- Mehrere Diashows / Karussells
- Blog-Beitragsabschnitte (stattdessen Link zum Blog)
- Karte / Filialsuche auf der Startseite
- Redundante Sammlungsabschnitte (3+ vorgestellte Sammlungen)
- Automatische Wiedergabe von Videohintergründen
Jeder Abschnitt, den Sie entfernen, besteht aus Bildern, die nicht geladen werden, DOM-Knoten, die nicht analysiert werden, und JavaScript, das nicht ausgeführt wird. Für eine tiefergehende standortweite Prüfung folgen Sie unserem Shopify-Geschwindigkeitsaudit-Checkliste.
Geschwindigkeit der mobilen Homepage: Wo es am meisten darauf ankommt
Over 70% of Shopify traffic comes from mobile devices — and mobile is where homepage speed problems are most severe. Slower connections, less RAM, smaller screens mean every extra kilobyte hurts more. Here's what to focus on:
- Stellen Sie für Mobilgeräte optimierte Heldenbilder bereit – Laden Sie keinen 1920×900 Pixel großen Helden auf einen 375 Pixel großen Bildschirm. Benutzen
QuelleundGrößen-Attribute zur Bereitstellung eines 750-Pixel-Bildes auf Mobilgeräten. Dies allein kann 200-400 KB einsparen. - Reduzieren Sie sichtbare Produkte auf Mobilgeräten – ein 4-spaltiges Produktraster auf dem Desktop wird zu einem 2-spaltigen Raster auf Mobilgeräten. Zeigen Sie 4 statt 8 Produkte an – der Rest erfordert ohnehin Scrollen.
- Deaktivieren Sie Videohintergründe auf Mobilgeräten – mithilfe einer CSS-Medienabfrage oder Designeinstellungen durch ein statisches Bild ersetzen. Hintergrundvideos zu Mobilgeräten verschwenden Bandbreite und Akku.
- Vereinfachen Sie die mobile Navigation – Mega-Menüs, die beim Hover Dutzende von Sammlungsbildern laden, werden zu umfangreichen mobilen Hamburger-Menüs, die dieselben Bilder vorab laden.
- Test auf echten Geräten – Die Drosselung durch Chrome DevTools simuliert die echte mobile Leistung nicht perfekt. Benutzen unser Geschwindigkeitstest-Tool oder Googles PageSpeed Insights mit einer echten Mobilfunkverbindung.
Eine umfassende mobile Optimierung über die Homepage hinaus finden Sie in unserem Anleitung zur Optimierung der mobilen Geschwindigkeit.
Above-the-Fold-Optimierung für Shopify-Homepages
Der Browser rendert Ihre Seite von oben nach unten. Was „above the Fold“ (das sichtbare Ansichtsfenster vor dem Scrollen) erscheint, bestimmt Ihren LCP-Score und den ersten Eindruck des Besuchers. Optimieren Sie diesen Bereich gnadenlos:
- Identifizieren Sie Ihr LCP-Element – Führen Sie PageSpeed Insights aus und suchen Sie nach der Diagnose „Größtes Contentful Paint-Element“. Normalerweise ist es das Heldenbild. Laden Sie dieses Bild mit hoher Priorität vor.
- Kritisches Inline-CSS – Das zum Rendern von „above-fold“-Inhalten benötigte CSS sollte im eingebettet sein
<head>, nicht in einem externen Stylesheet, das das Rendern blockiert. Unser CSS-Optimierungsleitfaden behandelt dies im Detail. - Untergeordnete Abschnitte verschieben – alles nach dem Helden und dem ersten sichtbaren Abschnitt sollte langsam geladen werden. Bilder bekommen
wird geladen="faul"und JavaScript-lastige Abschnitte sollten den Kreuzungsbeobachter verwenden, um nur zu laden, wenn in die Ansicht gescrollt wird. - Rendering-blockierende Ressourcen minimieren – jede CSS-Datei und synchrones JavaScript im
<head>blockiert die erste Farbe. Thunder eliminiert renderblockierende Ressourcen automatisch durch Zurückstellen unkritischer Skripte.
⚡ Quick Fix vs. manuelle Homepage-Optimierung
| Optimierung | Donner (Automatisch) | Handbuch (Entwickler erforderlich) |
|---|---|---|
| Renderblockierende Skripte zurückstellen | ✅ Ein Klick | Bearbeiten Sie theme.liquid, es besteht die Gefahr, dass Apps beschädigt werden |
| Optimieren Sie das Laden von CSS | ✅ Automatisch | Kritisches CSS manuell extrahieren |
| Lazy Load-Bilder | ✅ Automatisch | Loading="lazy" pro Bild hinzufügen |
| Heldenbild vorladen | ✅ Automatisch | Preload-Link-Tag im Theme hinzufügen |
| Zeit zur Umsetzung | 60 Sekunden | 4-8 Stunden Entwicklerzeit |
| Risiko | Null (reversibel) | Kann Themes/Apps beschädigen |
Installieren Sie Thunder für die automatische Homepage-Optimierung, dann wenden Sie die manuellen Gewinne an (Abschnittsreduzierung, Hero-Image-Tausch), um den maximalen Effekt zu erzielen. Siehe Preise.
Häufig gestellte Fragen
Warum ist meine Shopify-Startseite langsamer als Produktseiten?
Homepages sind normalerweise die umfangreichste Seite in einem Shopify-Shop, da sie die meisten Abschnitte enthalten: Hero-Slider, vorgestellte Sammlungen (Laden von 8–16 Produktbildern), Werbebanner, Videohintergründe, Testimonial-Karussells, Instagram-Feeds, Ankündigungsleisten und App-Widgets. Jeder Abschnitt fügt DOM-Knoten, CSS, JavaScript und Bilder hinzu. Eine typische Homepage besteht aus 15–30 Abschnitten, während eine Produktseite 5–10 enthält. Aus diesem Grund erzielen Homepages bei PageSpeed Insights in der Regel 10–20 Punkte weniger Punkte als Produktseiten.
Sollte ich auf meiner Shopify-Startseite eine Diashow oder ein einzelnes Heldenbild verwenden?
Ein einzelnes Heldenbild ist deutlich schneller als eine Diashow. Diashows laden 3–5 Bilder in voller Größe im Voraus (auch wenn nur eines sichtbar ist), fügen JavaScript für Animation/Navigation hinzu und verursachen häufig CLS (Cumulative Layout Shift), wenn Bilder mit unterschiedlichen Geschwindigkeiten geladen werden. Ein einzelnes statisches Heldenbild lädt ein Bild, erfordert kein JavaScript und ist für den Preload-Scanner des Browsers vorhersehbar. Wenn Sie eine Diashow verwenden müssen, beschränken Sie diese auf 2-3 Folien und laden Sie 2+ Folien per Lazy Load.
Wie viele Abschnitte sollte eine Shopify-Homepage haben?
Für eine optimale Geschwindigkeit beschränken Sie Ihre Homepage auf maximal 8–12 Abschnitte. Jeder Abschnitt erhöht die DOM-Größe und die CSS-Komplexität und lädt häufig eigene Bilder oder Skripte. Die Abschnitte über dem Fold (Hero, Ankündigungsleiste, Navigation) sollten sofort geladen werden. Alles unten sollte verzögert geladen werden. Viele leistungsstarke Shopify-Shops verwenden nur 6–8 Abschnitte: Held, vorgestellte Kollektion, Wertversprechen, Testimonials, vorgestellte Produkte und Fußzeilen-CTA.
Verlangsamen Homepage-App-Widgets meinen Shopify-Shop?
Ja – deutlich. Zu den gängigen Homepage-Widgets gehören Live-Chat (Tidio, Gorgias – 200–500 KB JS), Bewertungsabzeichen (Judge.me, Loox – 100–300 KB), Cookie-Zustimmungsbanner (50–200 KB), Ankündigungsleisten mit Countdown-Timern (50–100 KB JS) und Instagram-Feeds (500 KB–1 MB einschließlich Bilder). Jedes Widget lädt sein eigenes JavaScript und CSS, was häufig das Rendern blockiert. Ein Shop mit 5–6 Homepage-Widgets kann die Ladezeit leicht um 1–2 Sekunden verlängern. Thunder verzögert diese Skripte, sodass sie nach dem Rendern der Seite geladen werden.
Was ist ein guter PageSpeed-Score für eine Shopify-Homepage?
Auf Mobilgeräten ist ein Wert von 50–70 für eine Shopify-Startseite mit vorgestellten Sammlungen und App-Widgets realistisch. Mit der Optimierung (Donner + Bildoptimierung + Ausschnittsreduzierung) ist ein Wert von 70-90 erreichbar. Werte über 90 auf Mobilgeräten sind für Homepages mit echten Inhalten selten. Streben Sie auf dem Desktop einen Wert von 80–95 an. Machen Sie sich keine Gedanken über die Punktzahl – konzentrieren Sie sich auf reale Messwerte: LCP unter 2,5 Sekunden, CLS unter 0,1 und INP unter 200 ms.
Wie sorge ich dafür, dass meine Shopify-Startseite in weniger als 2 Sekunden lädt?
Um das Laden der Homepage in weniger als 2 Sekunden zu erreichen: (1) Verwenden Sie ein einzelnes optimiertes Heldenbild anstelle einer Diashow, vorgeladen mit fetchpriority='high'. (2) Beschränkung auf insgesamt 8–10 Abschnitte. (3) Lazy Load alles unterhalb der Falte. (4) Entfernen oder verschieben Sie nicht wesentliche App-Widgets. (5) Verwenden Sie ein schnelles Shopify 2.0-Theme wie Dawn. (6) Installieren Sie Thunder Page Speed Optimizer, um renderblockierende Skripte automatisch zu verschieben und die Reihenfolge beim Laden von Ressourcen zu optimieren. (7) Begrenzen Sie die vorgestellten Kollektionsabschnitte auf 4–8 Produkte statt auf 16+.
Machen Sie Ihre Shopify-Homepage zur schnellsten Seite in Ihrem Shop
Your homepage doesn't have to be your slowest page. The biggest wins are structural: replace the slideshow with a single hero image, cut sections from 20 to 10, limit featured collections to 4-8 products each, and defer app widgets that aren't needed for first render. These changes alone can cut 1-3 seconds off your homepage load time.
Für die technischen Optimierungen – Skriptverzögerung, CSS-Optimierung, Vorladen von Bildern, Beseitigung von Renderblockern – Thunder Page Speed Optimizer verarbeitet sie automatisch. Ein Klick, 27+ Punkteverbesserung, funktioniert bei jedem Thema.
Testen Sie jetzt die Geschwindigkeit Ihrer Homepage und sehen Sie, wo Sie stehen. Das Full-Speed-Playbook über Ihre Homepage hinaus finden Sie in unserem Vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.
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