FROM CACHE - de_header

Shopify Blog / Seiten - Contentbilder ohne width / height ?

Fry
Forscher
74 2 38

Moin zusammen,

 

ich schaue mir gerade unseren Shop in Hinblick auf Google Core Web Vitals an und musste feststellen, dass alle Bilder im Bereich Blog und Seiten nicht automatisch die HTML Dimensions width und height mitgeschickt bekommen. Das ist meiner Meinung schlecht wenn es zu CLS "Cumulative Layout Shift" kommt.

 

  1. Liegt das an meinem Theme oder kommt Shopify ohne diesen Web Standard?
  2. Gibt es eine Möglichkeit, diesen Fehler automatisch zu heben oder muss ich nun jeden Blog-Beitrag manuell anpassen, wenn ich es gerne gefixt haben möchte? 😃
  3. Gibt es die Möglichkeit bei der Auswahl der Bildgröße eigene zu definieren? Also keine Quadrate sondern vielleicht auch ein Rechteck oder andere Maße?

Vielen Danke für euren Input

Viele Grüße

Felix

5 ANTWORTEN 5

Gabe
Shopify Staff
16357 2587 3853

Hi Felix! @Fry 

 

Wenn man die Shopify Bilder alle im "Daten" Bereich speichert bekommen sie eine CDN URL. Diese URL beinhaltet weitere Infos zum Schluss der URL wie z. B. die Bilder Dimensionen und die Version falls das Bild jemals aktualisiert wird. Siehe ein Beispiel hier:

 

  • src="//cdn.shopify.com/s/files/1/0251/7476/9720/files/.png?v=1580676830&width=2000" 

Die Shopify Bilder werden auch minifiziert wie man hier lesen kann. Siehe auch unsere Performance best practices for Shopify themes

 

Das ist also in der Tat etwas, dass ein Experten verlangen wird und einen kann ich empfehlen - taskhusky.com. Da es mehr das Frontend betrifft wird das auch Theme Code-spezifisch sein. Siehe mehr Ressourcen dazu hier:

Mit diesen Ressourcen kann man das CLS durch Änderungen am Theme Code verbessern. 

 

Bei weiteren Fragen bitte einen Experten konsultieren und/oder deine Frage in unserem EN Design Forum posten hier.

 

VG,

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Fry
Forscher
74 2 38

Hi Gabe,

 

danke für deine Antwort. Wenn ich im Blog ein Bild einfüge erhalte ich diesen Code

 

<img src="https://cdn.shopify.com/s/files/1/0509/4205/0499/files/Bildername.png?v=1647860198" alt="Ein Bildtext">

 

Wünschenswert wäre für Google und mich 😉 die richtigen Dimension auch im Code also so, damit es nicht zu CLS kommt, denn ohne diese Werte wird das Bild erst angezeigt wenn es vollständig geladen wurde:

 

<img src="https://cdn.shopify.com/s/files/1/0509/4205/0499/files/Bildername.png?v=1647860198" alt="Ein Bildtext" width="600" height="300">

 

Aktuell muss ich nun für alle Bilder es händisch im Code angeben - Wenn es nicht von Shopify als Standard bereitgestellt wird, wo kann man sich das wünschen? Hat jemand vielleicht noch einen anderen Workaround, bevor ich nun 500 Seiten bearbeite 🙂

 

Außerdem wäre der Tag der loading="lazy" auch als Standard ziemlich cool. Damit wird das Bild vom Browser erst geladen wird, wenn das Bild wirklich dargestellt werden kann. 

 

Viele grüße und vielen Dank

Felix

 

 

Gabe
Shopify Staff
16357 2587 3853

Hey Felix! @Fry 

 

Das kann ich voll verstehen dass das hilfreich wenn du das nicht einzeln im Code angeben müsstest. Also lass uns die ganze "Mechanik" der CDN Bilder URLs etwas näher anschauen.

 

Nach einer Aktualisiereung der Bilder werden also die Diomainsionen bei nicht angezeigt ist das richtig? Bleibt die CDN URL beim alten sowie die Version bei v=1647860198 oder ist das ganze deine Vermutung? Hast du eine App die die Bilder SEO optimiert oder komprimiert?

 

Und hast du vielleicht einen Screenshot und oder eine Beschreibung der genauen Schritte die du ausgeführt hast? Bei weiteren Fragen bzgl. dem folgenden Sachverhalt raten wir einen Experten zu konsultieren

 

Die CDN URL wird Bilder zugewiesen die im Backend hochgeladen werden, nicht im Frontend. Bilder die im Frontend/Theme-editor hochgeladen werden bekommen die Bezeichnung <a href="/products/basic-t-shirt" class="full-unstyled-link">

 

