Seitengeschwindigkeit der Shopify-Sammlung: Beheben Sie langsames Laden und eifrige Bilder

Warum Sammlungsseiten die langsamsten Seiten auf Shopify sind

Wenn Sie Ihren Shopify-Shop schon einmal getestet haben Google PageSpeed Insights, Sie haben wahrscheinlich ein Muster bemerkt: Ihre Homepage schneidet gut ab, die Produktseiten sind anständig, aber -Sammlungsseiten punkten fürchterlich.

Das ist kein Fehler – es liegt in der Natur von Sammlungsseiten. Während auf einer Produktseite 1–5 Bilder und etwas Text angezeigt werden, muss eine Kollektionsseite Folgendes darstellen:

Die Rechnung ist einfach: Eine Produktseite mit 3 Bildern umfasst insgesamt vielleicht 300 KB Bilddaten. Eine Sammlungsseite mit 24 Produkten mit nicht optimierten Bildern kann leicht auftauchen Allein 3-5 MB Bilddaten. Wenn Sie JavaScript, CSS, Schriftarten und Tracking-Skripte hinzufügen, erhalten Sie eine Gesamtseitengröße von 5–8 MB.

Auf einem Mobiltelefon mit einer 4G-Verbindung bedeutet das: 6-12 Sekunden Ladezeit. Google betrachtet alles über 2,5 Sekunden als schlecht Größter Contentful Paint (LCP) Erfahrung.

Die 6 größten Seitengeschwindigkeitskiller in der Sammlung

Nicht alle Leistungsprobleme sind gleich. Hier sind die spezifischen Probleme, die den Sammlungsseiten am meisten schaden, sortiert nach Auswirkung:

1. Nicht optimierte Produktbilder (größte Auswirkung)

Dies ist der Geschwindigkeitskiller Nr. 1 auf Sammlungsseiten, verantwortlich für 60–80 % des gesamten Seitengewichts in den meisten Geschäften. Häufige Probleme:

• • Übergroße Bilder – Hochladen von Produktfotos im Format 4000×4000 Pixel, die auf Sammelkarten mit 300×300 Pixel angezeigt werden
• • Kein verzögertes Laden – alle über 24 Bilder werden sofort heruntergeladen, auch diejenigen unterhalb der Falte, zu der der Besucher nicht gescrollt hat
• • Falsches Format – Bereitstellung von JPEG/PNG, wenn WebP oder AVIF 30–50 % kleiner wäre
• • Kein Quellensatz – Bereitstellung des gleichen großen Bildes auf Mobilgeräten und Desktops statt in gerätegerechten Größen

2. Render-Blocking-Filter JavaScript

Sammlungsfilter- und Sortierfunktionen – ob native Shopify OS 2.0-Filter oder Apps von Drittanbietern wie Boost Product Filter – werden häufig geladen 50-200 KB JavaScript , das das Rendern von Seiten blockiert. Der Besucher kann die Produkte erst sehen, wenn der Download und die Ausführung dieses JavaScript abgeschlossen sind.

Beliebte Filter-Apps fügen zusätzlich zu den Assets Ihres Themes ihre eigenen CSS- und JS-Bundles hinzu. Einige spritzen Inline-Skripte im , das ausgeführt werden muss, bevor Inhalte gerendert werden. Erfahren Sie mehr darüber in unserem Ratgeber Behebung von Rendering-blockierenden Ressourcen auf Shopify.

3. Zu viele Produkte pro Seite

Einige Ladenbesitzer stellen ihre Kollektionen so ein, dass 48, 72 oder sogar 100 Produkte pro Seite angezeigt werden, weil sie glauben, dass dies das Einkaufserlebnis verbessert. In Wirklichkeit ist es vervielfacht jedes Leistungsproblem – mehr Bilder, mehr DOM-Elemente, mehr Speicherverbrauch, mehr Layoutberechnungen.

