CLS Vermeidung durch Breite und Höhe für das Logo

von Tanmar Webentwicklung

Bewertung: keine Bewertung ( Bewertung schreiben )

Downloads: <50

Mit diesem Plugin definieren Sie eine feste Größe für das Logo. So können Sie Layoutverschiebungen vermeiden und die von Google gemessene CLS Wertung in Pagespeed Insights verbessern

Jährlich 2,00 €* /Monat 24,00 €* /Jahr

Monatlich 2,00 €* /Monat Monatlich kündbar

Kompatibel mit:

5.3.0 - 5.7.19

Inklusive:

Kostenloser Probemonat

Das Abonnement beginnt mit einem kostenlosen Probemonat, in dem das Abonnement jederzeit gekündigt werden kann.

Alle Updates

Während des Abonnements sind alle veröffentlichten Updates kostenlos enthalten.

Unterstützung durch den Extension Partner

Falls du Fragen oder Probleme mit der Erweiterung hast, kannst du während des Abonnements jederzeit den Extension Partner um Hilfe bitten.

Shopware 6 Status:

Für diese Erweiterung wird es keinen Nachfolger geben

Beschreibung

Highlights

Verbesserte CLS Wertung in Google Pagespeed Insights

Features

Pro Subshop aktivierbar
Separate Maße pro Subshop
Einfach zu konfigurieren

Ü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.