Shopify Enormous Network Payloads: Seitengewicht reduzieren (2026)

Schnelle Lösung mit Thunder

Was zählt als enorme Nutzlast?

Die Seitengewichtung ist die Gesamtzahl der Bytes, die der Browser herunterlädt: HTML, CSS, JavaScript, Bilder, Schriftarten, Videos, JSON, Tracking-Pixel und App-Assets. Lighthouse weist auf sehr große Nutzlasten hin, da jedes zusätzliche Megabyte Mobilfunknutzern schadet, insbesondere bei langsamen Verbindungen und Telefonen mittlerer Reichweite.

Eine schlanke Shopify-Produktseite kann anfangs etwa 1–2 MB laden. Eine umfangreiche Homepage mit Diashow, Videohintergrund, Seitenersteller, fünf Apps, drei Schriftfamilien und großen Sammlungsabschnitten kann problemlos 6–12 MB herunterladen. Dem Kunden ist es egal, dass die Assets schön sind, wenn die Seite noch geladen wird, während er versucht einzukaufen.

Die Nutzlastgröße ist nicht der einzige Geschwindigkeitsfaktor. Eine 2-MB-Seite mit schrecklichem JavaScript kann sich schlechter anfühlen als eine 3-MB-Seite mit sauberem Laden. Aber wenn PageSpeed ​​sagt, dass die Nutzlast enorm ist, muss zuerst nach Bytes gesucht werden.

Schritt 1: Sortieren Sie die Registerkarte „Netzwerk“ nach Übertragungsgröße

Open Chrome DevTools -> Netzwerk, Cache deaktivieren, Seite neu laden und nach übertragener Größe sortieren. Ignorieren Sie vorerst kleine Dateien. Die häufigsten Täter sind Hero-Bilder, Produktfotos, eingebettete Videos, App-Bundles, große Theme-JavaScript-, CSS- und Schriftartendateien.

Verwenden Sie PageSpeed ​​für die Partitur, aber verwenden Sie die Registerkarte „Netzwerk“ für Entscheidungen. Wenn die größte Datei ein 2,4 MB großes Hero-Image ist, beginnen Sie nicht mit der Minimierung einer 12 KB großen CSS-Datei. Wenn es sich bei den Top-Ten-Dateien um App-Skripte handelt, sollten Sie den Morgen nicht damit verbringen, Produktminiaturansichten zu komprimieren.

Für ein wiederholbares Audit folgen Sie unserem Leitfaden zu Geschwindigkeitstestergebnissen und das volle Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Schritt 2: Fordern Sie kleinere Shopify-Bilder an

Das CDN von Shopify kann Bilder mit geänderter Größe bereitstellen, aber Ihr Liquid entscheidet, welche Breiten angefordert werden. Wenn der gerenderte Held 1200 Pixel breit ist und das Theme ein 4000 Pixel großes Original herunterlädt, verschwendet der Browser Bandbreite, bevor er LCP malen kann.

{{ section.settings.image
  | image_url: width: 1600
  | image_tag:
    widths: '600, 900, 1200, 1600',
    sizes: '(min-width: 990px) 100vw, 100vw',
    loading: 'eager',
    fetchpriority: 'high',
    alt: section.settings.heading
}}

Verwenden Sie für Produktgitter unter der Falte kleinere Breiten und Lazy Loading. Eine Produktkarte benötigt selten ein 2000-Pixel-Bild. Unser Anleitung zur Geschwindigkeit der Produktseite und Leitfaden zur Geschwindigkeit der Sammlungsseite deckt vorlagenspezifische Auswahlmöglichkeiten ab.

Schritt 3: Lazy-Load alles unterhalb des ersten Ansichtsfensters

Das erste Ansichtsfenster sollte sofort geladen werden. Below-the-fold-Medien sollten warten. Dazu gehören Produktkarten weiter unten auf der Seite, Galerie-Miniaturansichten, Lookbook-Abschnitte, Rezensionskarussells, Instagram-Feeds und Videos.

{{ product.featured_image
  | image_url: width: 700
  | image_tag:
    widths: '300, 500, 700',
    sizes: '(min-width: 990px) 25vw, 50vw',
    loading: 'lazy',
    alt: product.title
}}

Laden Sie das Heldenbild nicht verzögert. Das ist ein anderer Fehler und schadet normalerweise LCP. Benutzen Sie die Anleitung zum Vorladen von Heldenbildern für „above thefold“-Bilder und die Lazy-Loading-Anleitung für alles andere.

Schritt 4: Ersetzen Sie schwere Video- und Slider-Nutzlasten

Video ist der schnellste Weg, eine Shopify-Seite riesig zu machen. Ein Hintergrundvideo kann mehrere Megabyte hinzufügen, bevor der Kunde ein Produkt sieht. YouTube- und Vimeo-Einbettungen können vor der Interaktion auch große JavaScript-Bundles einbinden.

Verwenden Sie ein Posterbild und laden Sie das Video nach dem Klicken. Bei Heldenabschnitten gewinnt oft ein statisches Bild. Platzieren Sie das Video zur Produkterziehung weiter unten auf der Seite und laden Sie die Einbettung per Lazy-Load. Zeigen Sie bei Slidern einen starken Helden, anstatt mehrere Slides vorab zu laden.

Wenn Video für die Konvertierung wichtig ist, behalten Sie es. Lassen Sie aber nicht jeden mobilen Besucher es herunterladen, bevor er surfen kann. Unser Leitfaden zur Shopify-Videooptimierung verfügt über einbettungsspezifische Muster.

Schritt 5: App-, Schriftart- und Theme-Stärke zuschneiden

Apps fügen Nutzlast auf weniger offensichtliche Weise hinzu: JavaScript-Dateien, CSS-Dateien, Web-Schriftarten, Rezensionsbilder, Tracking-Pixel und API-Antworten. Gehen Sie die App-Einbettungen durch und entfernen Sie auf jeder Seite alles, was nicht benötigt wird. Durchsuchen Sie dann die Theme-Dateien nach alten App-Snippets, die nach der Deinstallation von Apps zurückgeblieben sind.

Schriftarten sind der nächste einfache Gewinn. Verwenden Sie eine oder zwei Familien, begrenzen Sie die Gewichtungen, laden Sie nur die wichtigste Schriftartendatei vor und verwenden Sie nach Möglichkeit Systemschriftarten für Benutzeroberflächen mit geringem Wert. Wenn PageSpeed eine Verzögerung beim Laden der Schriftart anzeigt, verwenden Sie unsere Leitfaden zur Shopify-Schriftoptimierung.

Für Codegewicht, bereinigen ungenutztes CSS und JavaScript. Seitenersteller und alte Themenbereiche liefern häufig Assets aus, die sichtbare Inhalte nicht mehr unterstützen.

Manueller Fix vs. Thunder Fix

Erneuter Test nach Vorlage, nicht nur nach Homepage

Nutzlastprobleme variieren je nach Vorlage. Ihre Homepage ist möglicherweise bildlastig, Produktseiten möglicherweise anwendungslastig und Sammlungsseiten möglicherweise kartenlastig. Testen Sie mindestens eine Homepage, eine Produktseite und eine Kollektionsseite.

Wenn Sie den schnellsten automatisierten Pfad wünschen, installieren Sie Thunder und bereinigen Sie dann die größten Mediendateien. Für praktische Hilfe schauen Sie sich unsere an Shopify-Geschwindigkeitsoptimierungsdienst. Einzelheiten zum Plan finden Sie unter Thunder-Preise.

Referenzen und Validierung

Chromes Anleitung zur Nutzlast des Leuchtturmnetzwerks empfiehlt, unnötige Anfragen aufzuschieben und die Ressourcen so gering wie möglich zu halten. Das lässt sich direkt auf Shopify übertragen: Ändern Sie die Mediengröße, laden Sie unkritische Abschnitte verzögert, kürzen Sie App-Skripte und halten Sie die Startseite schlank.

Shopify-Community-Threads zu dieser Warnung enthalten in der Regel denselben Hinweis, da die Ursachen konsistent sind: Bilder sind zu groß, Apps werden überall geladen, Videos werden zu früh eingebettet und ungenutzter Code wird immer noch versendet. Korrigieren Sie zuerst die größten Dateien. Kleine Optimierungen sind später wichtig; Riesige Nutzlasten erfordern direkte Schnitte.