Verzögerung bei Auslieferung von Bildern / Shopify CDN

[Shevek]

Wir haben festgestellt, dass es bis zu 1s dauert, bis das Shopify CDN (Content Delivery Network) ein Bild ausliefert. Dieses scheint nach der ersten Auslieferung für eine gewisse Zeit gecached zu werden, allerdings nicht besonders lange (wenige Minuten?). Während es gecached ist, erfolgt die Auslieferung innerhalb von wenigen Millisekunden. Ich rede hier nicht von der Übertragungszeit des Bildes, sondern wirklich von der Wartezeit bis überhaupt das erste Byte ausgeliefert wird vom Shopify Server.

Durch dieses Verhalten ergeben sich gerade bei langen Listen von Produkten teilweise durchaus unangenehme Nachladezeiten des Lazy Loads der Produktbilder. Ähnlich ist es, wenn ein Besucher ein Produktbild vergrößen will: Die vergrößerte Version des Bilds lädt dann mit 1s doch recht lange. 

Die Ladezeit scheint dabei nicht wesentlich davon abzuhängen, welche Version des Bilds abgerufen wird (also welche Größe, auch die Originalgröße dauert so lange).

Wie kann man das verbessern? Hilft es evtl, Cloudflare dazwischen zu schalten? Cloudflare bietet ja einen Image-Caching-Service.

[Gabe]

Hey @Shevek 

Danke für den Sachverhalt und dazu wollte ich fragen wie du das ge-benchmarked hast genau, mit welchen Tool, oder wo du das siehst? Und für Desktop oder Mobile? Das habe ich meinem Shop jetzt getestet in der Developer Console und bekam benchmarks und TTFBs von um die <100-200 millisekunden.

Oder verwendest du unseren neuen RUM Tool (real user monitoring) und die Google Core Web Vitals? Jeder externe Link, der Informationen auf deine Website zieht, ist ein sog. Call Out. Beispielsweise können deine Social Media Links deine Shop Ladezeiten und Time to First Bytes (TTFBs) verlangsamen.

Die Ladezeiten hängen auch davon ab, von wie vielen Seiten du Daten abrufst und wie lange diese Seiten brauchen, um dir zu antworten.

Hier ein paar Tipps aus verwandten Community Threads sowie Links zum jeweiligen Thread für dich unten zusammengefasst:

• Optimierung der Bildgröße: Stelle sicher, dass deine Bilder optimal komprimiert sind, ohne dabei an Qualität zu verlieren. Tools wie TinyPNG oder JPEGmini können dabei helfen, die Dateigröße zu reduzieren, was die Ladezeiten verbessert​ (Community Link)​. 
• Verwendung von Lazy Loading: Dieses Verfahren lädt Bilder erst dann, wenn sie im Browserfenster sichtbar werden. Shopify unterstützt Lazy Loading, was besonders hilfreich ist, um die anfängliche Ladezeit zu verkürzen und die Performance zu verbessern​ (Community Link)​.
• Verbesserung der CDN-Konfiguration: Manchmal kann die Einrichtung eines zusätzlichen CDN wie Cloudflare helfen, die Inhalte schneller auszuliefern, indem eine optimierte Route für die Datenübertragung verwendet wird. Cloudflare bietet spezielle Optimierungen und Caching-Optionen, die die Leistung steigern können​ (Community Link)​.
• Regelmäßige Überwachung und Tests: Verwende Tools wie Google PageSpeed Insights oder GTmetrix, um die Leistung deiner Website regelmäßig zu überwachen und zu analysieren. Diese Tools können dir spezifische Empfehlungen geben, wie du die Ladezeiten weiter verbessern kannst​ (Community Link)​.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Shevek]

Vielen Dank für deine Antwort! Um das Phänomen genau einzugrenzen, habe ich einen komplett neuen Shop aufgesetzt: https://eedc87-de.myshopify.com/products/musli

Dort nehme ich dann das Bild des oben verlinkten Produkts und öffne es in einem neuen Tab: https://eedc87-de.myshopify.com/cdn/shop/files/muesli.webp?v=1715281896

