So optimieren Sie die Bildauslieferung und LCP auf einer Live-Seite

Bildbereitstellung und LCP verstehen

Das Verständnis von Image Delivery und Largest Contentful Paint (LCP) ist unerlässlich, wenn Sie die Seitenladegeschwindigkeit verbessern möchten.

Was ist Bildübertragung?

Image Delivery bezeichnet ein System oder eine Infrastruktur, die darauf ausgelegt ist, Bilder effizient zu optimieren, zu transformieren und an Endbenutzer über verschiedene Geräte und Netzwerkbedingungen hinweg zu liefern.

Ein Bildübertragungssystem kombiniert typischerweise:

• Ein Content Delivery Network (CDN) für globales Caching und schnelle Auslieferung
• Bildverarbeitung in Echtzeit (Größenänderung, Komprimierung, Formatkonvertierung)
• Geräte- und viewport-basierte Optimierung

Bilder machen oft einen Teil aus 50–70 % der gesamten Nutzlast einer SeiteWenn Bilder nicht richtig optimiert sind, gehören sie zu den Hauptursachen für Folgendes:

• Langsame Seitenladezeit
• Schlechte Core Web Vitals-Werte
• Hoher Bandbreitenverbrauch
• Reduziertes Benutzerengagement
• Niedrigere Conversion-Raten

Eine effiziente Bildbereitstellung gewährleistet, dass Benutzer nur die für ihr Gerät und ihren Bildschirm erforderliche Bildgröße herunterladen, ohne dabei an visueller Qualität einzubüßen.

Was ist Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) ist eine der wichtigsten Web Vitals-Metriken von Google. Sie misst die Zeit von der Seitennavigation bis zum vollständigen Rendern des größten sichtbaren Elements im Viewport.

In den meisten Fällen ist das LCP-Element:

• Ein Hero-Bannerbild
• Ein großes Produktbild
• Ein hervorgehobener Werbeblock
• Ein großer Textblock

Da es sich bei dem LCP-Element häufig um ein Bild handelt, führt eine ineffiziente Bildverarbeitung, wie z. B. große Dateigrößen, fehlendes Vorladen, verzögerte Anfragen oder mangelnde Komprimierung, direkt zu einer Verlängerung der LCP-Zeit.

Die Optimierung der Bildübertragung spielt eine entscheidende Rolle bei:

• Verbesserung der wahrgenommenen Ladegeschwindigkeit
• Bessere Suchmaschinenplatzierungen erzielen
• Steigerung des Benutzerengagements
• Höhere Konversionsraten erzielen

Wie man die Bildbereitstellung und LCP optimiert

Es gibt zwei Hauptmethoden, um die Bildauslieferung zu optimieren und die LCP in GemPages zu verbessern: die Anpassung der Bildqualität auf Elementebene und die Konfiguration des Ladeverhaltens auf Seitenebene. Im Folgenden werden wir jede Methode Schritt für Schritt erläutern.

1. Konfigurieren Sie die Bildelementeinstellungen im Editor.

GemPages bietet eine Qualitätseinstellung Damit können Sie steuern, wie Bilddateien auf der Live-Seite gerendert und ausgeliefert werden. Diese Einstellung ist Teil der LCP optimieren Abschnitt innerhalb des Element-Einstellungsfelds.

Um darauf zuzugreifen:

• Öffnen Sie Ihre Seite im GemPages-Editor.
• Wählen Sie ein bildbezogenes Element aus
• Gehen Sie zur linken Seitenleiste.
• Scrollen Sie nach unten zum LCP optimieren Abschnitt

Diese Konfiguration beeinflusst direkt die Größe der vom Browser angeforderten Bildvariante, was sich auf die Bildauslieferungsleistung und LCP auswirkt.

Bitte beachten Sie, dass die Qualitätseinstellung nur unter folgenden Bedingungen funktioniert:

• Das Bild muss auf dem Shopify CDN gehostet werden (d. h. es wurde über Shopify hochgeladen).
• Das verwendete Element muss eines der folgenden sein:
  • Bild
  • Artikelbild
  • Bildvergleich

So funktioniert die Qualitätseinstellung:

Die Einstellung „Qualität“ bestimmt die Breite der angeforderten Bildvariante basierend auf der Viewbox-Breite des Elements (der tatsächlichen Breite, in der das Bild innerhalb Ihres Seitenlayouts angezeigt wird).

Verfügbare Optionen:

• Feinste: Das System lädt die ursprünglich hochgeladene Bilddatei ohne Größenänderung. 
• Hoch: Das System fordert eine Bildvariante in der Größe an 1.5 × die Viewbox-Breite.
• Medium: Das System fordert eine Bildvariante mit genau der Größe von 1 × die Viewbox-Breite.
• Benutzerdefiniert: Das System berechnet die angeforderte Bildgröße anhand dieser Formel: Viewbox-Breite × X% (benutzerdefiniertes Verhältnis; empfohlener Standardwert: 100%).

