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

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

von: Tanmar Webentwicklung bisher keine Bewertungen Quelloffen
Aktuelle Version:

Version:

Um den Merkzettel zu nutzen, musst Du die dafür notwendigen Cookies akzeptieren. Cookies akzeptieren
Nutzbar in:
Nicht verfügbar
Diese App kann nicht in einem Shopware Cloud Shop verwendet werden.
Cloud
Self-hosted
Shopware 6 Status
Diese App ist bisher nicht für Shopware 6 geplant
Support
Dieser Hersteller reagiert sehr schnell auf Supportanfragen
Details
  • Tanma94594822120
  • Tanmar Webentwicklung
  • 1.0.1
  • 14.04.2021
  • de_DE en_GB
  • 5.3.0 – 5.3.7
    5.4.0 – 5.4.6
    5.5.0 – 5.5.10
    5.6.0 – 5.6.9
    5.7.0
Google Pagespeed Insights gibt seit einiger Zeit bei Shopware Shops, die auf dem Responsive... mehr

Produktinformationen

Highlights

  • Verbesserte CLS Wertung in Google Pagespeed Insights

Features

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

Beschreibung

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.

Bewertungen lesen, schreiben und diskutieren... mehr

Kundenbewertungen

Installationsanleitung

Nach der Installation legen Sie in den Plugin Einstellungen die Maße für Ihr Logo fest.


Sie ermitteln diese Maße beispielweise, indem Sie die Entwicklertools Ihres Browsers (Strg-Umschalt-I) aktivieren und die Darstellung auf die Größe eines gängigen Smartphones verkleinern (Strg-Umschalt-M). Jetzt klicken Sie mit der rechten Maustaste auf das Logo und wählen Sie im aufklappenden Kontextmenü den Punkt "Untersuchen".  Der Browser umrahmt jetzt das Logo und zeigt ihnen die Größe an, in der es ausgegeben wird.


Nachdem Sie das für alle gewünschten Subshops gemacht und die Einstellung "Aktiv" für den Subshop gewählt haben, aktivieren Sie das Plugin und bestätigen Sie den Dialog zum Leeren des Caches.

Änderungen

Version 1.0.1

  • Anpassungen hinsichtlich Plugin Guidelines

Version 1.0.0

Erstveröffentlichung Shopware Community Store

Bundles (1)

Für die gewählte Variante sind keine Bundles verfügbar. Für Bundle-Angebote wähle bitte eine andere Variante aus.
Google Pagespeed optimieren 2 Erweiterungen
PageSpeed Preload Optimierung: Wichtige Anforderungen vorab laden
CLS Vermeidung durch Breite und Höhe für das Logo
31,50 €  * 35,00 €  *
Bundle anzeigen
Beim Speichern der Bundle-Konfiguration ist ein Fehler aufgetreten.
CLS Vermeidung durch Breite und Höhe für das Logo
1x CLS Vermeidung durch Breite und Höhe für das Logo
Tanmar Webentwicklung   10,00 €  *

Infos zum Hersteller

Tanmar Webentwicklung Tanmar Webentwicklung Shopware Business Partner Shopware Business Partner 22 Erweiterungen 5 Ø-Bewertung
Aktuelle Version:

Version:

Um den Merkzettel zu nutzen, musst Du die dafür notwendigen Cookies akzeptieren. Cookies akzeptieren

Zuletzt angesehen