Wenn ich nun die Version des Bildes ändere (also zB v=1715281897) um eine längere Wartezeit bzw einen leeren CDN-Cache zu simulieren, ergibt sich diese Messung der Chrome Entwicklertools.

 Man sieht dort deutlich, dass die Wartezeit auf die Serverantwort fast 1s dauert. Lädt man dann neu, dauert es nur noch 65ms, vermutlich, weil es dann aus dem CDN-Cache geladen wird. Wenn der CDN-Cache nicht relativ schnell gelöscht würde, wäre das kein Problem, aber wenn ein Bild nicht gerade ständig von Besuchern angefordert wird, dauert das Laden leider jedesmal so lange.

Da ich in diesem Beispiel alle anderen Faktoren herausgenommen habe und wirklich nur das Anfordern des Bildes selbst messe, sehe ich eigentlich keine andere mögliche Ursache als ein langsames Shopify-CDN bzw. eine zu kurz eingestellte Cache-Zeit. Kann man diese irgendwie erhöhen? Ich wäre sogar bereit, Geld dafür zu zahlen.

[Gabe]

Hey @Shevek 

Das habe ich jetzt in der Dev Console mit deinen Links nachgestellt und bekam ohne Caching ganz andere Ergebnisse, unterhalb der 500 Millisek. Wie gesagt, das hat mit verschiedenen Faktoren vor Ort zu tun, wie z. B. das Bildformat das du verwendest, aber vor allem mit deinem ISP. Bist du mit der Deutschen Telekom? Wenn ja, wirst du einige Threads zum Thema "Deutsche Telekom und das ISP Throttling" finden wo einige sich über langsame Ladezeiten beklagt haben (suche in der Community einfach nach "deutsche telekom"). Viele haben von verbesserten Ladezeiten berichtet nachdem sie zu einer VPN gewechselt haben.

Somit ist das was du oben berichtest eine mehr lokale Sache und hat eher mit deinem ISP zu tun, denn meine TTFBs waren wesentlich schneller als deine oben abgebildete.

Desweiteren

Unser CDN verbessert ja die Ladezeiten signifikanterweise, indem es Inhalte von einem Serverstandort aus liefert, der geografisch näher am Benutzer ist. Shopify bietet bereits ein leistungsfähiges und Best-of-Breed CDN, das weltweit verteilt ist und optimierte Punkte hat, die einen höheren Cache-Treffer und schnelle Auslieferungen ermöglichen​ (Shopify)​.

Mehr dazu hier:

• What Is a CDN and How Do CDNs Work?
• The Shopify Platform
• Changes to Merchant Asset URLs API

Die Wahl des richtigen Bildformats kann erheblich zur Beschleunigung der Ladezeiten beitragen. Shopify unterstützt mehrere Bildformate, wobei WebP für eine bessere Kompression sorgt, ohne die Bildqualität zu beeinträchtigen. Dieses Format kann die Dateigröße im Vergleich zu JPEG um bis zu 30% reduzieren und wird automatisch an unterstützende Browser ausgeliefert​ (Burst Commerce)​. Die Komprimierung von Bildern kann die Dateigrößen reduzieren, ohne dass die Qualität merklich leidet. Tools wie TinyIMG oder CrushPics können dabei helfen, Bilder effizient zu komprimieren​.

Überprüfe deine Lazy-Loading-Einstellungen. Es kann manchmal besser sein, wichtige Bilder sofort zu laden (Eager Loading), besonders wenn diese oben auf der Seite erscheinen, um die wahrgenommene Ladezeit zu verbessern​ (Performance @ Shopify)​. Die Nutzung des fetchpriority Attributs für kritische Bilder kann die Ladezeiten verbessern, indem es dem Browser signalisiert, diese Bilder mit einer höheren Priorität zu laden​.

