Wichtige Erkenntnisse
- Render-blocking Scripts verzögern die Anzeige deiner Seite im Browser — jede Millisekunde kostet Conversions.
- Lösung: Füge
deferoderasynczu nicht-kritischen<script>-Tags in der theme.liquid hinzu.- Shopifys
{% javascript %}-Tag in Sections bündelt und verzögert Scripts automatisch.- PageSpeed Insights und der Shopify Theme Inspector identifizieren beide Render-blocking Ressourcen.
Wenn ein Browser auf ein <script>-Tag in deinem HTML stößt, hält er an, lädt das Script herunter, führt es aus und setzt dann den Aufbau der Seite fort. Wenn sich dieses Script in deinem <head> befindet, ist die gesamte Seite eingefroren, während das Script geladen wird. Bei einer langsamen mobilen Verbindung ist diese Pause sichtbar — ein weißer Bildschirm dort, wo eigentlich dein Store sein sollte.
Dies wird als “Parser blocking” oder “Render blocking” bezeichnet und ist eines der wirkungsvollsten Performance-Probleme, die man in Shopify beheben kann.
Was verursacht Render-blocking Scripts in Shopify
Script-Tags im <head> ohne async oder defer. Die häufigste Ursache. Scripts, die durch Apps oder Anpassungen hinzugefügt wurden, enthalten oft ein einfaches <script src="..."> ohne eines der beiden Attribute.
Große Theme-JavaScript-Dateien, die synchron geladen werden. Einige ältere Themes laden ihr gesamtes JavaScript im <head>, was den Paint-Vorgang blockiert.
Analytics- und Marketing-Scripts von Drittanbietern. Google Tag Manager, Facebook Pixel und ähnliche Scripts werden häufig im <head> platziert, weil deren Dokumentation das so vorgibt — sie sollten aber dennoch async verwenden.
Der Unterschied zwischen async und defer
Beide verhindern das Render-blocking, verhalten sich aber unterschiedlich:
async: Das Script wird parallel zum HTML-Parsing heruntergeladen. Es wird ausgeführt, sobald der Download abgeschlossen ist — was das HTML-Parsing unterbrechen kann. Verwende dies für unabhängige Scripts, die nicht darauf angewiesen sind, dass das DOM bereit ist (Analytics, Pixel).
defer: Das Script wird parallel zum HTML-Parsing heruntergeladen. Es wird erst ausgeführt, wenn das HTML vollständig geparst ist, und zwar in der Reihenfolge des Dokuments. Verwende dies für Scripts, die mit dem DOM interagieren (Theme-Features, Produktfunktionalität).
Kein Attribut (Standard): Das Script blockiert das HTML-Parsing vollständig, während es heruntergeladen und ausgeführt wird. Vermeide dies für alle nicht-kritischen Scripts im <head>.
So fügst du defer oder async zu Scripts in Shopify hinzu
Schritt 1 - Dupliziere dein Theme.
Schritt 2 - Öffne theme.liquid im Code-Editor.
Schritt 3 - Suche nach <script>-Tags im <head>-Bereich. Diese sehen so aus:
<script src="https://example.com/script.js"></script>Schritt 4 - Füge das entsprechende Attribut hinzu:
<!-- Für Analytics/Pixel-Scripts: -->
<script src="https://analytics.example.com/script.js" async></script>
<!-- Für Theme-Funktionalitäts-Scripts: -->
<script src="{{ 'theme.js' | asset_url }}" defer></script>Wichtig: Füge nicht blindlings async zu allen Scripts hinzu. Wenn Script B von Script A abhängt, kann das Setzen von Script A auf async dazu führen, dass Script B fehlschlägt, falls Script B zuerst geladen wird.
Verwendung von Shopifys {% javascript %}-Blöcken in Sections
Die sauberste Lösung für Theme-Funktionen: Packe JavaScript mit {% javascript %}-Tags direkt in die Section-Dateien, anstatt in globale theme.liquid Scripts.
{% javascript %}
// Dieses JavaScript wird:
// 1. Automatisch mit anderem Section-JS gebündelt
// 2. Von Shopify automatisch verzögert (deferred)
// 3. Nur geladen, wenn die Section verwendet wird
document.querySelector('.my-section').addEventListener('click', function() {
// Section-spezifisches Verhalten
});
{% endjavascript %}Shopify kompiliert alle {% javascript %}-Blöcke der Sections in ein einziges optimiertes Bundle (shopify-section-*.js), das verzögert geladen wird. Dies ist die Architektur, die Shopify für die Theme-Entwicklung empfiehlt.
Behebung von GTM Render-blocking
Das Installations-Snippet des Google Tag Managers platziert ein <script>-Tag im <head>. Die Standardinstallation sieht so aus:
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXX');</script>Dies ist bereits ein Inline-Script (kein src), daher gelten async/defer hier nicht auf die gleiche Weise. Das GTM-Snippet ist so konzipiert, dass es klein und schnell ist — das eigentliche Performance-Problem sind die Tags innerhalb deines GTM-Containers.
Stelle in GTM alle Tags so ein, dass sie bei “Window Loaded” oder “DOM Ready” feuern, statt bei “Page View”, es sei denn, sie müssen wirklich gefeuert werden, bevor die Seite gerendert wird. Dies verschiebt die Ausführung der Tags auf den Zeitpunkt, an dem die Seite bereits sichtbar ist.
Identifizierung von Render-blocking Scripts
PageSpeed Insights: Teste deine Store-URL unter pagespeed.web.dev. Suche unter “Empfehlungen” nach “Ressourcen beseitigen, die das Rendering blockieren”. Dort werden die spezifischen Scripts und Stylesheets aufgelistet, die das Problem verursachen.
Chrome DevTools — Tab Performance: Zeichne einen Ladevorgang der Seite auf. Suche im Flame-Chart nach Parse HTML-Events, die zu Beginn der Timeline durch Evaluate Script-Events unterbrochen werden.
Shopify Theme Inspector: Zeigt, welche Liquid-Templates am langsamsten rendern. Für scriptbezogenes Blocking solltest du stattdessen PageSpeed Insights verwenden.
Was ist mit Render-blocking CSS?
CSS blockiert von Natur aus das Rendering — der Browser benötigt das CSS, bevor er irgendetwas darstellen kann. Aber du kannst die Auswirkungen minimieren:
Critical CSS inline: Verschiebe das CSS, das für die Darstellung des Contents „above-the-fold“ benötigt wird, direkt inline in den <head>. Lade den Rest deines CSS asynchron mit <link rel="preload"> und onload.
Unbenutztes CSS entfernen: Weniger CSS-Regeln = schnellere Parsing-Zeit.
Vermeide CSS @import in Stylesheets: Diese erzeugen kaskadierende blockierende Anfragen.
Für die meisten Shopify-Stores sind die Gewinne durch CSS-Optimierung geringer als durch die Behebung von JavaScript-Blocking. Konzentriere dich zuerst auf JavaScript.
