First Contentful Paint gibt an, wann der erste Text oder das erste Bild gezeichnet wird.
Speed Index
Der Geschwindigkeitsindex gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden.
Largest Contentful Paint
Largest Contentful Paint gibt an, wie lange das Zeichnen des längsten Texts oder des größten Bilds dauert.
Time to Interactive
Die Zeit bis Interaktivität entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist.
Total Blocking Time
Summe aller Zeiträume (in Millisekunden) zwischen FCP und Zeit bis Interaktivität, wenn die Aufgabendauer 50 ms überschreitet.
Cumulative Layout Shift
Empfehlungen
Bilder in modernen Formaten bereitstellen
Hinweis:
Hier sind vor allem Produktbilder relevant. Weder Shopware noch ThemeWare® haben einen Einfluss auf Bildformate für individuell hochgeladene Bilder. Optimiere deine Bilder bevor du sie in die Medien-Verwaltung lädst.
Tipp: Eine "Lazy Loading"-Erweiterung aus dem Shopware Store kann ebenfalls helfen.
Bilder richtig dimensionieren
Hinweis:
Dieser Punkt ist leider nicht einfach lösbar, da sich viele Bilder in der Storefront fluide sind und sich der verfügbaren Elemente-Breite anpassen.
Tipp: Eine "Lazy Loading"-Erweiterung aus dem Shopware Store kann ebenfalls helfen.
Erstreaktionszeit des Servers verringern
Hinweis:
Dieser Punkt ist stark mit der Server-Performance verknüpft.
Reduzieren Sie nicht verwendetes JavaScript
Hinweis:
Shopware generiert eine JS-Datei mit dem gesamten JS-Code der Storefront (Shopware, Theme sowie aller Apps bzw. Plugins).
ThemeWare® wurde von Grund auf so entwickelt, dass nur der nötigste Code kompiliert wird.
Reduzieren Sie nicht verwendete CSS
Hinweis:
Shopware generiert eine CSS-Datei mit dem gesamten CSS-Code der Storefront (Shopware, Theme sowie aller Apps bzw. Plugins).
ThemeWare® wurde von Grund auf so entwickelt, dass nur der nötigste Code kompiliert wird. Zudem kannst du im Tab "Weiteres" optionalen CSS-Code deaktivieren.
Ressourcen beseitigen, die das Rendering blockieren
Hinweis:
Shopware generiert eine JS- und eine CSS-Datei mit dem gesamten JS- bzw. CSS-Code der Storefront (Shopware, Theme sowie aller Erweiterungen).
ThemeWare® wurde von Grund auf so entwickelt, dass nur der nötigste Code kompiliert wird. Zudem kannst du im Tab "Weiteres" optionalen und nicht benötigten CSS-Code deaktivieren.
Bilder effizient codieren
Empfehlungen zur effizienten Bildkodierung:
Moderne Bildformate verwenden
WebP, AVIF oder JPEG 2000 sind oft effizienter als JPG oder PNG.
WebP bietet z. B. 30 % kleinere Dateien als vergleichbare JPEGs bei gleicher Qualität.
Bilder komprimieren
Verlustfreie oder verlustbehaftete Komprimierung je nach Anwendungsfall wählen.
Bildgröße anpassen
Bilder nicht größer hochladen als notwendig.
CSS oder HTML nicht zur Größenanpassung großer Bilder nutzen, sondern sie direkt in der passenden Auflösung speichern.
Responsive Bilder nutzen
Das srcset-Attribut verwenden, um je nach Gerät unterschiedliche Bildgrößen zu laden.
Lazy Loading aktivieren
Mit loading="lazy" werden Bilder erst geladen, wenn sie im sichtbaren Bereich erscheinen.
Diagnose
Bildelemente haben keine explizite width und height [CLS]
Umfangreiche Layoutverschiebungen vermeiden [CLS]
Der Cumulative Layout Shift (CLS) misst, wie stark sich Elemente auf einer Webseite während des Ladens unerwartet verschieben. Solche Verschiebungen können Nutzer irritieren und zu einem schlechten Benutzererlebnis führen, beispielsweise wenn plötzlich auftauchende Inhalte den bereits sichtbaren Text oder Buttons verschieben.
Empfehlungen zur Minimierung von Layoutverschiebungen:
Größen für Medien festlegen: Stelle sicher, dass für alle Bilder, Videos und eingebetteten Inhalte feste Breiten und Höhen definiert sind. Dadurch kann der Browser den benötigten Platz bereits beim Laden reservieren, was unerwartete Verschiebungen verhindert.
Webfonts optimieren: Nutze die CSS-Eigenschaft font-display: swap, um zu verhindern, dass beim Laden von Schriftarten der Text unsichtbar wird oder seine Größe ändert, was zu Layoutverschiebungen führen kann.
Dynamische Inhalte sorgfältig laden: Achten Sie darauf, dass dynamisch eingefügte Inhalte, wie beispielsweise Pop-ups oder Banner, den vorhandenen Inhalt nicht unerwartet verschieben.
Avoid an excessive DOM size
Dies bedeutet, dass deine Webseite nicht zu viele HTML-Elemente haben sollte. Ein sehr großer DOM-Baum – also extrem viele Elemente im Seiten-Code – ist problematisch, weil der Browser beim Laden und Anzeigen mehr arbeiten muss und die Seite dadurch langsamer wird.
Gesamtzahl der DOM-Elemente:
Unter 1.500 Elementen ist ideal.
Über 3.000 Elemente kann die Leistung beeinträchtigen.
Maximale DOM-Tiefe (Verschachtelungstiefe):
Unter 32 Ebenen ist empfohlen.
Eine zu tiefe Verschachtelung kann die Rendering-Performance verlangsamen.
Maximale Anzahl an Child-Elementen pro Node:
Unter 60 direkten Kind-Elementen pro Eltern-Element ist optimal.
Eine sehr große Anzahl kann die Rechenzeit für Layout-Berechnungen erhöhen.
Hinweis:
Shopware hat von Haus aus bereits einen recht großen DOM-Baum auf welchen du kaum einen Einfluss hast. Halte die Navigations-Struktur klein und nutze möglichst wenige und einfache Elemente in deinen Erlebniswelten.
Cumulative Layout Shift misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs.
Mithilfe diese Empfehlungen lässt sich die Ladezeit Ihrer Seite möglicherweise verkürzen. Sie haben keinen auf die Leistungsbewertung.
Bildformate wie WebP und AVIF bieten oft eine bessere Komprimierung als PNG oder JPEG, wodurch sie schneller heruntergeladen werden und weniger Daten verbrauchen.
Stellen Sie Bilder bereit, die eine angemessene Größe haben, um mobile Daten zu sparen und die Ladezeit zu verbessern.
Achten Sie auf eine möglichst kurze Serverantwortzeit für das Hauptdokument, weil alle anderen Anfragen davon abhängen.
Sie können nicht verwendetes JavaScript reduzieren und das Laden von Skripts aufschieben, bis sie benötigt werden, um den Datenverbrauch durch Netzwerkaktivität zu senken.
Sie können ungültige Regeln in Stylesheets reduzieren und CSS aufschieben, die nicht für ohne Scrollen sichtbare Inhalte verwendet werden, um den Datenverbrauch durch Netzwerkaktivität zu senken.
Ressourcen blockieren den First Paint Ihrer Seite. Versuchen Sie, wichtiges JS und wichtige CSS inline anzugeben und alle nicht kritischen JS und Stile aufzuschieben.
Optimierte Bilder werden schneller geladen und verbrauchen weniger mobile Daten.
Tools wie können die Dateigröße reduzieren.
Weitere Informationen zur Leistung Ihrer App finden Sie hier. Diese Angaben haben keinen auf die Leistungsbewertung.
Legen Sie eine explizite Breite und Höhe für Bildelemente fest, um Layoutverschiebungen zu reduzieren und CLS zu verbessern.