Dann nutze Descriptive Dateinamen für deine Bilder, um sowohl die SEO-Leistung zu steigern als auch die Zugänglichkeit für Screenreader zu verbessern​ (Burst Commerce)​. Um herauszufinden, welche Bilder bei deinen Benutzern am besten ankommen, können A/B-Tests nützlich sein. Dies hilft dir, auf Nutzerpräferenzen basierende Entscheidungen zu treffen​ (Burst Commerce)​.

Hoffe die Tipps helfen dir weiter - lass wissen falls nicht! Im Grunde arbeitest du, wie gesagt mit einem der besten globalen SaaS Plattforms der Welt. Wenn dir das aber trotzdem nicht ausreicht wäre zu überlegen entweder zu unserem Headless Storefronts zu wechseln, oder ein eigenes Hosting, beispielsweise mit Oxid zu überlegen. 😉

[Shevek]

Ich habe es mit zwei verschiedenen Providern (TNG & Deutsche Telekom) probiert. Bei beiden habe ich das selbe Ergebnis bekommen. Ich halte die Erklärung allerdings auch nicht wirklich für logisch: Wenn es an meinem Provider liegen würde, sollte es doch keinen Unterschied machen, ob die selbe Datei kurz vorher schon einmal (von einem andere Computer aus!) aufgerufen wurde? Genau das ist aber der Fall. Hinzu kommt, dass ich auch 500ms für ziemlich langsam halte: Das CDN schafft ja mit Cache auch um die 50ms und das sollte doch eigentlich auch das Ziel sein?

Was die anderen vorgeschlagenen Lösungen angeht:  Verstehe ich es richtig, dass Sie da gerade mit Oxid die Konkurrenz empfohlen haben? Es ist eigentlich nicht mein Ziel, das komplette Shopsystem zu wechseln. Was sagen Sie denn zu meiner Idee, ein CDN zusätzlich zu nutzen (Cloudflare bietet das so soweit ich weiß zB an)?

[Gabe]

@Shevek 

Ja da haben Sie schon recht und Cloudflare kann man in der Tat verwenden. Oxid ist nicht wirklich eine Konkurrenz in der Hinsicht da es ja primär für das eigene Hosting konzipiert ist und daher ein eher fortgeschrittenes technische Know-how verlangt was nicht die meisten Online Businesses haben oder brauchen.

Das habe ich jetzt etwas recherchiert und Cloudflare bietet i.d.T. nicht nur Image-Caching, sondern auch weitere Optimierungsfunktionen wie WebP-Konvertierung, die die Dateigröße von Bildern verringern kann, ohne die Qualität zu beeinträchtigen. Dies kann die Ladezeiten erheblich verbessern. Es könnte jedoch hilfreich sein, spezifische Benchmarks und Tests durchzuführen, um festzustellen, ob Cloudflare (oder ein anderes CDN) in eurem speziellen Fall tatsächlich eine Verbesserung darstellt.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Shevek]

Danke für Ihre Antwort. Ich habe mal etwas zu Cloudflare recherchiert: Da Shopify selbst Cloudflare nutzt, kann man dieses nicht selbst erneut nutzen außer mit einem (sehr teuren) Enterprise-Account und einem 020 genannten Service: https://developers.cloudflare.com/cloudflare-for-platforms/cloudflare-for-saas/saas-customers/provid...

Um das Problem nochmal zu verdeutlichen, habe ich nochmal ein neues Testprodukt erstellt: https://eedc87-de.myshopify.com/products/transparentes-musli

Ich habe als Produktbild ein transparentes PNG genommen. Dafür braucht das CDN jetzt fast 4s (!), um das Bild zu generieren. Ich verstehe ehrlich gesagt gar nicht, dass das ganze kein riesiges Thema ist: Je mehr ich mich damit beschäftige, desto mehr fällt mir auf, dass wirklich viele Shopify-Shops die Bilder ziemlich langsam ausliefern. Ist das kein Thema, das Shopify verbessern möchte? Es würde ja schon helfen, die Cache-Dauer zu erhöhen oder irgendwie einstellbar zu machen.

[Gabe]

Hey @Shevek 

