Optimieren von Ressourcendateien
Optimieren Sie für eine reaktionsfähigere Commerce-Site CSS- und JavaScript-Ressourcendateien (JS) und eliminieren Sie Renderer-Blockierungsressourcen.
- CSS- und JS-Dateien optimieren: Reduzieren Sie die zum Laden von CSS- und JavaScript (JS)-Dateien erforderliche Zeit, indem Sie Adobe Commerce so konfigurieren, dass separate Dateien zusammengeführt, minimiert und in einer Datei zusammengefasst werden.
- Renderer-Blocker-Ressourcen eliminieren - Erwägen Sie die Inline-Bereitstellung kritischer JS- und CSS-Funktionen und die Verschiebung aller nicht kritischen JS-/CSS-Stile. Eine Anleitung finden Sie unter Renderer-Blocker-Ressourcen beseitigen.
Betroffene Produkte und Versionen
Alle unterstützten Versionen, 2.3 und höher von:
- Adobe Commerce auf Cloud-Infrastruktur
- Adobe Commerce vor Ort
Zusammenführen oder Minimieren von CSS-Dateien
Die Ladezeit von CSS- und JavaScript-Dateien (JS) kann durch Zusammenführen, Minimieren und Bündeln separater Dateien in einer Datei reduziert werden.
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 die Dateiinhalte verarbeitet werden.
Verwenden von Admin
Um die CSS-Zusammenführung oder -Minimierung zu aktivieren, gehen Sie zu "Admin"> "Stores"> "Einstellung"> "Konfiguration"> "Erweitert"> "Entwickler"> "CSS-Einstellungen".
Befehlszeile verwenden
Aktivieren der CSS-Zusammenführung in Adobe Commerce in der Cloud-Infrastruktur:
-
Führen Sie diesen Befehl lokal aus:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Übertragen Sie Änderungen an der Datei "
app/etc/config.php"und stellen Sie sie erneut bereit.
Aktivieren der CSS-Minimierung in Adobe Commerce in der Cloud-Infrastruktur:
-
Führen Sie diesen Befehl lokal aus:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Übertragen Sie Änderungen an der Datei "
app/etc/config.php"und stellen Sie sie erneut bereit.
Minimieren von JS-Dateien
Verwenden von Admin
Wechseln Sie in der Seitenleiste Admin zu Stores > Einstellungen > Konfiguration > Erweitert > Entwickler > JavaScript-Einstellungen.
Befehlszeile verwenden
Aktivieren der JS-Minimierung in Adobe Commerce in der Cloud-Infrastruktur:
-
Führen Sie diesen Befehl lokal aus:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Übertragen Sie Änderungen an der Datei "
app/etc/config.php"und stellen Sie sie erneut bereit.
Zusammenführen und Bundle von JS-Dateien
Sie können das Zusammenführen oder Bundling im Commerce Admin aktivieren (das Zusammenführen und Bundling kann nicht gleichzeitig aktiviert werden): Stores > Einstellungen > Konfiguration > Erweitert > Entwickler > JavaScript-Einstellungen.
Sie können auch das integrierte Adobe Commerce-Bundling (Basis-Bundling) über die Befehlszeile aktivieren:
php -f bin/magento config:set dev/js/enable_js_bundling 1