Critical CSS in Shopify: Render-blockierendes CSS eliminieren
Critical CSS in Shopify in Kürze
Critical CSS ist eine Sammlung von CSS-Regeln, die für das erste Rendern benötigt werden. Diese Regeln werden inline im Head der Seite platziert, damit der Browser mit dem Rendern beginnen kann, ohne auf das Herunterladen externer CSS-Dateien warten zu müssen.
Shopify unterstützt kein automatisiertes Critical CSS. Es verfügt über eine hervorragende Infrastruktur (Daten des Web Almanac 2025 zeigen, dass Shopify alle E-Commerce-Plattformen mit 95 % guten TTFB und 92 % guten LCP auf dem Desktop anführt), aber nur 48 % der Shopify-Shops bestehen alle Core Web Vitals auf Mobilgeräten. Render-blockierendes CSS ist einer der Hauptgründe dafür. Der Web Almanac 2025 hat herausgefunden, dass 85 % der mobilen Seiten immer noch beim Audit der render-blockierenden Ressourcen durchfallen.
Zuletzt überprüft von Arjen Karel im März 2026
Was ist Critical CSS?
Alle modernen Browser blockieren das Rendern, bis externe CSS-Dateien heruntergeladen und geparst wurden. Wenn eine Seite eine oder mehrere CSS-Dateien lädt, kann das Rendern leicht für 100 ms oder länger blockiert werden.
Critical CSS löst dieses Problem, indem es nur die CSS-Regeln extrahiert, die zum Rendern des sichtbaren Teils der Seite (Above the Fold) benötigt werden, und sie inline im <head> platziert. Der Browser kann sofort mit dem Rendern beginnen, während die vollständigen Stylesheets im Hintergrund heruntergeladen werden. Dies verbessert direkt den First Contentful Paint (FCP) und den Largest Contentful Paint (LCP).
Der moderne Ansatz: inline_asset_content
Wenn Ihr Theme separate CSS-Dateien pro Sektion oder Komponente verwendet (wie das Dawn-Theme von Shopify und die meisten Online Store 2.0-Themes), können Sie den Liquid-Filter inline_asset_content verwenden, um CSS direkt aus Ihren Asset-Dateien inline einzubinden:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Dies bindet den Inhalt der CSS-Datei als <style>-Block inline ein und eliminiert die render-blockierende Anfrage vollständig. Sie können CSS auch bedingt nur für Above-the-Fold-Sektionen inline einbinden:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Sektionen mit einem Index unter 2 (die ersten beiden Sektionen auf der Seite, die fast immer im sichtbaren Bereich, also Above the Fold, liegen) erhalten ihr CSS inline. Alles andere wird als reguläres Stylesheet geladen. Dies ist der Ansatz, den ich für moderne Shopify-Themes empfehle.
Der klassische Ansatz: Critical CSS generieren und inline einbinden
Wenn Ihr Theme ein großes Stylesheet verwendet (üblich bei älteren Themes und stark angepassten Shops), müssen Sie das Critical CSS selbst extrahieren. Dies ist ein Prozess in sechs Schritten.
1. Duplizieren Sie Ihr Theme
Wenn Sie das Kernverhalten eines Templates in Shopify bearbeiten, arbeiten Sie immer zuerst an einer Kopie. Navigieren Sie über 'Onlineshop' > 'Themes' zu Ihrem aktuellen Theme und duplizieren Sie es, indem Sie auf 'Aktionen' > 'Duplizieren' klicken.
2. Generieren Sie Critical CSS
Ich verwende das Node.js-Modul Critical in Kombination mit manuellen Anpassungen. Das erfordert etwas Aufwand, liefert aber die besten Ergebnisse.
Wenn Ihnen das zu technisch ist, verwenden Sie einen Online-Generator. Unser eigener Critical CSS Generator erledigt dies für Sie. Geben Sie Ihre URL ein, kopieren Sie das generierte Critical CSS und fahren Sie mit dem nächsten Schritt fort.
3. Laden Sie das Critical CSS hoch
Navigieren Sie in Ihrem duplizierten Theme zum Ordner 'Snippets' und erstellen Sie eine neue Datei namens critical-css.liquid. Umschließen Sie das generierte CSS mit <style>-Tags und fügen Sie es in Ihre neue Datei ein.
4. Bearbeiten Sie die Layout-Datei
Öffnen Sie theme.liquid im Ordner 'Layout'. Zwei Änderungen sind erforderlich.
Rendern Sie zunächst das Critical CSS Snippet im <head>:
<head>
{% render 'critical-css' %}
Hinweis: Shopify hat {% include %} zugunsten von {% render %} als veraltet markiert. Wenn Ihr Theme immer noch include verwendet, funktioniert es zwar, aber Sie sollten migrieren.
Ändern Sie dann die vorhandenen CSS-Referenzen so, dass sie im Hintergrund geladen werden. Das sauberste Muster (das auch von Shopifys eigenem Dawn-Theme verwendet wird) ist der Trick mit media="print":
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Dies weist den Browser an, das Stylesheet während des anfänglichen Ladevorgangs als Print-Stylesheet (nicht render-blockierend) zu behandeln und nach dem Herunterladen auf media="all" umzuschalten. Ihr Critical CSS rendert die Seite sofort, während das vollständige Stylesheet im Hintergrund geladen wird. Dieser media="print"-Ansatz hat das ältere Muster rel="preload" abgelöst, da er einfacher ist und keinen <noscript>-Fallback benötigt.
5. Testen Sie das neue Theme
Klicken Sie auf der Theme-Seite auf 'Aktionen' > 'Vorschau', um das kopierte Theme zu testen. Achten Sie dabei besonders auf den Cumulative Layout Shift (CLS). Unvollständiges oder fehlerhaftes Critical CSS verursacht einen Flash of Unstyled Content, bei dem Elemente ohne ihre endgültigen Stile gerendert werden und dann an ihre Position springen, sobald das vollständige CSS geladen ist. Das ist ein Layout Shift.
Führen Sie PageSpeed Insights für die Vorschau-URL aus und vergleichen Sie FCP und LCP vorher und nachher. Sie sollten bei beiden eine deutliche Verbesserung feststellen. Für die kontinuierliche Überwachung nach dem Go-Live können Sie Ihre Felddaten mit Real User Monitoring verfolgen, um sicherzustellen, dass die Verbesserung auch für echte Besucher Bestand hat.
6. Veröffentlichen Sie das neue Theme
Navigieren Sie im linken Menü unter 'Onlineshop' zu 'Themes' und wählen Sie unter 'Aktionen' die Option 'Veröffentlichen' für Ihr neues Theme.
Einschränkungen, die Sie nicht kontrollieren können
Shopify erzwingt content_for_header im <head> jeder Seite. Dadurch werden Analytics-Skripte, App-Skripte und anderer Plattform-Code injiziert, den Sie weder verzögern (defer) noch ändern können. Jede installierte Shopify-App kann über diesen Mechanismus Skripte hinzufügen. Dies sind unvermeidbare render-blockierende Kosten, was die Optimierung all dessen, was Sie kontrollieren können (Ihr CSS, Ihre Schriftarten, Ihre eigenen Skripte), umso wichtiger macht. Die Deinstallation ungenutzter Apps ist eine der effektivsten Maßnahmen, die Sie ergreifen können.
Eine weitere Einschränkung: Shopify erlaubt das Lesen oder Senden von Cookies im Liquid-Editor nicht. Idealerweise würden Sie Critical CSS nur Erstbesuchern ausliefern und wiederkehrenden Besuchern das gecachte vollständige Stylesheet bereitstellen. Das ist auf Shopify nicht möglich. Dennoch ist der Geschwindigkeitsgewinn durch Critical CSS die Mühe wert. Der Median eines Shopify-Shops auf Mobilgeräten hat laut dem Benchmark 2025 von Shero Commerce einen LCP von 2,26 Sekunden und liegt damit genau an der Grenze des 2,5-Sekunden-Schwellenwerts. Selbst eine Einsparung von 200 ms durch die Eliminierung von render-blockierendem CSS kann den Unterschied zwischen dem Bestehen und Nicht-Bestehen der Core Web Vitals ausmachen.
Was können Sie noch tun?
Critical CSS ist nur ein Teil des Puzzles. Für eine vollständige Shopify-Optimierungsstrategie lesen Sie unseren Core Web Vitals-Leitfaden für Shopify. Weitere hochwirksame Erfolge umfassen das Preloading Ihres LCP-Bildes, das Self-Hosting Ihrer Google Fonts und das Verständnis für die Ressourcenpriorisierung. Shopify unterstützt auch Speculation Rules für sofortige Seitennavigationen und 103 Early Hints zum Vorladen von Ressourcen, noch bevor das HTML überhaupt ankommt.
Wenn Sie immer noch mit Warnungen zu ungenutztem CSS kämpfen, gehen Sie dieses Problem zuerst an. Das Entfernen von CSS, das Sie nicht benötigen, ist immer besser als das inline Einbinden von CSS, das Sie benötigen.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
