PageSpeed Insights

Messwerte

First Contentful Paint

First Contentful Paint gibt an, wann der erste Text oder das erste Bild gezeichnet wird. Weitere Informationen.

Speed Index

Der Geschwindigkeitsindex gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. Weitere Informationen.

Largest Contentful Paint

Largest Contentful Paint gibt an, wie lange das Zeichnen des längsten Texts oder des größten Bilds dauert. Weitere Informationen

Time to Interactive

Die Zeit bis Interaktivität entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. Weitere Informationen.

Total Blocking Time

Summe aller Zeiträume (in Millisekunden) zwischen FCP und Zeit bis Interaktivität, wenn die Aufgabendauer 50 ms überschreitet. Weitere Informationen

Cumulative Layout Shift

Cumulative Layout Shift misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs. Weitere Informationen

Empfehlungen

Mithilfe diese Empfehlungen lässt sich die Ladezeit Ihrer Seite möglicherweise verkürzen. Sie haben keinen direkten Einfluss auf die Leistungsbewertung.

Bilder in modernen Formaten bereitstellen

Bildformate wie WebP und AVIF bieten oft eine bessere Komprimierung als PNG oder JPEG, wodurch sie schneller heruntergeladen werden und weniger Daten verbrauchen. Weitere Informationen

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

Stellen Sie Bilder bereit, die eine angemessene Größe haben, um mobile Daten zu sparen und die Ladezeit zu verbessern. Weitere Informationen.

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

Achten Sie auf eine möglichst kurze Serverantwortzeit für das Hauptdokument, weil alle anderen Anfragen davon abhängen. Weitere Informationen.

Hinweis:

Dieser Punkt ist stark mit der Server-Performance verknüpft.

Reduzieren Sie nicht verwendetes JavaScript

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. Weitere Informationen

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

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. Weitere Informationen

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

Ressourcen blockieren den First Paint Ihrer Seite. Versuchen Sie, wichtiges JS und wichtige CSS inline anzugeben und alle nicht kritischen JS und Stile aufzuschieben. Weitere Informationen.

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

Optimierte Bilder werden schneller geladen und verbrauchen weniger mobile Daten. Weitere Informationen.

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

  • Tools wie TinyPNG können die Dateigröße reduzieren.

  • 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

Weitere Informationen zur Leistung Ihrer App finden Sie hier. Diese Angaben haben keinen direkten Einfluss auf die Leistungsbewertung.

Bildelemente haben keine explizite width und height [CLS]

Lege eine explizite Breite und Höhe für Bildelemente fest, um Layoutverschiebungen zu reduzieren und CLS zu verbessern. Weitere Informationen

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.

Übermäßige DOM-Größe vermeiden

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.

Empfehlungen zur DOM-Reduzierung:

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