Eliminieren Sie Rendering-blockierende Ressourcen auf Shopify: 5 bewährte Lösungen (2026)

Was sind Render-blockierende Ressourcen?

When your browser loads a Shopify page, it reads the HTML from top to bottom. When it encounters a <script> -Tag (ohne asynchron oder aufschieben), es stoppt das Rendern, lädt das Skript herunter, führt es aus und fährt erst dann fort. Das gleiche passiert mit -Tags für externes CSS – der Browser malt nichts, bis das CSS heruntergeladen und analysiert wurde.

This is why your visitors see a blank white page (or a partially loaded page) for several seconds while the browser processes these files in the background. The browser is literally blocked from rendering visible content.

In einem typischen Shopify-Shop wird die Warnung „Renderblockierende Ressourcen beseitigen“ in PageSpeed Insights berücksichtigt 1–4 Sekunden Verzögerung. Je mehr Apps Sie installiert haben, desto schlimmer wird es – jede App kann mehrere Render-blockierende Skripte hinzufügen.

Warum das für Ihr Geschäft wichtig ist

Renderblockierende Ressourcen sind nicht nur ein technisches Problem – sie wirken sich direkt auf Ihren Umsatz aus:

Wenn Ihr Shop aufgrund von Rendering-blockierenden Ressourcen 5 Sekunden braucht, um Inhalte anzuzeigen, verlieren Sie Besucher, bevor diese Ihre Produkte überhaupt sehen. Die Behebung dieses Problems ist eine der Geschwindigkeitsoptimierungen mit dem höchsten ROI, die Sie vornehmen können. Einen umfassenderen Einblick in jede Optimierungstechnik finden Sie in unserem vollständige Anleitung zur Geschwindigkeitsoptimierung.

Die einfache Lösung: Automatische Optimierung mit Thunder

Bevor wir uns mit dem Handbuch befassen, gehen wir unten zu den Korrekturen auf Codeebene – es gibt einen viel einfacheren Weg. Thunder Page Speed Optimizer erkennt und behebt automatisch Rendering-blockierende Ressourcen in Ihrem Shopify-Shop, ohne dass Codeänderungen erforderlich sind.

So identifizieren Sie Rendering-blockierende Ressourcen in Ihrem Shop

Methode 1: Google PageSpeed Insights

Gehe zu pagespeed.web.dev, geben Sie Ihre Shop-URL ein und warten Sie auf die Analyse. Das können Sie auch Führen Sie einen kostenlosen Geschwindigkeitstest durch Nutzen Sie unser Tool für einen schnellen Überblick. Scrollen Sie in den Ergebnissen zum Abschnitt „Möglichkeiten“ und suchen Sie nach „Renderblockierende Ressourcen beseitigen.“ Klicken Sie, um es zu erweitern – Sie sehen jede Datei, die das Rendern blockiert, und die geschätzte Zeitersparnis.

Methode 2: Chrome DevTools-Abdeckung

Öffnen Sie Ihren Shop in Chrome, drücken Sie dann F12 Strg+Umschalt+P (oder Befehl+Umschalt+P auf dem Mac) und geben Sie „Abdeckung“ ein. Dies zeigt, wie viel von jeder CSS- und JavaScript-Datei beim Laden tatsächlich verwendet wird. Rote Balken = nicht verwendeter Code, den der Browser heruntergeladen, aber nicht benötigt hat.

Methode 3: Netzwerk-Wasserfall

Laden Sie in Chrome DevTools → Registerkarte „Netzwerk“ die Seite neu und sehen Sie sich das Wasserfalldiagramm an. Früh geladene Dateien mit langen Balken blockieren das Rendern. Konzentrieren Sie sich auf JavaScript- und CSS-Dateien, die vor dem ersten Bild geladen werden.

Manuelle Korrektur: Renderblockierendes JavaScript

JavaScript ist in den meisten Shopify-Shops der größte Übeltäter, der das Rendern blockiert. So adressieren Sie jeden Typ manuell:

1. Hinzufügen aufschieben zu benutzerdefinierten Skripten

Wenn Sie benutzerdefinierte Skript-Tags in Ihren Designdateien hinzugefügt haben (theme.liquid, Abschnittsdateien usw.), fügen Sie die hinzu aufschieben -Attribut:

<!-- ❌ Before: render-blocking -->
<script src="https://example.com/custom-script.js"></script>

<!-- ✅ After: non-render-blocking -->
<script src="https://example.com/custom-script.js" defer></script>

