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!!
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
Hi Phil,
ich habe folgende Thumbnails für die Artikelbilder:
140x140
200x200
400x400
800x800
Muss ich andere bestimmte Auflösungen einstellen?
Danke und VG
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.
Hi @NextMike , das habe ich getan und die Fehlermeldung ist weg. Danke. Leider hatte es keinen Einfluss auf den Pagespeed Wert 
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
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.
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;
}```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.
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?
sieht richtig aus. Am besten testen. Bei den Icons font-display:block;
Hat nichts verändert. Google sagt: font-display:swap um die Fehlermeldung zu beseitigen, siehe hier:
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.
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.
Dann sehen wir uns hier beim nächsten Update.