Wenn sich die URL überhaupt nicht geändert hat, wird die Datei ein Jahr lang in den CDNs zwischengespeichert. Allerdings ist das keine exakte Science. Wenn die Datei zum Beispiel nur von einem Nutzer in Europa abgerufen wurde, ist das keine Garantie dafür, dass ein Nutzer in Asien denselben Cache verwendet.

 

Das ist normalerweise kein Problem, auch wenn du den Dateinamen nicht änderst, denn sobald du das Bild im Adminbereich neu hochlädst, ändert sich der v= URL-Parameter automatisch, wodurch es zu einem ganz neuen Cache-Element im CDN wird.

 

Das Problem, auf das deine Metriken wahrscheinlich stoßen, ist, dass es gleichbedeutend ist mit dem manuellen Kopieren und Einfügen einer Bild-URL (Rückruf einer bestehenden URL) außerhalb des Themes, wobei immer auf die "alte" Datei zugegriffen wird, die ein Jahr lang zwischengespeichert sein könnte.

 

In deinem Fall wird also bei jedem Rückruf einer bestehenden URL eine zwischengespeicherte Version abgerufen, aber um die neueste Version zu sehen, musst du eine URL mit einem aktualisierten v= Parameter aufrufen.

 

Wahrscheinlich wird dies in den Metrik-Tools nicht berücksichtigt und deshalb siehst du das veraltete Bild im Cache, aber deine Kunden sehen das nicht.

 

Es ist nicht ungewöhnlich, dass sich die URL, von der aus die Assets bereitgestellt werden, ändert oder ändern kann. Aus diesem Grund empfehlen wir, Asset-Filter für Liquid zu verwenden. 

 

URL-Filter geben Links zu Assets im Content Delivery Network (CDN) von Shopify aus. Sie werden auch verwendet, um Links für die Filterung von Sammlungen und Blogs zu erstellen.

 

In vielen URL-Filterausgaben siehst du ein Fragezeichen (?) mit einer Zahl, die an den Dateipfad des Assets angehängt ist. Dies ist die Versionsnummer der Datei. Die Versionsnummer in dieser URL ist zum Beispiel 28253:

  • //cdn.shopify.com/s/files/1/0087/0462/t/394/assets/shop.css?28253

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Fry
Forscher
74 2 38

Moin Gabe,

 

es geht mir um Bilder im Blog und im Content. Diese füge ich normal über das Backend ein.

Ich nehme diese Seite mal als Beispiel.

 

Wenn ich hier die Bildgröße auswähle, wird das Bild je nach ausgewählter Größe angepasst und eingefügt. Jedoch und darum geht es mir werden die Dimension nicht ins HTML geschrieben, was für den Google CLS Wert gewünscht ist. Durch das fehlen der Dimensions (width und height) weiß der Browser beim Rendern der Seite nicht wie groß das Bild am Ende sein wird und es kommt zu den Content Shifts im Aufbau.

Bildschirmfoto 2022-03-31 um 07.12.33.png

 

Google Pagespeed Check und Empfehlung

Bildschirmfoto 2022-03-31 um 07.10.28.png

 

Wenn wir uns nun das HTML anschauen, sehen wir das Shopify anscheinend keine HTML Code Dimension (width und height) angibt, es sieht so aus: 

<img src="https://cdn.shopify.com/s/files/1/0509/4205/0499/files/Bienenwohl_Saatbomben.png?v=1647860198" alt="Bienenwohl Samenbomben">

 

Da der komplette Inhalt des Blogbeitrags in 

article.content 

gespeichert ist. Wäre nun meine Idee es durch eine If-Abfrage anzupassen, aber wirklich gut für die Performance kann das auch nicht sein. 

 

{% if article.content contains "<img" %}

Hat das schon jemand gemacht?

 

Ich nutze keine Plugins, die die Bilder manipulieren.

 

lg Felix

 

Gabe
Shopify Staff
16357 2587 3853

Ok ich sehe du hast deine Frage im EN Design Forum gepostet. Da gibt es ein paar Coding Experten die vielleicht den einen oder anderen Tipp haben. Wenn du deine Frage do postest dann brauchen die Programmierer einige Angaben ansonsten wird es länger dauern bis du eine Antwort bekommst.

 

Angaben die die brauchen sind z. B. Links zu einer Beispiel Seite, genaue Angaben was du erreichen möchtest und warum, und wenn möglich Screenshots. 

 

In unserer privaten FB Gruppe gibt es auch ein paar Experten die dir helfen können.

 

Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
 
2022 wird dein Jahr! Haltet Abstand und bleibt Gesund.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog