Frosh Webp Unterstützung - Bilder richtig dimensionieren

Shopware 5
, , ,
1

Hallo Leute,

Ich verwende das Friends of Shopware Frosh „Webp Unterstützung“ Plugin. Bei Google Pagespeed Insights wird mir angezeigt, dass die .webp images nicht richtig dimensioniert werden und dadurch über 1s eingespart werden könnte. (siehe Anhang)

Für die mobile Ansicht werden anscheinend 800x800 verwendet? Klar, dass er meckert.

Was muss ich bei den Einstellungen vornehmen?
vielleicht: @shyim wie kann man das anpassen?

Vielen Dank im Voraus!!

Screenshot 2021-07-06 at 19.38.23
Screenshot 2021-07-06 at 19.38.23869×542 56.5 KB

2

Hi Antonio,

dann erzeuge doch einfach weitere Thumbnails mit geringerer Auflösung bzw passe die Standardgröße(n) an - denke das Plugin hat damit erstmal nichts zu schaffen, das stellst du im Media Manager ein:
https://docs.shopware.com/de/shopware-5-de/inhalte-und-medien/medien
https://developers.shopware.com/designers-guide/responsive-images/

LG Phil

3

Hi Phil,

ich habe folgende Thumbnails für die Artikelbilder:

140x140
200x200
400x400
800x800

Muss ich andere bestimmte Auflösungen einstellen?

Danke und VG

4

Das hat nichts mit WebP zu tun, sondern mit den Thumbnails. Man sollte die Thumbnails so einstellen, dass sie mehr oder weniger optimal für die Verwendung (Stelle und Viewport) dimensioniert sind.

5

Hi @NextMike , das habe ich getan und die Fehlermeldung ist weg. Danke. Leider hatte es keinen Einfluss auf den Pagespeed Wert :frowning:

Ich habe desweiteren noch folgende Fehlermeldung:
" Darauf achten, dass der Text während der Webfont-Ladevorgänge sichtbar bleibt"

In welcher LESS/CSS Datei müssten hier die @font-face Einstellungen vorgenommen werden?

Danke

6

Da gibt es keine Vorgabe. Du leitest das Theme ab. Die all.less ist der Einstiegspunkt für deine Anpassungen / Überschreibungen. Du kannst alles in die all.less schreiben, dich nach der Struktur der „Responsive“ richten oder deine eigene Struktur erstellen.

7

Ich verwende ein Template von einer Shopware Agentur, welches aufgebaut ist auf der Responsive.

Ich bin langsam echt am verzweifeln. Könntest du mir eine kurze Anleitung schreiben wie und wo ich das mit @font-face einfügen kann?

Es geht in erster Linie um den Befehl: font-display: swap

DANKE

Das ist Google’s Beispiel:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}```
8

Du müsstest dich hier einarbeiten: Shopware 5 - Tutorials & FAQs - Änderungen am Template vornehmen

Und entsprechend deine Situation dabei berücksichtigen. Das zu beschreiben wäre ein ganzes Buch.

9

Ok, danke. Ich habe folgendes gemacht:

in die all.less in meinem theme habe ich folgendes eingefügt:


@font-face {
  font-family: 'tcinn-outline';
  font-style: normal;
  font-weight: inherit;
  src: local('tcinn outline'), local('tcinn-outline'), url(https://www.MEINEURL.de/engine/Shopware/Plugins/Community/Frontend/TcinnCleanTheme/Themes/Frontend/CleanTheme/frontend/_public/src/fonts/tcinn-outline.ttf?f2qhvh) format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  font-style: bold;
  font-weight: inherit;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://www.MEINEURL.de/themes/Frontend/Responsive/frontend/_public/vendors/fonts/open-sans-fontface/Bold/OpenSans-Bold.woff2?201901180958) format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'shopware';
  font-style: normal;
  font-weight: inherit;
  src: local('shopware'), local('shopware'), url(https://www.MEINEURL.de/themes/Frontend/Responsive/frontend/_public/src/fonts/shopware.woff?201901180958) format('woff');
  font-display: swap;
}

@NextMike wäre das richtig?

10

sieht richtig aus. Am besten testen. Bei den Icons font-display:block;

11

Hat nichts verändert. Google sagt: font-display:swap um die Fehlermeldung zu beseitigen, siehe hier:

12

Für Icons block. Du musst aber schon die Fonts die geladen werden erwischen und überschreiben. Guck mal was aktuell geladen wird und überschreibe genau das.

13

Hat geklappt! Danke für die Hilfe!!!

Für alle die es irgendwann auch suchen: Ich habe es direkt in den Responsive-LESS Dateien geändert, anstatt im eigenen Theme. Aber für viele vielleicht keine Option wegen Überschreibung durch Updates.

14

Dann sehen wir uns hier beim nächsten Update.