mir ist heute aufgefallen, dass in unserem Shop in der Mobile Ansicht die Bilder als Thumbnail 1920x1920 ausgeliefert werden. In der Desktop Ansicht passen die Thumbnails für die Produkte und die Erlebniswelten (Thumbnails in 400 bzw. 800 wreden gezogen).
Nur im Mobile werden große Bilder ausgeliefert. Dann hab ich mal Pagespeed drüber laufen lassen und Google meldet im Desktop 95 und im Mobile unter 40.
Ich hab mir mal ein paar Shops ,die auf Shopware 6 sind, angeschaut und dort ist teilweise genau das gleiche Problem.
Selbst die Case Studies wie SIX und Folioverlag haben ein schlechtes Scoring und liefern diese überdimensionierten Bilder aus.
das ist ein schöner Service, allerdings hat das nichts mit seinem Pagescore/der Frage zu tun?
@rkoppik
Der Browser lädt für dein Endgerät das passende Bild, das im
tag definiert ist und nicht immer das größte.
Wie gesagt, bekommst du hier einen viel besseren Score mit dem webp Format, welches hoffentlich bald von Shopware implementiert wird, da jetzt auch Safari und somit alle größeren Browser (Chrome, Firefox, Edge, Safari, iOS Safari) dieses Format unterstützen:
@dweseom In den man das Plugin verwendet und keine Thumbnails mehr speichert oldschool und das Bild komprimieren und verkleinern einer vernünftigen Software machen lässt die extra dafür gebaut wurde. Dieser versteht auch ohne etwas im Quelltext zuändern ob es WebP ausliefert oder nicht. Und mittlerweile ist WebP schon veraltet, weil es schon avif gibt was besser kompremiert.
Es ist in PHP einfach nicht möglich kleine Thumbnails zu generieren und nicht jeder Anbieter hat PHP mit WebP Support. (z.B alle Anbieter die Plesk verwenden (würde ich eh vermeiden))
@Shyim ich muss mich bei dem sehr interessanten Thema auch mal einhaken: Die jetzige Situation ist ja, dass ich ein Bild in Photshop bearbeite und mir überlege in welcher Qulität / Größe ich es in meinen Shopware 5/6 Shop hochlade. Alternativ kann ich ich es auch in 100% Qualität hochladen und Shopware die Bildkomprimierung überlassen. Das Ergebnis der Komprimierung ist aber bei Shopware 5 und Shopware 6 MISERABEL. Das bedeutet, dass die Bilder im jpg Format elendigt groß ausgeliefert werden.
Wie läuft das jetzt bei dem Plugin in Verwendung eines CDNs? Ich habe das so verstanden, dass ich das Bild dann in 100% Qualität / größe zu Shopware hochlade und das Plugin dieses Bild dann direkt zum CDN transferiert. Das Bild wird also nicht mehr in Shopware gespeichert! Das CDN kümmert sich dann um die „perfekte“ Komprimierung und liefert dem Browser ein WebP / aviv bzw. jpeg aus, sofern die modernen Formate nicht unterstützt werden. Ist das korrekt so?
Und auf Backendseite werden mir alle Bilder im Mediamanager auch korrekt angezeigt? … ich merke also gar nicht, dass die Bilder nicht auf meinem Server sondern bei einem CDN gespeichert werden? Und wenn ein Bild im Backend geläscht wird, wird es auch automatisch beim CDN gelöscht?
Als Plugin-Ersteller klinke ich mich mal ein. Das Plugin, was @Shyim verlinkt hat, sorgt NUR dafür, dass Shopware eben keine Thumbnails generiert, sondern der Aufruf durch einen Service stattfibdet, der sich dann um die Thumbnails und Optimierung kümmert. Nur das Originalbild wird in Shopware hochgeladen und abgelegt. Natürlich wäre auch ein CDN für die Ablage des Otiginalbildes kompatibel.
avif wäre natürlich noch besser, allerdings sieht da die Browserunterstützung wirklich noch nicht gut aus.
Im Idealfall hat man natürlich die kompletten Bilder in einem CDN ausgelagert, welches dann die webp Versionen ausliefert.
Da sich aber schon jetzt bis zu 1/4 der Dateigröße von jpg/png durch webp sparen lässt, wäre das wirklich schon ein großer Sprung, wenn Shopware (wie auch z.B. Shopify) den Support von webp Bildern mit Fallback auf jpg/png einbaut.
Ich sehe sehr als unnötig an, wenn die Dateien in mehreren Formaten auf der Platte liegen. Ich sehe es aich garnicht als Notwendigkeit von Shopware an. Es gibt so viele Anbieter, die das kostenlos oder günstig automatisch auslieferb. Nach kurzer Zeit würde der Support platzen, weil etliche Betreiber Mails ihrer Hoster bekommen, weil der media und thumbnails-Ordner absurd viele Dateien enthält.
Ein CDN macht vielleicht Sinn für größere Shops, aber die Mehrzahl an genutzten Shopware-Shops hat vielleicht maximal 1000 Produkte und da bei diesen Shops auch das Budget eine Rolle spielt, wäre es absolut sinnvoll, wenn Shopware 6 das von Haus aus kann…
Zumal man auch mit Shopsystemen wie Shopfiy mithalten können sollte, wenn man schon eine neue Software entwickelt.
Da ich mir den Code bezüglich webp auch bereits angeschaut habe und vielleicht 8 bis maximal 16 Entwicklungsstunden nötig wären, um webp zu ergänzen, würde ich dieses Feature nicht einfach aussen vor lassen.
@tinect vielen Dank für Deine Erklärung! So langsam werde ich schlauer in Sachen CDN. Das Plugin arbeitet also nach dem Pull-Art Prinzip. Wenn ich es richtig verstanden habe, wird dadurch der erste Aufruf einer Bilddatei langsamer, da sich das CDN erstmal das Bild grabben muss um dieses dann optimiert ausliefern zu können.
Auf einen Nachteil bei Verwendung eines CDNs möchte ich noch hinweisen: Da die bei Google indizierten Vorschaubilder nicht mehr auf dem eigenen Server bzw. Domain liegen, hat das negative Auswirkungen bei der Google Bildersuche.
Performance bei CDNs ist so ein Thema - wenn man nicht nur nach Europa verkauft, machen CDNs definitiv Sinn - ansonsten merkt man bei einem gut eingerichteten Server mit ggf. notwendigen Load Balancern eher wenig bis keinen Unterschied. Bei uns kam es zu dem auch schon des Öfteren vor, dass das Bootstrap CDN überlastet war bzw. nicht erreichbar war und somit die gesamte Seite funktionsunfähig ist - kommt zwar wirklich seeehr selten vor, aber mit CDN ist man eben von zwei separeten “Servern” abhängig.
Außerdem wollte ich hier noch erwähnen, dass man eventuell auch die Nutzung eines CDNs in die Datenschutzrichtlinien mit aufnehmen muss!?