4. Sammlung von Bannerbildern

Bei vielen Themen wird oben auf den Sammlungsseiten ein großes Helden-/Bannerbild angezeigt. Dieses Bild ist oft das LCP-Element – der größte sichtbare Inhalt, wenn die Seite geladen wird. Wenn es nicht richtig dimensioniert und vorinstalliert ist, verzögert es die gesamte wahrgenommene Ladezeit.

5. App-Skripte von Drittanbietern

Skripte von Drittanbietern von Bewertungs-Apps, Treueprogrammen, Chat-Widgets und Analysetools werden auf jeder Seite geladen – auch auf Sammlungsseiten. Auf einer Produktseite fallen 500 ms Skript-Overhead von Drittanbietern auf. Auf einer Sammlungsseite, die ohnehin schon umfangreich ist, bringt es Sie über den Wendepunkt hinaus.

6. Hover-Effekte und Bildwechsel

Ein beliebtes Designmuster ist die Anzeige eines sekundären Produktbilds beim Hover. Das bedeutet Laden zwei Bilder pro Produktkarte statt eins – Verdoppelung der Bildnutzlast für eine Funktion, die die meisten mobilen Benutzer nie sehen (kein Hovern auf Touchscreens).

Fix: Heldenbannerbild wird eifrig in theme.liquid geladen

Eines der häufigsten Probleme mit der Seitengeschwindigkeit der Shopify-Sammlung ist die Geschwindigkeit Heldenbannerbild lädt. Bei vielen Themes – darunter Dawn, Refresh und andere OS 2.0-Themen – ist das Sammlungsbanner auf eingestellt wird geladen="faul" standardmäßig. Dies ist für das Heldenbanner falsch, da es normalerweise das ist Größtes Contentful Paint (LCP)-Element – der größte sichtbare Inhalt beim ersten Laden der Seite.

Wenn das Hero-Banner verzögert geladen wird, verzögert der Browser absichtlich den Download, bis der Benutzer in die Nähe des Banners scrollt. Aber das Banner ist bereits im Ansichtsfenster sichtbar – der Browser wartet also unnötig und belastet Ihren LCP-Score.

Die Lösung: Stellen Sie Heldenbanner auf „Eifriges Laden“ ein

Suchen Sie den Abschnitt „Helden/Banner“ Ihrer Sammlung in Ihren Themendateien. In den meisten OS 2.0-Themen ist dies der Fall Abschnitte/main-collection-banner.liquid oder ähnlich. Suchen Sie nach dem -Tag, das das Sammlungsbanner rendert und diese Attribute ändert (oder hinzufügt):

<!-- ❌ Wrong: lazy loading the hero banner -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="lazy"
  alt="{{ section.settings.image.alt }}">

<!-- ✅ Correct: eager loading with high fetch priority -->
<img
  src="{{ section.settings.image | image_url: width: 1600 }}"
  loading="eager"
  fetchpriority="high"
  width="{{ section.settings.image.width }}"
  height="{{ section.settings.image.height }}"
  alt="{{ section.settings.image.alt }}">

Speziell für Dawn/OS 2.0-Themen

In Dawn-basierten Themes wird das Sammlungsbanner oft über das gerendert image_tag Der oder Bild-URL einfiltern Abschnitte/main-collection-banner.liquid. Möglicherweise müssen Sie auch eine hinzufügen -Tag in Ihrem theme.liquid Kopf, um den Browser anzuweisen, mit dem Herunterladen des Bannerbilds zu beginnen, noch bevor er auf das trifft -Tag:

<!-- Add to theme.liquid <head> for collection pages -->
{% if template.name == 'collection' and collection.image %}
  <link rel="preload" as="image"
    href="{{ collection.image | image_url: width: 1600 }}"
    fetchpriority="high">
{% endif %}

Manuelle Korrektur Nr. 1: Sammlungsbilder optimieren

