Shopify PageSpeed optimieren: So erreichst du 90+ im Google-Score (2026)

Ein langsamer Shopify-Shop kostet dich bares Geld. Jede zusätzliche Sekunde Ladezeit senkt die Conversion-Rate um durchschnittlich 7 %. Google bestraft langsame Seiten mit schlechteren Rankings. Und deine Kunden? Die sind weg, bevor die Seite überhaupt geladen hat.

In diesem Artikel zeige ich dir Schritt für Schritt, wie du deinen Shopify PageSpeed auf 90+ bringst. Keine theoretischen Ratschläge, sondern konkrete Maßnahmen, die du heute umsetzen kannst. Dabei gehe ich ehrlich auf die Grenzen von Shopify ein und konzentriere mich auf das, was du als Shop-Betreiber tatsächlich kontrollieren kannst.

Warum PageSpeed für Shopify wichtig ist

PageSpeed ist kein nettes Extra. Seit 2021 sind die Core Web Vitals ein offizieller Google-Ranking-Faktor. Das bedeutet: Wenn dein Shop langsam lädt, wirst du in den Suchergebnissen von schnelleren Konkurrenten überholt. Und zwar unabhängig davon, wie gut dein Shopify SEO sonst ist.

Die drei Core Web Vitals, die Google misst, sind:

• LCP (Largest Contentful Paint): Wie schnell wird das größte sichtbare Element geladen? Zielwert: unter 2,5 Sekunden.
• INP (Interaction to Next Paint): Wie schnell reagiert die Seite auf Nutzer-Interaktionen? Zielwert: unter 200 Millisekunden.
• CLS (Cumulative Layout Shift): Wie stabil bleibt das Layout beim Laden? Zielwert: unter 0,1.

Dazu kommt der wirtschaftliche Aspekt: Laut Google verlassen 53 % der mobilen Nutzer eine Seite, die länger als 3 Sekunden lädt. Bei einem Shop mit 10.000 Besuchern pro Monat und einer durchschnittlichen Bestellhöhe von 80 Euro kann eine Sekunde Ladezeit-Verbesserung mehrere tausend Euro pro Monat ausmachen.

Eine wichtige Einschränkung vorweg: Bei Shopify hast du keinen Zugriff auf den Server. Du kannst weder das Hosting ändern noch serverseitige Caching-Strategien anpassen. Shopify verwendet ein CDN und übernimmt die Infrastruktur komplett. Das heißt: Du musst dich auf die Frontend-Optimierung konzentrieren. Und genau da liegt das größte Potenzial.

PageSpeed richtig messen

Bevor du optimierst, musst du wissen, wo du stehst. Und du musst korrekt messen, denn falsche Messwerte führen zu falschen Prioritäten.

Die richtigen Tools

Google PageSpeed Insights (pagespeed.web.dev) ist das wichtigste Tool. Es zeigt dir sowohl Labordaten (simulierte Tests) als auch Felddaten (echte Nutzerdaten aus dem Chrome UX Report). Die Felddaten sind entscheidend, denn sie zeigen, wie dein Shop in der Praxis performt.

Lighthouse in den Chrome DevTools liefert die detaillierteste Analyse. Öffne dafür ein Inkognito-Fenster (damit Browser-Extensions das Ergebnis nicht verfälschen), navigiere zu deinem Shop und starte unter dem Tab "Lighthouse" einen Test. Teste immer im Mobile-Modus, denn Google bewertet Mobile-First.

So misst du richtig

• Immer im Inkognito-Modus testen (keine Extensions, kein Cache)
• Mobile als Testgerät wählen (Google nutzt Mobile-First-Indexing)
• Mehrere Seiten testen: Startseite, eine Produktseite, eine Collection-Seite
• Mindestens 3 Messungen pro Seite durchführen und den Durchschnitt nehmen
• Felddaten in PageSpeed Insights priorisieren, wenn vorhanden

Ein häufiger Fehler: Nur die Startseite testen. Produktseiten laden oft deutlich langsamer, weil sie mehr Bilder, Bewertungen und App-Widgets enthalten. Teste immer deine am meisten besuchten Seiten.

Bilder optimieren: WebP und Lazy Loading

Bilder sind in den meisten Shopify-Shops der größte Performance-Killer. Sie machen häufig 60–80 % des gesamten Seitengewichts aus. Die gute Nachricht: Hier kannst du am schnellsten die größten Verbesserungen erzielen.

WebP-Format nutzen

Shopify wandelt hochgeladene Bilder automatisch in WebP um, wenn der Browser es unterstützt. Das spart im Vergleich zu JPEG 25–35 % Dateigröße bei gleicher Qualität. Damit das funktioniert, musst du die Bilder über Shopifys CDN laden lassen und darfst keine hartcodierten Bild-URLs verwenden.

In deinem Theme-Code solltest du immer die Liquid-Filter image_url oder img_url verwenden:

Statt einer festen URL wie /images/produkt.jpg nutze immer {{ product.featured_image | image_url: width: 800 }} – so liefert Shopify automatisch das optimale Format und die richtige Größe.

Lazy Loading aktivieren

Bilder, die nicht im sichtbaren Bereich liegen, sollten erst geladen werden, wenn der Nutzer zu ihnen scrollt. Das reduziert die initiale Ladezeit drastisch. In HTML geht das mit dem Attribut loading="lazy":

Shopifys aktuelle OS-2.0-Themes (Dawn, Craft, Sense) unterstützen Lazy Loading von Haus aus. Prüfe in deinem Theme, ob es aktiv ist. Bei älteren Themes oder Custom-Themes musst du es manuell nachrüsten.

Bildgrößen richtig setzen

• Produktbilder: Maximal 2048 x 2048 px, für die meisten Shops reichen 1200 x 1200 px
• Hero-Banner: 1920 x 800 px als Maximum, komprimiert auf unter 200 KB
• Collection-Thumbnails: 600 x 600 px sind ausreichend
• Verwende width und height Attribute, um CLS (Layout-Shift) zu vermeiden
• Nutze das srcset-Attribut für responsive Bilder

Wichtig: Lade nie ein 4000 px breites Bild hoch, wenn es maximal bei 800 px dargestellt wird. Shopify skaliert zwar automatisch, aber der Ausgangswert beeinflusst die Qualitätsstufen. Exportiere Bilder vor dem Upload in einer sinnvollen Maximalgröße.

App-Ballast reduzieren

Shopify-Apps sind praktisch, aber jede App, die Frontend-Code injiziert, verlangsamt deinen Shop. Das Problem: Viele Shop-Betreiber installieren Apps, testen sie kurz und deinstallieren sie wieder. Was dabei oft zurückbleibt, sind Script-Fragmente im Theme-Code, die weiterhin bei jedem Seitenaufruf geladen werden.

So findest du App-Leichen

• Öffne die Chrome DevTools (F12) und gehe zum Tab "Network"
• Lade deine Startseite neu und filtere nach "JS"
• Sortiere nach Größe und prüfe, welche Scripts von externen Domains geladen werden
• Vergleiche die Liste mit deinen aktuell installierten Apps
• Finde Scripts, die zu Apps gehören, die du nicht mehr nutzt

App-Reste entfernen

Deinstalliere zuerst die App über das Shopify-Admin. Prüfe danach im Theme-Code unter "Online Store > Themes > Bearbeiten > Code", ob Reste zurückgeblieben sind. Suche in den Dateien theme.liquid, snippets/ und assets/ nach dem App-Namen oder der Domain des App-Anbieters.

Als Faustregel: Jede App, die du nicht aktiv nutzt und die einen messbaren Nutzen bringt, sollte raus. Viele Funktionen, die Apps bieten, lassen sich auch mit nativem Shopify-Bordmitteln oder ein paar Zeilen Custom-Code lösen.

Theme-Code aufräumen

Auch der Theme-Code selbst kann ein Performance-Problem sein. Besonders bei Premium-Themes, die viele Features mitbringen, von denen du nur einen Bruchteil nutzt. Jedes ungenutzte Feature bedeutet ungenutzten Code, der trotzdem geladen wird.

Critical CSS inline laden

Critical CSS bedeutet: Der CSS-Code, der für den sichtbaren Bereich (Above the Fold) nötig ist, wird direkt im HTML-Dokument eingebettet, statt über eine externe Datei geladen zu werden. Das eliminiert einen Render-Blocking-Request und beschleunigt den First Contentful Paint.

In Shopify kannst du das umsetzen, indem du die wichtigsten Styles in einem <style>-Tag im <head> deiner theme.liquid platzierst. Den Rest des CSS lädst du per media="print" onload="this.media='all'" asynchron nach.

JavaScript optimieren

• Defer: Setze defer auf alle Script-Tags, die nicht sofort gebraucht werden
• Async: Nutze async für unabhängige Scripts (z. B. Analytics)
• Entferne ungenutzten Code: Viele Themes laden jQuery, obwohl es nicht mehr nötig ist
• Minifiziere: Shopify minifiziert CSS/JS nicht automatisch. Nutze minifizierte Versionen deiner Custom-Dateien

Liquid-Code optimieren

Shopifys Template-Sprache Liquid wird serverseitig gerendert. Ineffizienter Liquid-Code erhöht die Server-Response-Time. Vermeide verschachtelte Schleifen, nutze assign statt wiederholter Berechnungen und begrenze die Anzahl der Produkte in Collection-Schleifen mit limit.

Schriften optimieren

Custom Fonts sind einer der am meisten unterschätzten Performance-Faktoren. Eine einzelne Schriftfamilie mit mehreren Gewichtungen kann leicht 200–500 KB ausmachen. Das ist mehr als manches Produktbild.

font-display: swap

