Dokumentation Commerce Implementierungs-Playbook

Ressourcendateien optimieren

Letzte Aktualisierung: 5. Mai 2025

Themen:
Best Practices

Erstellt für:

Experte
Entwickler

Für eine reaktionsschnellere Commerce-Site optimieren Sie CSS- und JavaScript (JS)-Ressourcendateien und eliminieren Sie Render-Blocking-Ressourcen.

Optimieren von CSS- und JS-Dateien - Verringern Sie den Zeitaufwand für das Laden von CSS- und JavaScript (JS)-Dateien, indem Sie Adobe Commerce so konfigurieren, dass separate Dateien zusammengeführt, minimiert und zu einer einzigen Datei gebündelt werden.
Eliminieren von Render-Blocking-Ressourcen - Erwägen Sie, wichtige JS- und CSS-Funktionen inline bereitzustellen und alle nicht kritischen JS-/CSS-Stile zurückzustellen. Eine Anleitung finden Sie unter Beseitigen von Render-Blocker-Ressourcen.

Betroffene Produkte und Versionen

Alle unterstützten Versionen 2.3 und höher von:

Adobe Commerce auf Cloud-Infrastruktur
Adobe Commerce On-Premises

Zusammenführen oder Minimieren von CSS-Dateien

Der Zeitaufwand für das Laden von CSS- und JavaScript-Dateien (JS) kann reduziert werden, indem separate Dateien zusammengeführt, minimiert und zu einer einzigen Datei gebündelt werden.

IMPORTANT

Adobe Commerce in der Cloud-Infrastruktur wird immer im Produktionsmodus ausgeführt und kann nicht anderweitig festgelegt werden. Daher müssen Sie die Befehlszeilenmethode verwenden, um das Zusammenführen, Minimieren und Bündeln zu aktivieren.

Führen Sie keine Dateien zusammen oder bündeln Sie sie, wenn Ihre Bereitstellung HTTP/2 verwendet. HTTP/2 lädt statische Dateien asynchron herunter. Browser müssen eine gesamte zusammengeführte Datei herunterladen, bevor sie den Dateiinhalt verarbeiten können.

Verwenden von Admin

Um die CSS-Zusammenführung oder -Minimierung zu aktivieren, navigieren Sie zu Admin > Stores > Setting > Configuration > Advanced > Developer > CSS Settings.

Verwenden der Befehlszeile

So aktivieren Sie die CSS-Zusammenführung in Adobe Commerce in der Cloud-Infrastruktur:

Führen Sie diesen Befehl lokal aus:

bin/magento config:set --lock-config dev/css/merge_css_files 1

Übertragen Sie Änderungen in die app/etc/config.php und stellen Sie sie erneut bereit.

So aktivieren Sie die CSS-Minimierung in Adobe Commerce in der Cloud-Infrastruktur:

Führen Sie diesen Befehl lokal aus:

bin/magento config:set --lock-config dev/css/minify_files 1

Übertragen Sie Änderungen in die app/etc/config.php und stellen Sie sie erneut bereit.

Minimieren von JS-Dateien

Verwenden von Admin

Navigieren Sie in Admin-Seitenleiste zu Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

Verwenden der Befehlszeile

So aktivieren Sie die JS-Minimierung in Adobe Commerce auf der Cloud-Infrastruktur:

Führen Sie diesen Befehl lokal aus:

bin/magento config:set --lock-config dev/js/minify_files 1

Übertragen Sie Änderungen in die app/etc/config.php und stellen Sie sie erneut bereit.

Zusammenführen und Bündeln von JS-Dateien

Sie können das Zusammenführen oder Bündeln in Commerce Admin aktivieren (Zusammenführen und Bündeln können nicht gleichzeitig aktiviert werden): Stores > Settings > Configuration > Advanced > Developer > JavaScript Settings.

Sie können auch über die Befehlszeile die integrierte Bündelung (Basic Bundling) von Adobe Commerce aktivieren:

php -f bin/magento config:set dev/js/enable_js_bundling 1

Weitere Informationen

recommendation-more-help