Beispiel: Sie haben ein Bild mit einer Breite von 2000 Pixeln und einem Viewbox-Breite von 400 Pixeln hochgeladen. Die angeforderte Bildgröße hängt von der gewählten Option ab:

• Beste Einstellung => Originalbilddatei laden (2000px)
• Hoch => Lädt eine Bildvariante mit Breite = 400 × 1.5 = 600px
• Mittel: Lädt eine Bildvariante mit Breite = 400 × 1 = 400px
• Benutzerdefiniert: 200 % → Lädt eine Bildvariante mit Breite = 400 × 2 = 800px

Bei 1: Im Editor das Element auswählen BildScrollen Sie in der linken Seitenleiste nach unten zu LCP optimieren, kompensieren Qualität = beste, sowohl Desktop- als auch Mobilmodus:

Live-Seite: Laden Sie die Originalbilddatei.

Wir testen die Leistung dieser Seite, und das Ergebnis lautet:

Bildlieferung muss verbessert werden:

Bei 2: Im Editor das Element auswählen BildScrollen Sie in der linken Seitenleiste nach unten zu LCP optimieren, kompensieren Qualität = Mittel, sowohl Desktop- als auch Mobilmodus:

Live-Seite: Lädt eine Bildvariante mit Breite = 500px * 1 = 500px

Anschließend testen wir die Leistung dieser Seite; das Ergebnis wird aktualisiert. höherer Leistungspunktund die Die Bildübertragung wurde verbessert:

Was können wir daraus lernen?

Das Laden der Originalbilddatei kann die Dateigröße unnötig erhöhen, insbesondere wenn die Anzeigegröße viel kleiner ist als das hochgeladene Bild.

Durch die Einstellung der Qualität auf ein sinnvolles benutzerdefiniertes Seitenverhältnis wird sichergestellt, dass die Bildgröße der tatsächlichen Bildschirmbreite entspricht. Dies reduziert die Dateigröße, verbessert die Ladezeit und optimiert LCP, ohne die Bildqualität zu beeinträchtigen.

Die Einstellung LCP optimieren wird auf die gleiche Weise konfiguriert für die Artikelbild , Bildvergleich Elemente.

2. Andere Konfigurationen

Neben der Anpassung der LCP optimieren Durch die Einstellung auf Elementebene können Sie die Bildauslieferung und den Largest Contentful Paint (LCP) weiter verbessern, indem Sie steuern, wie Bilder beim ersten Seitenrendering geladen werden.

Diese Optimierungen konzentrieren sich auf wann , wie Kritische Bilder werden vom Browser angefordert.

„Lazyload Image“ deaktivieren

Was ist Lazy Load?

Lazy Loading ist eine Technik, die das Laden von Bildern verzögert, bis diese sich in der Nähe des sichtbaren Bereichs des Bildschirms befinden. Anstatt alle Bilder sofort beim Seitenaufbau zu laden, lädt der Browser sie erst beim Scrollen des Nutzers.

👉 In diesem Artikel erfahren Sie mehr über Lazy Load: Veröffentlichungseinstellungen – Lazyload-Bild

Durch das Deaktivieren des Lazy Loading für kritische Images wird Folgendes sichergestellt:

• Bilder innerhalb des anfänglichen Ansichtsfensters werden sofort angefordert
• Der Browser priorisiert das Abrufen des LCP-Bildes.
• Das Rendern von Hero-Bannern oder Produktbildern wird nicht verzögert.

Dies ist besonders wichtig, da das LCP-Element in den meisten E-Commerce- oder Landingpages typischerweise Folgendes ist:

• Ein Hero-Bannerbild
• Ein großes Produktbild
• Ein hervorgehobener Werbeblock

Wenn solche Bilder verzögert geladen werden, wartet der Browser, bis die Layoutberechnung abgeschlossen ist, bevor er die Anfrage initiiert, was LCP direkt verzögert.

„Lazyload-Sektion“ aktivieren

Was ist ein Lazy Load Abschnitt?

Lazy Load Section ist eine Leistungseinstellung, die das Rendern ganzer Abschnitte verzögert, die sich außerhalb des anfänglichen Ansichtsfensters (unterhalb des sichtbaren Bereichs) befinden.

Anstatt das Laden von Bildern einzeln zu steuern, arbeitet diese Einstellung auf struktureller Ebene – das heißt, der gesamte Abschnitt (einschließlich seiner Bilder, Texte, Skripte und Layoutstruktur) wird erst geladen, wenn der Benutzer in seine Nähe scrollt.

👉 Mehr dazu finden Sie in unserem Hilfeartikel hier: Aktivieren Sie Lazyload und laden Sie Ihren Abschnitt und Ihr Bild vorab

Wenn aktiviert:

• Bereiche außerhalb des anfänglichen Ansichtsfensters werden beim ersten Laden weder gerendert noch angefordert.
• Die DOM-Größe beim ersten Rendern wird reduziert (Document Object Model – stellt den strukturierten Baum von HTML-Elementen dar, den der Browser beim Laden einer Seite erstellt).
• Weniger Netzwerkanfragen konkurrieren um Bandbreite
• Die Auslastung des Hauptthreads sinkt