Die größte Änderung, die Sie vornehmen können, ist die Korrektur der Art und Weise, wie Produktbilder auf Sammlungsseiten geladen werden.

Fügen Sie natives Lazy Loading hinzu

Finden Sie die Vorlage für Ihre Kollektionsproduktkarte (normalerweise snippets/card-product.liquid oder ähnlich) und hinzufügen wird geladen="faul" zu Produktbildern. Aber hier ist der Haken: Das sollten Sie tun NOT Laden Sie die erste Reihe sichtbarer Produkte verzögert, da dies die LCP verzögert.

{% for product in collection.products %}
  {% if forloop.index <= 4 %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="eager"
         fetchpriority="{% if forloop.first %}high{% else %}auto{% endif %}"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% else %}
    <img src="{{ product.featured_image | image_url: width: 400 }}"
         loading="lazy"
         width="400" height="400"
         alt="{{ product.featured_image.alt | escape }}">
  {% endif %}
{% endfor %}

Verwenden Sie Responsive Bildgrößen

Anstatt allen Geräten ein großes Bild bereitzustellen, verwenden Sie das Quelle -Attribut mit Shopify's image_url-Filter:

<img
  src="{{ product.featured_image | image_url: width: 400 }}"
  srcset="
    {{ product.featured_image | image_url: width: 200 }} 200w,
    {{ product.featured_image | image_url: width: 400 }} 400w,
    {{ product.featured_image | image_url: width: 600 }} 600w"
  sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
  loading="lazy"
  width="400" height="400"
  alt="{{ product.featured_image.alt | escape }}">

Legen Sie explizite Dimensionen fest

Immer einbeziehen Breite und Höhe Attribute auf Ihren Bildern. Ohne sie kann der Browser das Layout erst berechnen, wenn das Bild geladen wird Kumulative Layoutverschiebung (CLS) – Ihre Produkte springen herum, während Bilder geladen werden. Sehen Sie sich unsere an Core Web Vitals-Leitfaden für mehr über CLS.

Manuelle Korrektur Nr. 2: Produkte pro Seite reduzieren

Dies ist die einfachste manuelle Lösung, wird aber oft übersehen. Passen Sie in Ihren Theme-Einstellungen (oder in der Kollektionsvorlage) die Anzahl der pro Seite angezeigten Produkte an.

In Shopify Online Store 2.0-Themes können Sie dies normalerweise ändern Anpassen → Sammlungsseite → Produktraster → Produkte pro Seite. Für Vintage-Themen müssen Sie Liquid der Sammlungsvorlage bearbeiten paginieren -Tag:

{% paginate collection.products by 20 %}
  <!-- product grid -->
{% endpaginate %}

Bedenken Sie: Die Reduzierung der Produkte pro Seite bedeutet mehr Paginierung. Stellen Sie sicher, dass Ihre Paginierung zugänglich und benutzerfreundlich ist, mit klaren Seitenzahlen und Weiter-/Zurück-Schaltflächen.

Manuelle Korrektur Nr. 3: Filter und Sortierung optimieren

Die Filter- und Sortierfunktion ist für die Benutzerfreundlichkeit der Sammlung von entscheidender Bedeutung – aber sie ist auch eine Hauptursache für die Aufblähung von JavaScript. So optimieren Sie es:

Verwenden Sie die native Storefront-Filterung von Shopify

Wenn Sie sich in einem Shopify Online Store 2.0-Theme befinden, verwenden Sie Shopifys integrierte Storefront-Filterung anstelle von Filter-Apps von Drittanbietern. Die native Filterung erfolgt serverseitig, was bedeutet, dass kein umfangreiches clientseitiges JavaScript erforderlich ist. Die Seite wird mit gefilterten Ergebnissen neu geladen, anstatt auf dem Client zu filtern.

