Bilder optimieren

Hinweis

Die Retail Interest Group von Dynamics 365 Commerce hat sich von Yammer zu Viva Engage verschoben. Wenn Sie keinen Zugriff auf die neue Viva Engage Community haben, füllen Sie dieses Formular (https://aka.ms/JoinD365commerceVivaEngageCommunity) aus, um hinzugefügt zu werden, und bleiben Sie an den neuesten Diskussionen beteiligt.

In diesem Artikel wird erläutert, wie Sie die Leistung der Website verbessern können, indem Sie die Bildnutzung in Microsoft Dynamics 365 Commerce während des Upgrades oder des Go-Live-Prozesses optimieren.

Gilt für

Dieser Artikel gilt für die folgenden Konfigurationen angewendet werden:

  • Version: Commerce 10.0.16 und höher
  • Komponente: Business-to-Consumer (B2C) oder Business-to-Business (B2B)
  • Funktionsbereich: Leistung der Commerce-Website

Voraussetzungen

Installieren Sie das Dynamics 365 Commerce Online Software Development Kit (SDK). Weitere Informationen finden Sie unter Das Online-SDK installieren.

Schritte zur Bildoptimierung

Das Herunterladen von Bildern kann sich erheblich auf die Leistung einer Webseite auswirken. Führen Sie die folgenden Schritte aus, um die Größe Ihrer Bilder zu verringern und die tatsächliche und wahrgenommene Leistung Ihrer Website zu verbessern:

  1. Verwenden Sie, wann immer möglich, Cascading Style Sheets (CSS), um Bilder für Elemente wie Schaltflächen zu generieren.

  2. Laden Sie hochwertige, hochauflösende Marketing- oder Produktbilder in die Commerce Site Builder Media Library hoch. Der Bild resizer ändert dann die Größe von Bildern während des Renderings automatisch.

  3. Fügen Sie für jedes Bild Breiten- und Höheneigenschaften hinzu:

    1. Öffnen Sie für jedes Modul, das Bilder verwendet, die theme.settings.json-Datei im /src/settings-Verzeichnis am SDK-Installationsspeicherort.
    2. Suchen Sie das Modul, das Sie aktualisieren möchten.
    3. Stellen Sie sicher, dass die Bildeigenschaften Breiten- und Höhenparameter enthalten. Weitere Informationen finden Sie unter Designeinstellungen konfigurieren.
  4. Deaktivieren Sie Lazy Loading für Bilder:

    1. Öffnen Sie die Commerce-Websiteerstellung.
    2. Navigieren Sie zu dem Modul, das ein Bild enthält, das nicht verzögert geladen werden soll.
    3. Deaktivieren Sie für Produktsammlungsmodule das Kontrollkästchen Lazy Loading für Modul aktivieren. Wählen Sie für andere Module das Kontrollkästchen Lazy Load deaktivieren.
    4. Speichern, Vorschau und Veröffentlichen eines Inhalts.

Prüfen

Verwenden Sie die folgende Methode, um zu überprüfen, ob die Bildverwendung optimiert ist.

  • Beschreibung oder Zweck: Überprüfen Sie die Seitenleistung.
  • Auszuführende Schritte: Führen Sie vor und nach der Optimierung Ihrer Bilder Leistungstests durch.
  • Ergebnis übergeben: Die Leistung wird verbessert, nachdem Sie Ihre Bilder optimiert haben.

Zusätzliche Ressourcen

Best-Methoden für Dynamics 365 Commerce Entwicklung