Auflösung der Bilder in Einkaufswelten (Responsive Ansichten) zu groß

Shopware 5 Allgemein
21

Auch ich habe das Update grade gemacht. Lief super durch.

Im Pagespeed waren es vorher Mobil: 63 und Desktop: 80

Nach dem Update waren es Mobil: 63 und Desktop: 80

Wie aber Patrick bereits sagte ist das so:

Google war der Meinung dass ein Bild mit den Abmessungen 1000x1000px von der Datenmenge her ein paar KBs weniger haben könnte.

Nun ist Google eben der Meinung dass ein Bild mit 400x400px von der Datenmenge her ein paar KBs weniger haben könnte.

Insgesamt ist die zu übertragende Datenmenge der Thumbs aber schon weniger als vorher.

Da ich meine Bilder hier aber schon eh so stark komprimiert habe, dass diese gar nicht mehr scharf sind, macht es doch keinen Sinn, hier noch mehr KB einzusparen.

Warscheinlich bemängelt Google auch ein Weisses Blatt, dass da noch was eingespart werden könnte  Grin

Siehe meinen getesteten Pfad:

Ich habe meine Thumbs im Mediamanager damals kleiner gemacht, aber nicht im Theme, was ich damals noch nicht wusste, dass man das dann auch machen muss.(wäre ja eine riesen Arbeit das zu tun)

Was aber ein grosses Problem ist, sind diese Cache URLS, da diese so wahnsinnig viel Datenmenge produzieren, dass hier teilweise 500 KB oder sogar bis zu 1 MB erzeugt wird, was ich z.B. am Handy erstmal runterladen muss, wenn ich die Seite aufrufe.

Die URLS sieht man im Page Speed unter “Behebung erforderlich”:

https://www.teich-filter.eu/web/cache/1493105105_9fae7580fc206adaac82c45709b86a1e.js

und

https://www.teich-filter.eu/web/cache/1493105105_9fae7580fc206adaac82c45709b86a1e.css

Wenn man die URL im seorch.de prüft, erhält man die Datenmenge angezeigt, die diese Cache URLs erzeugen.

Das ist dann für das Page Speed Tool absolut schlecht. Aber auch für die Datenflats der Besucher, wenn die über das Smartphone kommen.

 

Wenn man wüsste wie man das mit den css und js cache Urls beheben könnte, wären die Bilder im Page Speed Tool wohl Nebensache.

 

Abgesehen davon kenne ich mittlerweile ein paar Shopware Shops, die im Page Speed Tool Werte von Mobil: 32 und Desktop: 38 haben, aber in Google fast ausschliesslich die Position 1 im Suchergebnis (sogar bei hart umkämpften Moneykeywords) beziehen. Daher kann ich mir nicht vorstellen, dass das Page Speed Tool so wichtig ist.

 

Viele Grüße

Matthias

 

22

@Moritz
@Patrick

Es kann durchaus sein, dass aufgrund der Artikelboxgröße 200 zu klein ist und deshalb 600 herangezogen wird. (Ich weiß nicht, was da richtig ist, daher Angaben weiter unten)

Mir war nur nicht klar, warum vor dem Update 1280 und jetzt 600, wenn nur für die Slider Änderungen vorgenommen wurden.

Das erklärt aber der Post von Patrick oben, da es wohl doch weitere Änderungen gab.

600 ist auf jeden Fall schon mal besser als 1280.

 

Welche TN-Größen sollten denn in diesem Fall genommen werden:
Ich habe die Artikelboxgrößen 1 Feld breit, 2 Felder hoch. Bei Desktop EKW 4-spaltig, bei Mobil 3-spaltig.

Höhe müsste dann wohl 380 Pixel sein.

Für Desktop werden die 200er herangezogen und für Mobil die 600er. Das klingt für mich jetzt wieder nicht logisch oder?

23

Für mobile sind die 200er zu klein denke ich, da diese ja den ganzen Smartphone Bildschirm füllen. Dieser hochauflösende Smartphone Bildschirm (z.B. Galaxy S6 Edge) ist aber breiter als 200 px. Am normalen Monitor ist das dann mit den 200er normal korrekt, wenn diese dann nebeneinander stehen.

Viele Grüße

Matthias

 

24

@malzfons schrieb:

…

Was aber ein grosses Problem ist, sind diese Cache URLS, da diese so wahnsinnig viel Datenmenge produzieren, dass hier teilweise 500 KB oder sogar bis zu 1 MB erzeugt wird, was ich z.B. am Handy erstmal runterladen muss, wenn ich die Seite aufrufe.

Die URLS sieht man im Page Speed unter „Behebung erforderlich“:

https://www.teich-filter.eu/web/cache/1493105105_9fae7580fc206adaac82c45709b86a1e.js

und

https://www.teich-filter.eu/web/cache/1493105105_9fae7580fc206adaac82c45709b86a1e.css

Wenn man die URL im seorch.de prüft, erhält man die Datenmenge angezeigt, die diese Cache URLs erzeugen.

Das ist dann für das Page Speed Tool absolut schlecht. Aber auch für die Datenflats der Besucher, wenn die über das Smartphone kommen.

 

Wenn man wüsste wie man das mit den css und js cache Urls beheben könnte, wären die Bilder im Page Speed Tool wohl Nebensache.

…

Viele Grüße

Matthias

 

 