Dies verbessert:

• Zeit für den ersten Anstrich (FCP)Sichtbarer Inhalt wird früher angezeigt
• LCP-Stabilität: Kritische Elemente konkurrieren nicht um Ressourcen
• Gesamtreaktionsfähigkeit der Seite: reibungslosere anfängliche Interaktion

In einfachen Worten:

• Wir sorgen dafür, dass sichtbare Inhalte sofort geladen werden.
• Wir verschieben die Komplexität unterhalb der Falte.

Diese Methode stellt sicher, dass der Browser priorisiert, was die Nutzer zuerst sehen, und Inhalte, die nicht sofort benötigt werden, zurückstellt.

„Vorladebereich“ aktivieren

Was ist der Vorladebereich?

Die Vorladeoption ist eine Leistungseinstellung, die dem Browser signalisiert, beim Laden von Abschnitten, die im anfänglichen Ansichtsbereich sichtbar sind, Priorität zu haben. Weitere Informationen finden Sie unter: Seitenoptimierungsfunktion

Wenn der Vorladebereich aktiviert ist:

• Alle Abschnitte innerhalb des Ansichtsfensters (nicht nur der allererste Abschnitt) werden priorisiert.
• Der Browser beginnt früher mit dem Abrufen der kritischen Ressourcen.
• Unterschiede zwischen Desktop- und mobilen Ansichtsfenstern werden korrekt behandelt.

Ohne Vorladelogik priorisieren Browser üblicherweise nur den ersten Abschnitt. Andere Abschnitte, die noch im sichtbaren Bereich liegen, werden möglicherweise erst später angefordert, nachdem Layout und Rendering abgeschlossen sind. Dies kann das Laden von Bildern verzögern und sich direkt auf LCP auswirken.

Dies ist besonders wichtig für responsive Layouts, bei denen:

• Der Desktop-Viewport kann 2–3 Abschnitte oberhalb der Falz enthalten.
• Die Viewport-Struktur auf Mobilgeräten unterscheidet sich deutlich.
• Durch das Vorladen wird sichergestellt, dass viewport-sensitive Inhalte über alle Breakpoints hinweg als hohe Priorität behandelt werden.

Warum diese Kombination funktioniert

Ziel ist es nicht, alles gleichzeitig zu deaktivieren oder zu aktivieren. Leistungsoptimierung funktioniert am besten, wenn das Ladeverhalten strategisch koordiniert wird.

Ein effektiver Ansatz umfasst:

• Do kein Frontalunterricht. kritische Images verzögert laden → LCP schützen
• Lazy Load nicht sichtbarer Abschnitte → Reduzierung der anfänglichen Lastkosten
• Alle Viewport-Abschnitte vorladen → Netzwerkpriorität an visuelle Priorität anpassen

Dadurch wird sichergestellt, dass die Inhalte, die dem Benutzer zuerst angezeigt werden, sofort geladen werden, während nicht kritische Inhalte warten.

Wir haben eine Produktseite mit folgendem Setup getestet:

• Das Bild hat die beste Qualität.
• Die Produktliste enthält Produktbilder, Qualität = beste Qualität
• Lazyload-Bild is ON
• Lazyload-Abschnitt is OFF
• Vorladebereich ist behindert

→ Das Ergebnis lautet:

Wie Sie sehen können, Bildübertragung muss verbessert werdenweil die Downloadzeit der Bilder lang ist:

Anschließend haben wir die Seite gemäß der empfohlenen Strategie neu konfiguriert:

• Konfigurieren Sie die Einstellelement Das Bild im Editor enthält: Bild, Produktbild; Qualitätseinstellung = Mittel
• Lazyload-Bild is OFF
• Lazyload-Abschnitt is ON
• Vorladebereich is freigegeben

Nachdem wir alle Änderungen angewendet hatten, klickten wir. Veröffentlichen im Seiteneditor die Live-Seite aktualisieren.

Anschließend haben wir die Leistung dieser Seite erneut getestet.. Das Ergebnis hat sich geändert: Die Performance dieser Seite ist optimiert.

Die Bildübertragung erfolgt verbessert:

Letzter Imbiss

Bei der Leistungsoptimierung geht es nicht darum, eine Einstellung EIN- oder AUSzuschalten.

Es geht um:

• Bereitstellung von Bildern in der richtigen Größe
• Sichtbarer Inhalt wird sofort geladen
• Nicht kritische Inhalte intelligent aufschieben
• Ressourcenpriorisierung basierend auf dem, was die Nutzer tatsächlich sehen

Wenn diese Strategien zusammenwirken, verbessern sich sowohl die Bildauslieferung als auch die LCP geräteübergreifend konsistent, insbesondere auf bildreichen Seiten wie Produktseiten und Landingpages.