Bronbestanden optimaliseren
Voor een meer responsieve Commerce-site optimaliseert u CSS- en JavaScript-bronbestanden (JS) en elimineert u bronnen voor het blokkeren van renderbestanden.
- optimaliseer CSS en JS dossiers - verklein de tijd die wordt vereist om CSS en de dossiers van JavaScript (JS) te laden door Adobe Commerce te vormen om, afzonderlijke dossiers in één enkel dossier samen te voegen, te minimaliseren en te bundelen.
- elimineer renderen-blokkerende middelen - overweeg het leveren van kritieke eigenschappen JS en CSS inline en het uitstellen van alle niet-kritieke stijlen JS/CSS. Voor begeleiding, zie teruggeven-blokkerende middelenelimineren.
Betrokken producten en versies
Alle gesteunde versies, 2.3 en latervan:
- Adobe Commerce over cloudinfrastructuur
- Adobe Commerce ter plaatse
CSS-bestanden samenvoegen of beperken
De tijd die nodig is om CSS- en JavaScript-bestanden (JS) te laden, kan worden verkort door afzonderlijke bestanden samen te voegen, te miniaturen en te bundelen in één bestand.
Voeg of bundel geen dossiers samen als uw plaatsing HTTP/2 gebruikt. HTTP/2 downloadt statische bestanden asynchroon. Browsers moeten een volledig samengevoegd bestand downloaden voordat de bestandsinhoud kan worden verwerkt.
Admin gebruiken
Om CSS samen te voegen of minificatie toe te laten, ga in Admin > Slaat > Vestigend > Configuratie > Geavanceerd > Ontwikkelaar > CSS Montages.
De opdrachtregel gebruiken
CSS samenvoegen in Adobe Commerce inschakelen op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/css/merge_css_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
CSS-minificatie inschakelen in Adobe Commerce op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/css/minify_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
JS-bestanden miniaturen
Admin gebruiken
Op Admin sidebar, ga Opslag > Montages > Configuratie > Geavanceerd > Ontwikkelaar > de Montages van JavaScript.
De opdrachtregel gebruiken
JS-minificatie in Adobe Commerce inschakelen op cloudinfrastructuur:
-
Deze opdracht lokaal uitvoeren:
code language-bash bin/magento config:set --lock-config dev/js/minify_files 1 -
Wijzigingen vastleggen in het
app/etc/config.php-bestand en opnieuw implementeren.
JS-bestanden samenvoegen en bundelen
U kunt het samenvoegen of het bundelen in Commerce Admin (het samenvoegen en het bundelen kunnen niet tezelfdertijd worden toegelaten) aanzetten: Slaat > Montages > Configuratie > Geavanceerd > Ontwikkelaar > Montages van JavaScript.
U kunt ook ingebouwde Adobe Commerce-bundeling (basisbundeling) inschakelen via de opdrachtregel:
php -f bin/magento config:set dev/js/enable_js_bundling 1