Zum Aktivieren: gehen Sie zu Shopify Admin → Online-Shop → Navigation → Sammlung und Suchfilter. Fügen Sie die gewünschten Filter hinzu (Preis, Verfügbarkeit, Produkttyp, Anbieter usw.).

Filter-JavaScript aufschieben

Wenn Sie für erweiterte Funktionen eine Filter-App eines Drittanbieters verwenden müssen, stellen Sie sicher, dass deren Skripts zurückgestellt sind. Suchen Sie nach einem <script> -Tag in Ihrem Theme, das das JS der Filter-App lädt und das hinzufügt aufschieben -Attribut:

<!-- Before (render-blocking) -->
<script src="https://filter-app.com/bundle.js"></script>

<!-- After (deferred) -->
<script src="https://filter-app.com/bundle.js" defer></script>

Manuelle Korrektur Nr. 4: Intelligente Paginierung implementieren

Wie Sie mit der Paginierung umgehen, wirkt sich sowohl auf die Geschwindigkeit als auch auf das Benutzererlebnis aus. Hier sind die drei Ansätze, sortiert nach Leistung:

Wenn Sie Infinite Scroll oder „Mehr laden“ verwenden, stellen Sie sicher, dass Ihre Implementierung das verwendet Intersection Observer API (keine Scroll-Ereignis-Listener, die die Leistung beeinträchtigen) und enthält ordnungsgemäß <noscript> Fallback-Paginierung für SEO-Crawler.

Manuelle Korrektur Nr. 5: Kritisches CSS für Sammlungen

Der Browser kann keine Inhalte rendern, bis er Ihre vollständige CSS-Datei herunterlädt und analysiert. Bei Shopify sind Theme-CSS-Dateien normalerweise 100–300 KB groß. Kritisches CSS-Inlining löst dieses Problem, indem das dafür benötigte CSS eingefügt wird „Above-the-Fold“-Inhalt direkt im HTML.

Für Sammlungsseiten enthält das kritische CSS Stile für:

• • Die Kopfzeile/Navigation
• • Sammlungsbannerbild (falls vorhanden)
• • Die erste Reihe von Produktkarten (Rasterlayout, Bildgröße, Textstil)
• • Seitenleistenlayout filtern (falls oberhalb der Falte sichtbar)

Das manuelle Generieren von kritischem CSS ist mühsam – Sie müssen herausfinden, welche CSS-Regeln für „above-the-fold“-Elemente gelten, sie extrahieren und in ein <Stil> -Tag im <head>und dann das vollständige Stylesheet asynchron laden. Werkzeuge wie Kritisch von Addy Osmani kann dabei helfen, dies zu automatisieren, aber die Integration in einen Shopify-Theme-Erstellungsprozess ist nicht trivial.

So messen Sie die Seitengeschwindigkeit einer Sammlung

Raten Sie nicht – messen Sie. Du kannst Testen Sie die Geschwindigkeit Ihrer Sammlungsseite in Sekunden mit unserem kostenlosen Tool oder nutzen Sie die untenstehenden Optionen. Aber testen Sie die richtigen URLs. Die meisten Leute testen ihre Homepage und nennen es fertig. Für die Seitengeschwindigkeit der Sammlung müssen Sie Folgendes testen:

Verwenden Sie diese Tools zum Testen (mehr erfahren Sie in unserem Leitfaden zur Leistungsüberwachung):

• • Google PageSpeed Insights – testet Mobilgeräte und Desktops und zeigt Core Web Vitals
• • GTmetrix – detaillierte Wasserfalldiagramme, die genau zeigen, was langsam ist
• • Chrome DevTools (Registerkarte „Netzwerk“) – Filtern Sie nach Bildern, um die gesamte Bildnutzlast anzuzeigen
• • WebPageTest – Filmstreifenansicht, um zu sehen, wann Produkte sichtbar werden

Thunder vs. manuelle Sammlungsseitenoptimierung

Häufig gestellte Fragen

Verwandte Ressourcen