Danke für das Beispiel und hier ist wieder so wie ich oben bereits erwähnt habe bzgl. den Bilddaten selber. Das waiting for server response = 3.81 s und die lange Ladezeit des Bildes muesli_transparent.png (3,8 Sekunden) auf deiner Shopify-Website lässt sich anhand der Netzwerkladedaten auf einige Schlüsselfaktoren zurückführen, sprich, es liegt halt an deinen Bildern:

1. Bildgröße und Kompression: Die ursprüngliche Größe des PNG-Bildes muesli_transparent.png beträgt 5.129.993 Bytes (etwa 5 MB), was für ein Web-Bild ziemlich groß ist. Das ausgelieferte Bild wird auf 177.402 Bytes als WebP-Format komprimiert, aber die ursprünglich große Dateigröße deutet auf eine hohe Auflösung oder ein detailliertes Bild hin, dessen Verarbeitung ressourcenintensiv sein kann.

2. Bildverarbeitungszeit: Die Server-Timing-Details zeigen eine erhebliche Verarbeitungszeit für das Bild (imageryProcess;dur=3457.493 Millisekunden, also etwa 3,5 Sekunden). Dies umfasst das Umwandeln und Optimieren des Bildes in ein WebP-Format, was rechenintensiv sein kann, insbesondere bei großen oder detaillierten Bildern.

3. Cache-Status: Der Status Cf-Cache-Status: MISS zeigt an, dass das Bild nicht aus dem Cache von Cloudflare abgerufen wurde, sondern direkt vom Server verarbeitet und geliefert werden musste. 

4. Server- und Netzwerkantwort: Obwohl die tatsächliche Übertragungszeit (cfRequestDuration;dur=3687.000036 Millisekunden) die Netzwerk- und Serververarbeitungszeit umfasst, wurde der größte Teil der Dauer wahrscheinlich durch die Bildverarbeitung auf der Serverseite verbraucht.

Um die Ladezeit dieses Bildes zu optimieren, könnten folgende Maßnahmen hilfreich sein:

• Bilder vorab komprimieren und skalieren: Das manuelle Anpassen der Größe und Komprimieren von Bildern vor dem Hochladen kann die Serverlast reduzieren, da der Server diese Operationen nicht mehr in Echtzeit durchführen muss.
• Bildverwendung überprüfen: Prüfen, ob ein Bild in solch hoher Auflösung notwendig ist oder ob ein Bild mit geringerer Auflösung ausreichen würde, um die Bandbreiten- und Verarbeitungsanforderungen zu reduzieren.

Siehe mal einen Vergleich der Ladezeit deines Bildes mit den Bildern auf meiner PDP unten in ein paar Screenshots abgebildet (alle im Incognito Modus gemacht und beim ersten Laden ohne Caching):

Deine Ladezeit konnte ich replizieren und die Einzelheiten erkläre ich weiter unten:

Hier ein Vergleich mit meinen Bilder beim ersten Laden:

Meine Bilder haben im Frontend so ziemlich dieselbe Qualitaet wie deine Bilder, nur lädt beispielweise 4008167152729.webp viel schneller als muesli_transparent.png aufgrund mehrerer Faktoren, die in den Netzwerkladedaten erkennbar sind:

1. Dateigröße und Format: Meiner Bilder sind kleiner in der Dateigröße (9,688 Bytes gegenüber 177,402 Bytes) und sind bereits im effizienten WebP-Format, was von Haus aus eine schnellere Verarbeitung und Übertragung ermöglicht.

2. Der Cache-Status meines Bildes ist ebenfalls MISS, sprich, das Bild wurde bei dieser Anfrage nicht aus dem Cache abgerufen, sondern direkt vom Server geliefert.

3. Bildverarbeitungszeit: Die Server-Timing-Daten zeigen, dass die Verarbeitungszeit des Bildes (imageryProcess;dur=42.590 Millisekunden) deutlich kürzer ist als bei deinem Bild (3,457.493 Millisekunden). Dies deutet darauf hin, dass weniger Rechenzeit für die Verarbeitung benötigt wird, was oft mit der geringeren Komplexität und Größe des Bildes zusammenhängt.

4. Server-Antwortzeit: Die Gesamtdauer der Serverantwort (cfRequestDuration;dur=241.999865 Millisekunden) ist wesentlich kürzer mit meinem Bild. Das zeigt eine effizientere Abwicklung der Anfrage durch den Server und das Netzwerk.

5. Auflösung und Details: Das zweite Bild hat eine Breite von nur 360 Pixeln, verglichen mit 1100 Pixeln beim ersten Bild. Eine geringere Auflösung reduziert typischerweise die Dateigröße und die benötigte Verarbeitungszeit.

Diese Faktoren zusammen erklären, warum meine Bilder viel schneller laden: kleiner, weniger komplex, bereits optimiert und benötigen weniger Serverressourcen zur Verarbeitung der Bilder.

Somit liegt es, wie gesagt, nicht am CDN sondern an deinen Bildern.

[Shevek]

Danke für die ausführliche Antwort! Um die Problematik genauer zu verstehen, habe ich mal ein paar Experimente mit WebP-Bildern gemacht:

2400x2400px, 277kB Originalgröße, mit Transparenz:

 https://eedc87-de.myshopify.com/products/transparentes-webp-musli

--> Generierungszeit 1,3s

2400x2400px, 162kB Originalgröße, mit Transparenz:

https://eedc87-de.myshopify.com/products/transparentes-webp-musli-niedriger-qualitat

--> Generierungszeit 1,3s

2400x2400px, 231kB Originalgröße, ohne Transparenz:

https://eedc87-de.myshopify.com/products/webp-musli-hoher-qualitat-grosse-menge-kopie

--> Generierungszeit 1,1s

2400x2400px, 129kB Originalgröße, ohne Transparenz:

https://eedc87-de.myshopify.com/products/webp-musli-geringer-qualitat-grosse-menge

--> Generierungszeit 1,1s

1200x1200px, 140kB Originalgröße, mit Transparenz:

https://eedc87-de.myshopify.com/products/transparentes-webp-musli-hoher-qualitat-kleine-menge

--> Generierungszeit 3,1s

1200x1200px, 80kB Originalgröße, mit Transparenz:

https://eedc87-de.myshopify.com/products/transparentes-webp-musli-niedriger-qualitat-kleine-menge

--> Generierungszeit 2,8s

1200x1200px, 123kB Originalgröße, ohne Transparenz:

https://eedc87-de.myshopify.com/products/webp-musli-hoher-qualitat-kleine-menge

--> Generierungszeit 1,0s

1200x1200px, 66kB Originalgröße, ohne Transparenz:

https://eedc87-de.myshopify.com/products/webp-musli-geringer-qualitat-kleine-menge

--> Generierungszeit 1,4s

Für die Messung habe ich jeweils das Bild in der Originalgröße angefordert, d.h. ohne Angabe des Parameters width oder height. Einige Dinge dazu:

1. Wie hast du es geschafft, ein transparentes Bild mit nur 300ms Generierungszeit zu erstellen? Das ist mir wie du oben siehst nicht mal im Ansatz gelungen. Wie sieht das Originalbild genau aus bzw. mit welchen Parametern wurde es gespeichert?

2. Aus den Messungen oben werde ich nicht wirklich schlau. WebP ist das schnelle Originalformat, ja, aber was ist der Einfluss weiterer Variablen? Eine kleine Größe des Bildes scheint sogar mehr Berechnungszeit zu erfordern, was nicht gerade intuitiv ist. Die Qualität bzw Dateigröße scheint außerdem keine Rolle zu spielen. Transparenz scheint Berechnungszeit zu kosten, aber irgendwie nur dann, wenn die Auflösung klein ist. Fazit wäre dann: 

• WebP nutzen
• Transparenz eher vermeiden
• Auflösung besser groß als klein
• Kompressionsstärke bzw Dateigröße ist egal.

Kannst du das bestätigen?

[Gabe]

@Shevek 

Super du hast bei deinem Testen ein paar wichtige Benchmarks erkundigt!

Da hast du beispielweise festgestellt, dass Bilder mit Transparenz (pngs auch?) länger zum Laden benötigen, besonders bei kleineren Auflösungen. Dies könnte daran liegen, dass die Handhabung von Transparenz in WebP-Dateien zusätzliche Verarbeitungsschritte erfordert. Deine Beobachtung, dass kleinere Bilder manchmal länger zum Laden benötigen, ist komisch in der Tat, es kann aber sein, dass die Overheads durch Netzwerk- und Serveranfragen relativ zur Dateigröße stärker ins Gewicht fallen. Außerdem könnte die Art, wie WebP Transparenz handhabt, bei verschiedenen Bildgrößen unterschiedlich effizient sein. Die Dateigröße kann manchmal keine direkte Rolle in der Generierungszeit spielen, eher ist es die Serverkonfiguration und die Bildverarbeitungslogik und andere Faktoren wie Bildinhalt und Komplexität die stärker gewichten könnten.

Basierend auf deinen Beobachtungen und allgemeinen Best Practices im Webdesign kannst du folgende Strategien berücksichtigen:

• WebP nutzen: Dieses Format ist für seine effiziente Kompression bekannt und unterstützt Transparenz, was es zu einer guten Wahl für moderne Webanwendungen macht.
• Höhere Auflösungen bevorzugen: Größere Bilder scheinen effizienter verarbeitet zu werden, möglicherweise aufgrund einer effizienteren internen Handhabung von Transparenz und Kompression in größeren Dimensionen.
• Kompressionsstärke flexibel handhaben: Mit der Kompressionsstärke experimentieren, um eine Balance zwischen Qualität und Leistung zu finden.

Um ein transparentes Bild mit nur 300 ms Generierungszeit zu erstellen, sollte man die spezifischen Parameter für die Bildkompression und -speicherung optimieren. Typischerweise würde das Einschränken der Farbtiefe, das Minimieren von Metadaten und das Anwenden einer aggressiven Kompression helfen, die Dateigröße und damit auch die Verarbeitungszeit zu reduzieren. Ohne Details zu den exakten Parametern ist es jedoch schwierig, eine genaue Methode vorzuschlagen. Eine App die das kann ist die Pixc: Photo Resize App.

Apps wie Pixc oder ähnliche Apps können die Bildladenzeiten super optimieren und den Prozess der Bildkompression und -skalierung automatisieren. Sie sind speziell dafür ausgelegt, Bilder für den Online-Handel zu optimieren und können effizient große Mengen an Bildern verarbeiten, indem sie diese auf Web-freundliche Größen bringen und gleichzeitig eine für das Web geeignete Kompression anwenden, ohne dass manuelle Eingriffe nötig sind.

Sie bieten Funktionen wie:

• Automatische Reduzierung der Dateigröße: Reduziert die Dateigröße von Bildern, ohne sichtbare Qualitätseinbußen zu verursachen, was die Ladezeiten verbessert.
• Umformatierung in effiziente Formate: Konvertierung von Bildern in effizientere Formate wie WebP, die in modernen Webbrowsern eine schnelle Ladegeschwindigkeit bieten.
• Anpassung der Bildauflösung: Anpassen der Auflösungen basierend auf den Anforderungen der Website, was hilft, die Balance zwischen Qualität und Performance zu halten.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Shevek]

Erneut vielen Dank für die ausführliche Antwort, das ist wirklich toll. Magst du das Bild mit 300ms Generierungszeit, das du erstellt hast, einmal anhängen? Dann kann ich es mir zumindest einmal selbst anschauen. Wirklich jedes von mir erstellte Bild hat bisher nämlich >900ms gebraucht.

[Shevek]

Noch etwas: Laut den Shopify-Hilfeseiten ist PNG das beste Dateiformat: https://help.shopify.com/de/en/manual/products/product-media/product-media-types

Das verwirrt mich jetzt noch mehr. Was ist richtig?