Die wichtigste Maßnahme: Setze font-display: swap in deiner @font-face-Deklaration. Damit zeigt der Browser sofort eine System-Schrift an, während die Custom Font im Hintergrund lädt. Der Nutzer sieht sofort Text statt einer leeren Seite. Das verbessert sowohl LCP als auch die gefühlte Ladegeschwindigkeit erheblich.

Weitere Font-Optimierungen

• Weniger Gewichtungen: Lade nur die Font-Weights, die du wirklich brauchst (z. B. 400 und 700 statt 300, 400, 500, 600, 700)
• WOFF2-Format: Nutze ausschließlich WOFF2 – es ist das kleinste und wird von allen modernen Browsern unterstützt
• Preload: Lade die wichtigste Schrift per <link rel="preload" as="font" type="font/woff2" crossorigin> vor
• Subsetting: Wenn du nur lateinische Zeichen brauchst, erstelle ein Font-Subset ohne kyrillische, griechische oder CJK-Zeichen
• System-Fonts als Fallback: Definiere eine System-Font-Stack als Fallback, der optisch zur Custom Font passt

Wenn du Google Fonts nutzt: Lade sie selbst gehostet statt über das Google CDN. Das spart einen DNS-Lookup und eine zusätzliche TLS-Verbindung. In Shopify lädst du die Font-Dateien einfach unter "Assets" hoch und referenzierst sie in deiner CSS-Datei.

Third-Party-Scripts kontrollieren

Third-Party-Scripts sind neben Bildern der zweite große PageSpeed-Killer in Shopify-Shops. Jedes externe Script bedeutet: DNS-Lookup, TLS-Handshake, Download, Parse, Execute. Und das für jedes einzelne Script.

Die üblichen Verdächtigen

• Chat-Widgets (Tidio, Zendesk, Intercom): Laden oft 200–500 KB JavaScript
• Tracking-Pixel (Facebook, TikTok, Pinterest): Jeder Pixel ein zusätzlicher Request
• Bewertungs-Widgets (Trustpilot, Judge.me): Laden externe CSS und JS
• Pop-up-Tools (Privy, Justuno): Blockieren oft das Rendering
• Analytics-Tools (Hotjar, Lucky Orange): Zeichnen Nutzerbewegungen auf und brauchen viel JavaScript

Strategien zur Kontrolle

Verzögertes Laden: Lade Third-Party-Scripts nicht sofort, sondern erst nach einer Nutzerinteraktion (Scroll, Klick) oder nach einem Timeout von 3–5 Sekunden. Das verbessert die initialen Core Web Vitals massiv. In der Praxis bedeutet das: Das Chat-Widget erscheint nicht in der ersten Sekunde, sondern nach dem ersten Scroll. Für den Nutzer ist das kaum merkbar, für den PageSpeed-Score macht es einen riesigen Unterschied.

Konsolidieren: Nutze den Google Tag Manager, um Tracking-Pixel zu bündeln, statt jedes Script einzeln einzubinden. Das reduziert die Anzahl der HTTP-Requests.

Hinterfragen: Brauchst du wirklich Hotjar, wenn du Google Analytics 4 mit Scroll-Tracking hast? Braucht dein Shop wirklich ein Live-Chat-Widget, wenn 95 % der Anfragen per E-Mail kommen? Jedes Script, das du nicht lädst, ist die beste Optimierung.

Fazit

Shopify PageSpeed zu optimieren ist kein einmaliges Projekt, sondern ein fortlaufender Prozess -- und Teil einer ganzheitlichen Shopify-Optimierung. Mit jeder neuen App, jedem neuen Banner und jedem zusätzlichen Tracking-Pixel riskierst du, Fortschritte wieder zu verlieren. Aber die Grundlagen sind klar und umsetzbar.

Die wichtigsten Hebel in der Reihenfolge ihres Impacts:

• Bilder optimieren: WebP, Lazy Loading, richtige Dimensionen. Das allein kann den Score um 20–30 Punkte heben.
• Apps aufräumen: Ungenutzte Apps entfernen, Script-Reste beseitigen. Spart oft 500 KB+ pro Seitenaufruf.
• Third-Party-Scripts verzögern: Chat, Tracking und Widgets nach Nutzerinteraktion laden.
• Fonts optimieren: font-display: swap, WOFF2, Preload. Verbessert LCP spürbar.
• Theme-Code aufräumen: Critical CSS, defer/async für JavaScript, ungenutzten Code entfernen.

Messe deinen Score regelmäßig (mindestens monatlich) und dokumentiere deine Änderungen. So erkennst du sofort, wenn eine neue App oder ein Theme-Update deine Performance verschlechtert. Und vergiss nicht: Der PageSpeed-Score ist ein Richtwert. Entscheidend ist, wie schnell sich dein Shop für echte Nutzer anfühlt. Und vergiss nicht, auch strukturierte Daten einzurichten, damit dein schneller Shop auch in den Suchergebnissen auffällt.