CLS Vermeidung durch Breite und Höhe für das Logo
Beschreibung
Highlights
Features
Über die Erweiterung
Google Pagespeed Insights gibt seit einiger Zeit bei Shopware Shops, die auf dem Responsive Theme basieren, die Meldung "Bildelemente haben keine explizite width und height" aus.
Die Ursache ist, dass das Logo ohne die HTML Attribute width und heigt ausgegeben wird. Mit Hilfe von CSS wird es per max-width und max-height so skaliert, dass es sich der Bildschirmgröße anpasst.
Um zu entscheiden, wie groß das Logo tatsächlich dargestellt werden soll, muss der Browser zunächst die Datei herunterladen und sie dann in Abhängigkeit von der Höhe des Headers skalieren.
Während dieses Vorganges kann es zu einem sogenannten Layout Shift kommen, indem das Logo zunächst größer dargestellt und dann nachträglich verkleinert wird. Das Ergebnis ist eine schlechtere Bewertung auf dem Kennwert Cumulative Layout Shift.
Mit unserem Plugin können Sie diese HTML Attribute nachrüsten. Geben Sie einfach in den Plugin Einstellungen die Breite und Höhe an, mit denen Ihr Logo auf gängigen Mobilgeräten ausgegeben wird. So kann der Browser Platz für das Logo reservieren, bevor die Datei selbst geladen und das CSS geparst wurde.
Details
- Verfügbar in: Englisch, Deutsch
- Zuletzt aktualisiert: 14. April 2021
- Veröffentlicht: 14. April 2021
- Version: 1.0.1
- Kategorie: Header & Footer
Ressourcen
Bewertungen (0)
Über den Extension Partner
Tanmar Webentwicklung
Partner Status
-
Shopware
Bronze Partner -
Shopware
Extension Partner
Details
- Ø-Bewertung: 5
- Partner seit: 2014
- Erweiterungen: 30
Support
- Land: Germany
- Spricht: Deutsch, Englisch
- Reaktionszeit: Sehr schnell