Das halt ich auch für ein dringenderes Problem als die Bilder. Bei den Bilder wird Google immer meckern…

25

Das denke ich auch. Man muss sich einfach mal Seiten wie Zalando usw. anschuen (Mobile 44 Desktop 40), mehr brauch ich glaube ich nicht sagen. Das von malzfons angesprochene Problem sehe ich da auch kritischer.

26

Habe nun in eine Einkaufswelt einen Slider hinzugefügt. Eine Zeilenhöhe Slider, der Rest ist ein großes Textfeld.

Mobil werden die 600er angezeigt, Desktop die 200er.

Ist das auch damit zu erklären?

"Für mobile sind die 200er zu klein denke ich, da diese ja den ganzen Smartphone Bildschirm füllen. Dieser hochauflösende Smartphone Bildschirm (z.B. Galaxy S6 Edge) ist aber breiter als 200 px. Am normalen Monitor ist das dann mit den 200er normal korrekt, wenn diese dann nebeneinander stehen. "

27

Vermutlich schon, da die Auflösung am Monitor geringer ist. Wenn der 1 Zeilenhöhen Slider über die ganze Shopbreite geht, wird vermutlich das Thumb genommen, das in px der Shopbreite mindestens entspricht. Vermute ich mal.

 

Gruss

Matthias

 

28

Wenn der Slider nur 1 Feld breit ist, werden auch die 600er genommen.

 

@coarsy‍

Welche Thumbnails werden bei Dir herangezogen bei Artikelbox und Slider jeweils Mobil und Desktop?

29

Aus meinem Testshop:

Vor dem Update von 5.2.21 auf 5.2.22:

Durch die Komprimierung und Größenanpassung von https://www.meiner-x.de/…_02-804_FX-One_Cocolina_1280x1280@2x.jpg könnten 11,6 KB (94 %) eingespart werden.

Nach dem Update auf 5.2.22:

Durch die Komprimierung und Größenanpassung von https://www.meiner-x.de/…ro_02-804_FX-One_Cocolina_200x200@2x.jpg könnten 9,9 KB (91 %) eingespart werden.

Die Bewertung ist um 3 Punkte gestiegen (Mobil wie Dekstop), da weniger Daten übertragen werden. Was auch so gut ist. Aber Google meckert immer noch…

30

also über die Prozentzahl der Einsprung rege ich mich erst mal nicht auf.

Ich schaue da vorrangig, welche TN für Mobil und Desk herangezogen werden. Deshalb meine Frage oben an @coarsy‍ oder wer auch sonst nach dem Update darauf antworten kann. Wüsste gerne ob es in anderen Shops anders ausschaut als bei mir .

31

Also anscheinend hat es etwas gebracht. Bei mir sind in der Mobile-Ansicht alle 1280er Thumbnails rausgefallen und es werden korrekterweise die 200er verwendet (einmal das 600er, aber das kann korrekt sein, da minimal größer). 
Vom Pagespeed her hat es bei mir allerdings leider nichts gebracht.

32

Ich habe in zwei Shops unterschiedliche Ergebnisse. Sehr sonderbar. In beiden Shops je eine EKW mit großem Textfeld, also als Infoseite genutzt.

Shop 1 hatte bereits über dem Textfeld einen Artikelslider.

Shop 2 hat den Slider erst nach dem Update erhalten.

In Shop 2 werden die 600er ausgegeben (Googlewert wird schlechter), bei Shop 1 die 200er (google bewertet besser).

Slidergröße ist bei beiden gleich. Allerdings sind die Originalartikelbilder unterschiedlich groß.

Shop 1 1280x1280 Pixel

Shop 2 längste Seite 700 Pixel

Ob das eine Rolle spielt, weiß ich nicht. Werde in en paar Tagen nochmal testen.

33

Ich konnte jetzt auch updaten und testen - bei mir werden im Mobile jetzt die 200er geladen, und der Pagespeed ist immerhin von 42 auf 64 gestiegen. Wo vorher 100KByte gespart werden konnte sind es jetzt meist nur wenige KByte.

34

Jetzt habe ich auch mal ein wenig eine Seite angeguckt.
Auffällig

  1. Für Mobile wird ein Slider-Bild angemeckert, dass es eigentlich im kleinsten Viewport gar nicht gibt.
    Frage: Welchen Viewport wertet Speedpage für Mobile denn nun aus? Mobile-Landscape?

  2. Wenn es vermutlich der Mobile-Landscape ist, wunder ich mich, warum Google in einem Slider 200x200-Bilder zieht, im anderen dann aber 600x600?
    Kann es an Sonderzeichen wie liegen? (Ich bin für die BIldnamen nicht verantwortlich *g*)

Hier müsste jedenfalls unbedingt noch ein Url-Encode in die SrcSet eingebaut werden!

35

Also meine Bildernamen enthalten kleinbuchstaben, zahlen und Bindestrich, auch hier werden manchmal 600er ausgewertet und mal 200er.

Bei den 600er TN hat das Originalbild 700 oder 900 pixel an der langen Seite. Bei dem Shop, bei dem die 200er herangezogen werden, haben die Bilder 1280x1280 Pixel. Ob das Originalbild hier eine Rolle spielt, weiß ich nicht. Sollte wohl nicht - außer bei der Angabe der möglichen Ersparnis in KB natürlich.