Liquid, JavaScript, Themes
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.
Vielen Danke für euren Input
Viele Grüße
Felix
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:
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
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
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
URL-Filter laden immer die neueste Version eines Assets. Hier ein paar Beispiel der ganzen Mechanik:
image_url
Gibt die URL eines Bildes zurück. Du kannst image_url
für die folgenden Objekte verwenden:
Input:
{{ product | image_url: width: 100, height: 100 }}
{{ variant | image_url: width: 720, height: 720 }}
{{ line_item | image_url: width: 1024 }}
Output:
//cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=100&height=100&crop=center
//cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=720&height=720&crop=center
//cdn.shopify.com/s/files/1/1183/1048/products/boat-shoes.jpeg?v=1459175177&width=1024
Du kannst auch die image_url
auf den image
oder src
"attributes" eines Objekts:
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt.jpg?v=1398706734&width=300&height=300&crop=center
//cdn.shopify.com/s/files/1/0159/3350/products/red_shirt.jpg?v=1398706734&width=240
Gibt die URL einer Datei im Ordner "assets" eines Themas zurück.
Input:
Gibt die Asset-URL eines Bildes im Ordner "assets" eines Themes zurück. asset_img_url
akzeptiert dann ein image size parameter oder ein named size parameter.
Gibt die URL einer File im Files Bereich des Admins zurück.
Gibt die "asset" URL einer File im Files Bereich des Admins zurück.. file_img_url
akzeptiert ein image size parameter oder ein named size parameter.
Gibt die URL eines globalen Assets zurück. Globale Assets werden in einem Verzeichnis auf den Servern von Shopify gespeichert. Die Verwendung globaler Assets kann die Ladezeiten deiner Seiten verbessern.
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!
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
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.
Google Pagespeed Check und Empfehlung
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
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
Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024Was genau ist POD? Von T-Shirts bis hin zu Plakaten, Kaffeetassen, Wandmatten, alles was m...
By Kai Feb 29, 2024