aufschieben teilt dem Browser mit: „Laden Sie dies im Hintergrund herunter und führen Sie es aus, nachdem der HTML-Code vollständig analysiert wurde.“ Dadurch bleibt die Ausführungsreihenfolge erhalten und das Renderblockierungsverhalten wird eliminiert.

2. Skripte nach unten verschieben

Für Inline-Skripte (Code zwischen <script> tags), move them from the <head> bis kurz davor :

<head>
  <script>
    // Analyse- oder Tracking-Code
  </script>



<body>
  
  <script>
    // Analyse- oder Tracking-Code
  </script>

3. Verwendung asynchron für unabhängige Skripte

Für Skripte, die nicht von anderen Skripten abhängen (z. B. eigenständige Analyse-Tracker), asynchron lädt herunter und führt es ohne Blockierung aus – garantiert jedoch keine Ausführungsreihenfolge:

<!-- ✅ Good for independent scripts like analytics -->
<script src="https://analytics.example.com/track.js" async></script>

<!-- ✅ Better for scripts with dependencies -->
<script src="https://cdn.example.com/library.js" defer></script>
<script src="https://cdn.example.com/app.js" defer></script>

Manuelle Korrektur: Renderblockierendes CSS

CSS blockiert von Natur aus das Rendern – der Browser muss wissen, wie Dinge aussehen, bevor er sie anzeigt. Sie können nicht einfach das gesamte CSS zurückstellen (die Seite würde dann ohne Stil blinken). Der richtige Ansatz:

1. Kritisches Inline-CSS

Kritisches CSS ist das Mindest-CSS, das zum Stylen von „above-the-fold“-Inhalten erforderlich ist. Direkt einbinden <head> , damit der Browser sofort rendert und dann das vollständige Stylesheet asynchron lädt:

<head>
  <!-- ✅ Critical CSS inlined for instant rendering -->
  <style>
    /* Only styles for above-the-fold content */
    header {display:flex;align-items:center;height:64px} 
    .hero {padding:4rem 1rem;text-align:center}
    .hero h1 {font-size:2.5rem;font-weight:800}
  </style>

  <!-- ✅ Full CSS loaded asynchronously -->
  <link rel="preload" href="{{ "theme.css" | asset_url }}" as="style" 
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ "theme.css" | asset_url }}"></noscript>
</head>

Der schwierige Teil? Herausfinden welches CSS ist entscheidend. Es ist für jede Seite (Homepage, Sammlung, Produkt) und jedes Thema unterschiedlich. Werkzeuge wie Critical von Addy Osmani kann helfen, aber sie müssen für jede Seitenvorlage ausgeführt und jedes Mal aktualisiert werden, wenn Sie Ihr Design ändern.

2. Entfernen Sie nicht verwendetes CSS

Viele Shopify-Themes enthalten CSS für alle möglichen Funktionen – Mega-Menüs, Akkordeons, Schnellansicht – auch wenn Sie sie nicht verwenden. Verwenden Sie zum Messen die Registerkarte „Coverage“ der Chrome DevTools. Wenn weniger als 50 % genutzt werden, besteht erheblicher Optimierungsbedarf. Wenn Sie CSS jedoch manuell entfernen, besteht die Gefahr, dass Funktionen beschädigt werden, von denen Sie nicht wussten, dass sie existieren.

3. Externes CSS minimieren

Jede externe CSS-Datei (Google Fonts, App-Stylesheets, Widgets) fügt eine Blockierungsanforderung hinzu. Hosten Sie Schriftarten selbst, kombinieren Sie kleine Stylesheets und prüfen Sie, welches App-CSS tatsächlich erforderlich ist. Kombinieren Sie diese CSS-Korrekturen mit richtiges Lazy Loading stellt sicher, dass der Browser nur das lädt, was für das anfängliche Ansichtsfenster benötigt wird.

Manuelle Korrektur: Schriftarten, die das Rendern blockieren

Web fonts cause two problems: they block text rendering (FOIT — Flash of Invisible Text), and loading them from external domains adds extra network latency.

1. Verwendung Schriftartenanzeige: tauschen

Zeigt Text sofort in einer Ersatzschriftart an und wechselt dann zur benutzerdefinierten Schriftart, wenn sie fertig ist:

@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-weight: 400;
  font-display: swap; /* ✅ Shows fallback text immediately */
}

2. Kritische Schriftarten vorab laden

Beginnen Sie frühzeitig mit dem Herunterladen Ihrer wichtigsten Schriftart:

<link rel="preload" href="/fonts/your-font.woff2" as="font" 
      type="font/woff2" crossorigin>

Laden Sie nur 1–2 kritische Schriftarten vor. Das Vorladen zu vieler Daten verschwendet Bandbreite.

3. Selbsthosting statt Google Fonts

Laden von Schriftarten.googleapis.com Der Ordner erfordert zusätzliche DNS-Suchen. Beim Selbsthosting werden Schriftarten auf das CDN von Shopify gestellt:

• Laden Sie Schriftarten herunter von Google Webfonts Helper
• Hochladen .woff2 -Dateien in den Assets-Ordner Ihres Themes
• CSS aktualisieren @font-face , um auf lokale Dateien zu verweisen
• Entfernen Sie die Google Fonts <link> -Tag

4. Schriftstärken begrenzen

Jede Strichstärke (normal, fett, kursiv) ist ein separater Download. Die meisten Geschäfte benötigen nur Normal (400) und Fett (700). Durch das Laden von 4–6 Gewichtungen werden unnötigerweise 200–600 KB hinzugefügt.

Das Problem mit Drittanbieter-Skripten (Warum manuelle Korrekturen nicht ausreichen)

Hier ist die harte Wahrheit über alles oben Genannte: Die manuellen Techniken eignen sich hervorragend für den von Ihnen kontrollierten Code – aber in den meisten Shopify-Shops sind die größten Übeltäter, die das Rendern blockieren, App-Skripte von Drittanbietern, die Sie nicht bearbeiten können.

Wenn eine Shopify-App eine einfügt Wenn Sie das Tag <script> in Ihr Schaufenster einfügen, können Sie nicht entscheiden, ob es so ist aufschieben oder asynchron. Der App-Entwickler hat diese Entscheidung getroffen – und viele fügen beides nicht hinzu, sodass ihre Skripte standardmäßig das Rendern blockieren.

In einem typischen Shopify-Shop sind 5–15 Apps installiert. Selbst wenn jeder nur ein Render-blockierendes Skript hinzufügt, sind das 5–15 Dateien, die der Browser herunterladen und ausführen muss, bevor Inhalte angezeigt werden. Wir gehen ausführlich darauf in unserem Leitfaden ein Verwalten von Skripten von Drittanbietern auf Shopify. Und jedes Mal, wenn Sie eine neue App installieren, können alle Ihre manuellen Optimierungsarbeiten zunichte gemacht werden.

Genau dafür haben wir gebaut Thunder. Es funktioniert auf Theme-Ebene – es fängt ab und optimiert, wie alle Skripte geladen werden, einschließlich der Skripte von Drittanbietern, die Sie nicht manuell bearbeiten können. Und es passt sich automatisch an, wenn Sie neue Apps hinzufügen oder Ihr Theme aktualisieren. Pläne beginnen bei 19,99 $/Monat – deutlich weniger als die Beauftragung eines Entwicklers mit der manuellen Skriptverzögerung. Wenn Sie auch über einen Theme-Wechsel nachdenken, lesen Sie unseren Leitfaden dazu schnellste Shopify-Themen – Durch die Kombination eines schnellen Themes mit Thunder erhalten Sie die bestmögliche Basis.

So überprüfen Sie Ihre Korrekturen

Unabhängig davon, ob Sie Thunder verwendet oder Probleme manuell behoben haben, erfahren Sie hier, wie Sie bestätigen können, dass Rendering-blockierende Ressourcen entfernt wurden:

Rendering-blockierende Ressourcen auf Shopify: 2026 Zahlen

Based on data from 2,000+ Shopify stores analyzed by Thunder in Q1 2026, here's the current state of render-blocking resources on the platform:

Der Trend ist klar: Da Händler mehr Apps installieren, um im Wettbewerb zu bestehen (der durchschnittliche Shopify-Shop hat jetzt mehr als 10 Apps), vervielfachen sich die Rendering-blockierenden Ressourcen weiter. Manuelle Korrekturen funktionieren vorübergehend, aber bei der Installation neuer Apps werden wieder Blockierungsskripte eingeführt. Eine automatisierte Lösung wie Thunders kontinuierliche Optimierung fängt neue blockierende Ressourcen ab, sobald sie erscheinen.

Weitere Informationen dazu, wie sich diese blockierenden Ressourcen auf Sie auswirken Core Web Vitals, insbesondere LCP und INP, lesen Sie unseren speziellen Leitfaden. Und um genau zu sehen, wie viele Render-blockierende Ressourcen vorhanden sind dein Store hat, Führen Sie einen kostenlosen Geschwindigkeitstest durch.

Häufig gestellte Fragen